CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab
Thallysson Klein
Thallysson Klein

Reputation: 167

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.

Upvotes: 1

Views: 2176

Answers (1)

satya164
satya164

Reputation: 10145

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.

Upvotes: 3

Related Questions