CODEWITHSUNDEEP
javascriptreact-nativescrollview
BeHappy
BeHappy

Reputation: 3978

Scroll page when keyboard appears react native

I want user can scroll screen when keyboard is appear.

For now content is under keyboard.

I want keyboard push screen up and user can scroll it.

This is what happened:

Problem screenshot

And my code:

<SafeAreaView style={{ flex: 1 }}>
  <ScrollView keyboardShouldPersistTaps="never" contentContainerStyle={{ flex: 1 }}>
    <View style={{ padding: 15, flex: 1 }}>
      <View style={{ flex: 1, justifyContent: "flex-start", marginTop: 25 }}>
        <TForm
          fields={fields}
          values={values}
          errors={errors}
          onChangeText={(val, name) => setValues({ ...values, [name]: val })}
          onError={(error, name) => setErrors({ ...errors, [name]: error })}
        />
      </View>
      <AuthButton text={Strings.btns.login} onPress={login} />
      <NavigateRegister />
    </View>
  </ScrollView>
</SafeAreaView>

and Button code:

<View style={{ marginBottom: 15 }}>
  <LinearGradient>
    <Button
      title={text}
      buttonStyle={[
        {
          height: 60,
          width: "100%",
          borderRadius: 10,
          backgroundColor: bgColor,
          maxWidth: screenWidth - 30,
          alignSelf: "center",
        },
      ]}
      titleStyle={[
        {
          fontFamily: Fonts.SPT.bold,
          fontWeight: "bold",
          fontSize: 12,
          lineHeight: 20,
          color: Colors.whiteFFF,
        }
      ]}
      {...props}
    />
  </LinearGradient>
</View>

and Button is react-native-elements's button.

I try KeyboardAvoidingView and no helps.

I want something like singlechildscrollview in flutter.

Upvotes: 0

Views: 1832

Answers (2)

BeHappy
BeHappy

Reputation: 3978

I finally found solution:

I changed contentContainerStyle={{ flex: 1 }} to contentContainerStyle={{ flexGrow: 1 }} and now screen can be scroll when keyboard is on.

Upvotes: 2

MIPB
MIPB

Reputation: 2471

I think the solution is to put your LoginButton inside the textInputs View:

<View style={{ padding: 15, flex: 1 }}>
// Other components //
<AuthButton text={Strings.btns.login} onPress={login} />
</View>

Otherwise the buttons is left outside of the view which has a flex: 1 style.

To solve the scrolling, on your ScrollView:

keyboardShouldPersistTaps="handled"

Upvotes: 0

Related Questions