React native Scrollview not scrolling at all

Question

I am building a react native application and I use scrollview for some contents but it is not scrolling I cannot figure out why. I try a lot of things, adding flex: 1 everywhere but none of these is working.

Thank you in advance for your help.

<KeyboardAwareScrollView contentContainerStyle={authStyles.container}>
          <Layout isBackArrow={true}>
              <BottomLayout>
                  <Header fontSize={20}>
                      <Text>Nous sommes</Text> {'\n'}
                      <Text style={authStyles.headerBold}>
                          Ravis de te revoir!
                      </Text>
                      {'\n'}
                      <Caption>Je me connecte via:</Caption>
                  </Header>
                  <View style={authStyles.socialIconView}>
                      <SocialIcon type="facebook" onPress={onFacebookLogin} />
                      <SocialIcon type="google" />
                      <SocialIcon
                          type="apple"
                          onPress={onAppleButtonPress}
                          style={{ backgroundColor: COLORS.BLACK }}
                      />
                  </View>
                  <View style={authStyles.orView}>
                      <Header fontSize={15}>
                          <Text style={authStyles.headerBold}>Ou</Text>
                          {'\n'}
                          <Caption>
                              Je saisis mon email et mot de passe
                          </Caption>
                      </Header>
                  </View>
                  <View style={authStyles.inputView}>
                      <CustomInput
                          label="Email"
                          icon
                          iconName="envelope"
                          iconFamily="font-awesome"
                          onChange={text => setEmail(text)}
                      />
                      <CustomInput
                          label="Mot de passe"
                          icon
                          iconName="lock"
                          iconFamily="entypo"
                          onChange={text => setPassword(text)}
                          password
                      />
                      <CustomButton
                          title="Mot de passe oublié ?"
                          clear
                          onPress={open}
                      />
                  </View>
              </BottomLayout>
          </Layout>
      </KeyboardAwareScrollView>

Layout component:

<View style={layoutStyles.background}>
            {isBackArrow && <BackArrow onPress={onBackArrowPress} />}
            <ScrollView
                style={{ flex: 1 }}
                contentContainerStyle={{
                    flex: 1,
                }}
            >
                {children}
            </ScrollView>
        </View>

layout style:

background: {
        backgroundColor: COLORS.BRAND_ORANGE_OPACITY_2,
        width: '100%',
        height: '100%',
        flex: 1,
    },

BottomLayout Component:

<View style={layoutStyles.bottomLayout}>{children}</View>;

bottom layout style:

bottomLayout: {
        backgroundColor: COLORS.BRAND_ORANGE,
        position: 'absolute',
        bottom: 0,
        height: '75%',
        width: '100%',
        borderTopLeftRadius: 70,
        borderTopRightRadius: 70,
        paddingTop: 60,
        flex: 1,
    },

keyboardAwareScrollView contentContainerStyle:

container: {
       justifyContent: 'center',
       alignItems: 'center',
       flex: 1,
   },

Thanks in advance.

score 1 · Accepted Answer · answered Oct 20 '21 at 16:54

1

KeyboardAwareScrollView gives you a ScrollView already, you don't need to add another one inside of it. Remove the ScrollView from Layout or remove the KeyboardAwareScrollView.

React Native Nested ScrollView Can`t Scroll on Android Device

Also don't use flex: 1 in contentContainerStyle, instead use minHeight: '100%' (why?) if you want it to be full screen even when there is not enough content in it.

answered Oct 20 '21 at 16:54

Ugur Eren

1,968
2
11
21

Thank you a lot Ugur for your reply, indeed when I remove Scrollview and set `minHeight: '100%'` my KeyboardAwareScroll works fine then focus on input but what I want is also to scroll in the screen when overflow even if the input is not focused. I don't know if you understand what I mean ? – Pakenfit Oct 20 '21 at 17:02
Sorry, I didn't understand. You should be able scroll if there are content under the visible screen. – Ugur Eren Oct 20 '21 at 17:19
I edited my post, could you please check it, I don't know why I cannot scroll down without click on the inputText. – Pakenfit Oct 20 '21 at 17:28
Seems like the problem is in the bottomLayout styles. It can't scroll because you gave position absolute, and absolute positioned views won't affect the container. Try removing `position: 'absolute'` and `height: '75%'` – Ugur Eren Oct 20 '21 at 17:34
Waouw thank you a lot it was that the problem, just to know you have an idea I can achieve the design on my screenshot without `position: 'absolute'`. Thank you a lot again. – Pakenfit Oct 20 '21 at 17:44
You can get the screen height with [useWindowDimensions](https://reactnative.dev/docs/usewindowdimensions) hook and add it as margin. `const { height } = useWindowDimensions();` `marginTop: height / 4`. Or just give `marginTop: '25%'` but marginTop percentage will be calculated based on the width, instead of height. So it won't be as good as using window dimensions. – Ugur Eren Oct 20 '21 at 17:47
1

Ok great, thank you a lot. You saved my night :) – Pakenfit Oct 20 '21 at 17:55

React native Scrollview not scrolling at all

1 Answers1