CODEWITHSUNDEEP
reactjsreact-native
user7105571
user7105571

Reputation:

React native FlatList/ScrollView not Scrolling (Android Only)

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?

Upvotes: 2

Views: 3220

Answers (2)

Florin Dobre
Florin Dobre

Reputation: 10232

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}
      />

Upvotes: 0

Harsha Attray
Harsha Attray

Reputation: 86

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.

Upvotes: 2

Related Questions