Search code examples
react-nativegridflexboxscrollviewreact-native-router-flux

how to use ScrollView with react-native-router-flux and Grid,Col,Row

The ScrollView Does not work on react-native-router-flux !

index.js :

<Router>
<Scene
key="root">
<Scene key="layout2" component={layout2} title="Layouttwo" />
<Scene key="Layout1" component={Layout1} title="layouOne" />
</Scene>
</Router>

Layout1 :

<ScrollView>

  <Grid>
  <Row>
  <Col>
  <Text onPress={Actions.Layout1}>Bonjour Sofiane!</Text>
  </Col>
  <Col>
  <ListView dataSource={this.state.table1Source} renderRow={this.renderRowtable1.bind(this)} enableEmptySections={true} />
  </Col>

  </Row>
  <Row>
  <Col>
  <TextInput  placeholder="Input1" onChangeText={(text) => this.setState({Input1: text})} value={this.state.Input1}/>
  </Col>

  <Col>
  <Button title='Ajouter' onPress={() => this.remlirTable()} onLongPress={() => this.alerte()}/>
  </Col>
</Row>
  </Grid>
</ScrollView>

I have this screan layout1 : enter image description here

Instead of :

enter image description here

Thanks.

Solution

  • You should make the code like this :

      <View style={{marginTop: 50, }}>
      <ScrollView>

    //Hir your code... Row,col...

     </ScrollView>
   </View>