Multiple flexbox row with multiple scrollview in react native

Question

I am trying to build a view with two rows in an iPhone using react native. I want to have two rows with equal height with scroll view. I am not able to find much documentation on this. I am the below code but it just renders on top of each other.

      <View style={Styles.splitView}>
        <View style={Styles.splitViewLeft}>
          <ScrollView>
              <Text>Test1</Text>}
          </ScrollView>
        </View>
        <View style={Styles.splitViewRight}>
          <ScrollView>
            {
              <Text>Test2</Text>
            }
          </ScrollView>
        </View>
      </View>

      splitView: {
        flexDirection: 'row'
      },

      splitViewLeft: {
        flex: 3
      },

      splitViewRight: {
        flex: 2
      },

Val · Accepted Answer · 2017-12-05 05:51:08Z

1

This does the work:

<View style={{flex: 1}}>
  <ScrollView style={{flex: 1, backgroundColor: 'red'}}>
    <Text>Test1</Text>
  </ScrollView>
  <ScrollView style={{flex: 1, backgroundColor: 'yellow'}}>
    <Text>Test2</Text>
  </ScrollView>
</View>

Apply style flex: 1 on both <ScrollView /> to make them equal height.

If you wrap it inside parent <View />, you have to apply flex: 1 to <ScrollView /> too.

answered Dec 5, 2017 at 5:51

Val

22.9k11 gold badges72 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple flexbox row with multiple scrollview in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related