CODEWITHSUNDEEP
reactjsreact-native
Sooraj
Sooraj

Reputation: 10577

React native scroll view no scrolling

I have the following code which is returned in a render function in my react-native app. container have its flex property set to 1.

Even when the content is overflowing the scroll is not working. What am I doing wrong?

Also tried setting flex for ScrollView to 1. Still not working.

 <View style={globalStyle.container}>
          {flashMessage}
          <ScrollView>
            <View style={globalStyle.header}>
              <Text style={globalStyle.title}> {localization.categories} </Text>
            </View>
            <ListView style={{marginTop: 10}}
              dataSource={this.state.dataSource}
              renderRow={(rowData, sectionID, rowID)=> this.renderRow(rowData, sectionID, rowID)}
            />
          </ScrollView>
          <View style={{position: 'absolute', height: 70, left: 0, right: 0, bottom: 0, flexDirection:'row', justifyContent:'center'}}>
            <TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('home'); }} >
              <View>
                <Image style={globalStyle.footerIcons} source={require('./Thumbnails/ -button-selected.png')}/>
                <Text style={globalStyle.footerText,globalStyle.selected} > {localization.meditate} </Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('profile');}} >
              <View>
                <Image style={globalStyle.footerIcons} source={require('./Thumbnails/user.png')} />
                <Text style={globalStyle.footerText} > {localization.me} </Text> 
              </View>
            </TouchableHighlight>
            <TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('settings');}}>
              <View>
                <Image style={globalStyle.footerIcons} source={require('./Thumbnails/settings.png')} />
                <Text style={globalStyle.footerText} > {localization.settings} </Text> 
              </View>
            </TouchableHighlight>
          </View>
        </View>

Upvotes: 0

Views: 98

Answers (1)

Alexei Malashkevich
Alexei Malashkevich

Reputation: 1645

I believe you shouldn't use ListView inside ScrollView. You can use renderHeader function and put there your header:

 <View style={globalStyle.header}>
     <Text style={globalStyle.title}> {localization.categories} </Text>
 </View>

Upvotes: 1

Related Questions