CODEWITHSUNDEEP
react-nativekeyboard
Ishaq Kamran
Ishaq Kamran

Reputation: 223

How do i prevent the keyboard from pushing my view up in react native?

I am building a registration form in React Native. I have this view.

enter image description here

When keyboard is showing it is pushing my form and image over my title view like this. enter image description here

What should i do so that it my view doesnot lose its shape. I already tried scrollview and keyboard avoiding view but they are not helping. Here is my code.

<View style={styles.container}>
      <View style={styles.headingContainer}>
        <Text style={styles.headingText}>Sign Up</Text>
      </View>
      <View style={styles.form}>
        <View style={{ marginTop: 5, width: '100%', padding: 10 }}>
          <Input
            name="name"
            placeholder="Name"
            label="Name"
          />  
          <View style={styles.buttons}>
            <Button onPress={handleSubmit}>
              {isLogin ? 'Log In' : 'Sign Up'}
            </Button>
          </View>
        </View>
      </View>
      <View style={styles.logoCon}>
        <Image style={styles.logo} source={Logo} />
      </View>
    </View>
  );
}

export default AuthForm;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  headingContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '40%',
    backgroundColor: Colors.primary800,
    marginBottom: '-22%',
  },
  form: {
    backgroundColor: Colors.primary100,
    justifyContent: 'center',
    alignItems: 'center',
    height: 'auto',
    width: '100%',
    borderTopLeftRadius: 80,
  },
  logoCon: {
    alignSelf: 'center',
    height: 100,
    width: 100,
    marginTop: 'auto',
    marginBottom: -15,
  },
});

Update: I have solve the above issue, but now I am facing another issue i.e. I have to hide keyboard everytime i try to input text in any of the lower inputs. Also it is pushing my top view up inside the screen. NO scrollview is working. I have tried KeyboardAvoidingView, ScrollView, Animation, KeyboardAwareScrollView so far but got no luck.

enter image description here

PS: I know UIs are different. Its because i have completed the UI and this is the last thing i need to work on.

Upvotes: 4

Views: 8697

Answers (4)

TIKramer
TIKramer

Reputation: 1

I hade the same issue, I used this to just hide the views I don't want to see whenever the keyboard is opened: https://github.com/TIKramer/react-native-hide-onkeyboard

If you found another solution please let me know.

Upvotes: 0

Ahmet Firat Keler
Ahmet Firat Keler

Reputation: 4021

I have managed to overcome this issue using this npm package: react-native-keyboard-aware-scroll-view

npm install --save react-native-keyboard-aware-scroll-view

Then in your component, the basic usage is like below

return (
    <Fragment>
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAwareScrollView keyboardShouldPersistTaps='always'>
                <View style={{flex: 1}}>
                    //The content
                </View>
            </KeyboardAwareScrollView>
        </SafeAreaView>
    </Fragment>
);

If you have a modal, I'd suggest you to use it like that

<Modal
    animationType="slide"
    transparent={true}
    visible={this.state.search_modal_visible}
>
    <KeyboardAwareScrollView contentContainerStyle={{flexGrow: 1}}>
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            //The content
        </View>
    </KeyboardAwareScrollView>
</Modal>

In your AndroidManifest.xml, please be sure the line below exists as an attribute for activity tag

<activity
   android:windowSoftInputMode="adjustResize"

You can hide keyboard whenever you want like that in your code

Keyboard.dismiss();

Upvotes: 3

Bhupesh Kumar
Bhupesh Kumar

Reputation: 256

Try to use KeyboardAvoidingView of react native

Upvotes: 0

Sumit_VE
Sumit_VE

Reputation: 487

The problem here is that you have in your AndroidManifest.xml:

windowSoftInputMode="adjustResize";

Change it to:

windowSoftInputMode="adjustPan"

Note: after this change you'll need run ./gradlew clean in android folder and react-native run-android in your project directory

Upvotes: 2

Related Questions