Search code examples
react-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab

ScrollView on material-bottom-tabs not working

Current Behavior

I'm creating my tabs like this (note: Home is a StackNavigator screen):

carbon (3)

ProfileTab is rendered this way (items is an array of inputs):

return <ScrollView contentContainerStyle={{flex: 1, backgroundColor: Colors.primaryShade3,
                                               paddingTop: Sizes.paddingTop}}>
              <View style={{flexDirection: "row", alignItems: "center", marginBottom: 50}}>
                  <Image source={{uri: RNStorage.userProfile.user.photo}} 
                         style={{marginRight: 20, resizeMode: "contain", width: 70, height: 70, borderRadius: 50}}/>
                  <Text style={{color: Colors.white, fontSize: Sizes.h2}}>
                    Bem vindo, {RNStorage.userProfile.user.givenName}
                  </Text>
              </View>                            
              {items}
   </ScrollView>

All inputs follow this structure:

carbon (4)

Currently having this behavior (Not scrolling):

ezgif com-video-to-gif (1)

Expected Behavior

Scroll should work normally. I also tested using the ScrollView of the react-native-gesture-handler but it didn't work either.

Solution

  • This is unrelated to material-bottom-tabs.

    You need to remove flex: 1 from contentContainerStyle. Otherwise your view will fill available scrollable area and won't be scrollable.