React native FlatList/ScrollView not Scrolling (Android Only)

Question

RN - 0.44 I have a component which acts a feed similar to faceBook, now i also have a higher component which handles the tabs. so in simple sense the components are ordered as -

MainComponent > Tabs Component > Scroll Component

Now the main Component render is as follows -

return(
        <Container style={{flex: 1}}>
            <Content style={{flex: 1}}>
                <Tabs Component/>
            </Content>
        </Container>
    )

The Tabs Component render is as follows -

return (
      <Container>
        <Header style={{backgroundColor:'white'}}>
          <Left>
            <Button transparent onPress={this.goKotha}>
              <Icon name="ios-chatbubbles-outline" size={30} style={{color:'#78909c'}}/>
            </Button>
          </Left>
          <Body>

          </Body>
          <Right>
            <Button transparent onPress={this.goSearch}>
              <Icon name="ios-search-outline" size={30} style={{color:'#78909c'}}/>
            </Button>
          </Right>
        </Header>
        <Content style={{flex: 1}}>
          {this.renderTabs()}
        </Content>
        <BottomNavigation
          activeTab={this.state.setTab}
          labelColor="white"
          rippleColor="white"
          style={{ height: 66, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
          onTabChange={(newTabIndex, oldTabIndex) => {
            this.setState({
              setTab: newTabIndex
            })
            console.log(this.state.setTab);
          }}
        >
          <Tab
            barBackgroundColor="#eceff1"
            label="Feed"
            activeLabelColor="#43a047"
            icon={<Icon size={20} name="ios-book" />}
            activeIcon={<Icon size={20} name="ios-book-outline" style={{color:'#43a047'}} />}
          />
          <Tab
            barBackgroundColor="#cfd8dc"
            label="Friends"
            activeLabelColor="#388e3c"
            icon={<Icon size={20} name="ios-people" />}
            activeIcon={<Icon size={20} name="ios-people-outline" style={{color:'#388e3c'}} />}
          />
          <Tab
            barBackgroundColor="#b0bec5"
            label="Alerts"
            activeLabelColor="#b9f6ca"
            icon={<Icon size={20} name="ios-notifications" />}
            activeIcon={<Icon size={20} name="ios-notifications-outline" style={{color:'#b9f6ca'}} />}
          />
          <Tab
            barBackgroundColor="#90a4ae"
            label="Settings"
            activeLabelColor="#69f0ae"
            icon={<Icon size={20} name="ios-cog" />}
            activeIcon={<Icon size={20} name="ios-cog-outline"  style={{color:'#69f0ae'}}/>}
          />
        </BottomNavigation>
      </Container>
  );

Finally the scroll component is as follows -

return(
        <Container style={{flex: 1}}>
          <Content style={{flex: 1}}>
              <ActivityIndicator animating={this.state.refresh} text="Refreshing..."/>
              <Item style={{justifyContent:'space-between', marginBottom:4,marginTop:4, alignItems:'center', backgroundColor:'white'}}>
                  <Image source={{uri: this.props.user.profilePic || 'user.png'}} style={{height:30, width:30, marginLeft:10, marginTop:10, marginBottom: 10}} defaultSource={require('../../assets/user.png')}/>
                  <Text style={styles.SubHeading} onPress={this.createPost}>What's new today</Text>
                  <Icon name="ios-refresh-outline" size={20} style={{color: '#2e7d32'}} onPress={this.onRefresh}/>
                  <Icon name="ios-camera-outline" size={20} style={{color: '#2e7d32', marginRight: 10}} onPress={this.uploadProfpic}/>
              </Item>
              <FlatList data={this.props.data.allPosts} renderItem={this._renderItem} keyExtractor={this._keyExtractor}/>
          </Content>
        </Container>
    )

Now with this setup the scroll works perfectly in IOS. even with the scroll container is working perfect. But when it comes to android it initially renders ok. But then the scroll is limited to the top component and not the scroll component. I have tried both scrollView and FlatList but not working with android. Can anyone shed light where i am getting the structure wrong?

The flatlist requires a bound height as well - it needs to understand how much room it can flex to to then make the scroll work as expected. — Andrew Breen
– Andrew Breen, Commented Jun 6, 2017 at 0:14

Harsha Attray · Accepted Answer · 2017-06-09 10:48:09Z

In the code that you have written I dont seem to find <ScrollView> anywhere to trigger the scroll.

import {ScrollView} from 'react-native' and include the part you want to add the scroll within <ScrollView></ScrollView>

 return (
<ScrollView>
  <Container style={{flex: 1}}>
      <Content style={{flex: 1}}>
          <ActivityIndicator animating={this.state.refresh} text="Refreshing..."/>
          <Item style={{justifyContent:'space-between', 
                  marginBottom:4,marginTop:4, alignItems:'center', backgroundColor:'white'}}>
              <Image source={{uri: this.props.user.profilePic || 'user.png'}} style={{height:30, width:30, marginLeft:10, marginTop:10, marginBottom: 10}} defaultSource={require('../../assets/user.png')}/>
              <Text style={styles.SubHeading} onPress=
                {this.createPost}>What's new today</Text>
              <Icon name="ios-refresh-outline" size={20} style={{color: 
               '#2e7d32'}} onPress={this.onRefresh}/>
              <Icon name="ios-camera-outline" size={20} style={{color: 
            '#2e7d32', marginRight: 10}} onPress={this.uploadProfpic}/>
          </Item>
          <FlatList data={this.props.data.allPosts} renderItem=
     {this._renderItem} keyExtractor={this._keyExtractor}/>
      </Content>
    </Container>
  </ScrollView>
       );

This should work fine.

Florin Dobre · Accepted Answer · 2022-10-12 15:35:01Z

I had a similar issue using RN 0.66, in my case the parent scrollable container was a SectionList, using react-native-gesture-handler v2. Ended up using the <GestureHandlerRootView style={{flex: 1}}> wrapping the App as described here:

https://docs.swmansion.com/react-native-gesture-handler/docs/installation/

and the FlatList and ScrollView exported by RNGH

import { FlatList, ScrollView } from 'react-native-gesture-handler';

<SectionList
        contentContainerStyle={styles.sectionListContainer}
        showsVerticalScrollIndicator={false}
        SectionSeparatorComponent={SeparatorItem}
        sections={chunkedSponsors}
        keyExtractor={(item) => item.id}
        renderItem={renderFlatlist}. // <-- using RNGH FlatList in that function
        renderScrollComponent={(props) => <ScrollView {...props} />} // <--using RNGH ScrollView here
        renderSectionHeader={({ section: { title } }) => (
          <Title>{title}</Title>
        )}
        stickySectionHeadersEnabled={false}
      />

Collectives™ on Stack Overflow

React native FlatList/ScrollView not Scrolling (Android Only)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related