React-Native ScrollView scrolling both vertically and horizontally

Question

for my app, I need ScrollView component to be scrolled both vertically and horizontally. I searched quite a lot but, could not come out to solution. Tried directionLockEnabled, did not work. contentContainerStyle is not way, because my row and columns numbers are dynamic, it may expand in both direction. I believe there should be some way to make ScrollView scrolled in both directions.

Here is my ScrollView picture inside DataGrid

Here is my ScrollView code inside the dataGrid(react-native-easy-grid)

 <Grid style={{ width: width - 20, height: height / 2 }}>
<ScrollView
    horizontal={true}
    style={{
        height: height / 2,
        width: width - 20,
        marginLeft: 20,
        borderWidth: 1,
        borderColor: "#D3D3D3"
    }}
>
    <Col style={{ width: 200 }}>
        <Row
            style={{
                borderWidth: 1,
                borderColor: "#D3D3D3",
                height: 80,
                alignItems: "center"
            }}
        >
            <Text>{this.state.Wholesaler}</Text>
        </Row>
        {this.state.dataGrid.map((person, i) => {
            return (
                <Row
                    key={i}
                    style={{
                        borderWidth: 1,
                        borderColor: "#D3D3D3",
                        height: 50,
                        alignItems: "center"
                    }}
                >
                    <Text>{person.name}</Text>
                </Row>
            );
        })}
    </Col>
    <Col style={{ width: 200 }}>
        <Row
            style={{
                height: 40,
                alignItems: "center",
                justifyContent: "center",
                borderWidth: 1,
                borderColor: "#D3D3D3"
            }}
        >
            <Text>Operator</Text>
        </Row>
        <Row style={{ height: 40 }}>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Target</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Actual</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>%</Text>
            </Col>
        </Row>
        {this.state.dataGrid.map((person, i) => {
            return (
                <Row key={i} style={{ height: 50 }}>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.OperatorTarget}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.OperatorActual}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.OperatorPercent}</Text>
                    </Col>
                </Row>
            );
        })}
    </Col>
    <Col style={{ width: 200 }}>
        <Row
            style={{
                height: 40,
                alignItems: "center",
                justifyContent: "center",
                borderWidth: 1,
                borderColor: "#D3D3D3"
            }}
        >
            <Text>Lead</Text>
        </Row>
        <Row style={{ height: 40 }}>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Target</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Actual</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>%</Text>
            </Col>
        </Row>
        {this.state.dataGrid.map((person, i) => {
            return (
                <Row key={i} style={{ height: 50 }}>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.LeadTarget}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.LeadActual}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.LeadPercent}</Text>
                    </Col>
                </Row>
            );
        })}
    </Col>
</ScrollView>
</Grid>;

score 1 · Answer 1 · answered Feb 27 '18 at 09:08

1

I found this thing from one of the issues on GitHub. You can use two scrollviews. One for horizontal and other for vertical.

<ScrollView>
    <ScrollView horizontal>
          .....
    </ScrollView>
<ScrollView>

answered Feb 27 '18 at 09:08

Pranay Ankit

217
1
5
17

I tried nested ScrollView, as well. But, it did not work for me. – Ali Zeynalov Feb 27 '18 at 09:15
This did sorta work (not very smooth) but I'm not a fan. I am using RN 0.68.2 wonder if there is a bug with ScrollViews in that version. – aaronmbmorse Aug 04 '22 at 02:40

score 1 · Answer 2 · answered May 28 '20 at 06:47

1

The horizontal ScrollView scrolls the components and views from left to right. It will be implemented by setting the props horizontal to true (horizontal={true})

<ScrollView  horizontal={true}> 
      ....your code 
  </ScrollView>

answered May 28 '20 at 06:47

Farid

106
1
4

score 0 · Answer 3 · answered Jan 09 '22 at 20:18

You can always use a <ScrollView> as many times as you want and you can specify if you want it horizontal or vertical, right before the <View> or the <WebView>

Example:

<ScrollView>
    <ScrollView horizontal>
        <View>
            <WebView (your code) />
        </View>
    </ScrollView>
</ScrollView>

React-Native ScrollView scrolling both vertically and horizontally

3 Answers3