Question 34835 in React native Question posted in
The official React Native documentation can be found here.

Why my Keyboard not pushing up input view in React Native?

I have a Sign Up screen in React Native, and when I press on the Input fields, my view does not go up therefore I can not see what I am typing. On other screens I have, the view gets pushed up. It feels like on Sign Up screen the "keyboardLayout" is set to "pan", but I did not specify it anywhere…

I am using Expo.

Problem

SignUp.js

    return(
      <View style={styles.container}>

      <View style={styles.logoContainer}>
        <Image source={logo} style={styles.logoStyle}/>
      </View>

        <View>
            
            <Formik
            initialValues={{email:'', fullname:'',password:'', password_repeat:'', adatkezeles:false}}
            onSubmit={values =>{
                onRegister_clicked(values.email,values.password,values.fullname)
            }}
            validationSchema={SignUpFormSchema}
            validateOnMount={true}
            >
                {({handleChange, handleBlur, handleSubmit, values, isValid, errors, setFieldValue}) => (
                <>
                <View style={[styles.textBox,{
                borderColor: values.email.length < 1  || emalValidate(values.email)  ? color_theme_light.textBoxBorder : color_theme_light.loginTextInvalid
                }]}>
                    <TextInput
                    placeholder='Email cím'
                    autoCapitalize='none'
                    keyboardType='email-address'
                    textContentType='emailAddress'
                    autoFocus={true}
                    caretHidden={false}
                    //Formik
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    value={values.email}
                    />
                </View>

                <View style={[styles.textbox_information,{borderColor: 1 > values.password.length ||values.password.length >= 6 ? color_theme_light.textBoxBorder : color_theme_light.loginTextInvalid}]}>

                    <TextInput             
                    placeholder='Jelszó'
                    autoCapitalize='none'
                    autoCorrect={false}
                    secureTextEntry={passwordVisible}
                    textContentType='password'
                    //Formik
                    onChangeText={handleChange('password')}
                    onBlur={handleBlur('password')}
                    value={values.password}
                    style={{width:(window.width)*0.75}}
                    />

                    {passwordVisible ? 
                    <TouchableOpacity onPress={onClick_setPasswordVisible}>
                        <Entypo name="eye-with-line" size={27} color={color_theme_light.iconColor} />
                    </TouchableOpacity>
                    :
                    <TouchableOpacity onPress={onClick_setPasswordVisible}>
                        <Entypo name="eye" size={27} color={color_theme_light.iconColor} />
                    </TouchableOpacity>
                    }
                </View>


                <View style={[styles.textbox_information,{borderColor:color_theme_light.textBoxBorder}]}>

                <TextInput             
                    placeholder='Jelszó megismétlése'
                    autoCapitalize='none'
                    autoCorrect={false}
                    secureTextEntry={passwordVisible}
                    textContentType='password'
                    //Formik
                    onChangeText={handleChange('password_repeat')}
                    onBlur={handleBlur('password_repeat')}
                    value={values.password_repeat}
                    style={{width:(window.width)*0.75}}
                    />
                    </View>
                    
                    {errors.password_repeat ?
                    <Text style={{color:'red', textAlign:'center', fontFamily:'QuicksandMedium'}}>{errors.password_repeat}</Text>
                    : null }
                <View style={[styles.textBox,{
                    borderColor: 1 > values.fullname.length ||values.fullname.length >= 2 ? color_theme_light.textBoxBorder : color_theme_light.loginTextInvalid
                }]}>
                    <TextInput             
                    placeholder='Név'
                    autoCapitalize='words'
                    autoCorrect={false}
                    textContentType='name'
                    //Formik
                    onChangeText={handleChange('fullname')}
                    onBlur={handleBlur('fullname')}
                    value={values.fullname}
                    />
                </View>

                <View style={{flexDirection:'row', alignItems:'center', justifyContent:'center',paddingTop:10}}>
                  <TouchableOpacity onPress={() => setFieldValue('adatkezeles', !values.adatkezeles)}>
                  {!values.adatkezeles ? <Ionicons name="square-outline" size={27} color={color_theme_light.iconColor} />
                  :
                  <Ionicons name="ios-checkbox" size={27} color={color_theme_light.iconColor} />
                  }
                  </TouchableOpacity>
                  
                  <Text style={[fontStyles.baseText,{fontSize:13}]}>Elolvastam és elfogadom az </Text>
                  <TouchableOpacity onPress={() => setAdatkezelesModal(true)}>
                    <Text style={[fontStyles.baseText, {color:color_theme_light.loginLink, fontSize:13}]}>adatkezelési nyilatkozatot</Text>
                  </TouchableOpacity>
                </View>

                {adatkezelesModal ? <OpenAdatkezeles/> : null}
                
                <View style={{alignItems:'center', justifyContent:'center', marginTop:20}}>
                <TouchableOpacity onPress={handleSubmit}>
                  <View style={[styles.button(isValid),styles.shadow]}>                
                        {!buttonLoading.loading ? 
                                <Text style={fontStyles.loginButtonText}>Regisztráció</Text>
                        : <ButtonLoading/>}      
                  </View>
                </TouchableOpacity>
                </View>


                <View style={styles.signUpContainer}>
                    <Text style={fontStyles.baseText}>Már rendelkezel egy fiókkal?</Text>

                    <TouchableOpacity onPress={()=> navigation.navigate('LoginScreen')}>
                        <Text style={[fontStyles.baseText, {color:color_theme_light.loginLink}]}>  Belépés</Text>
                    </TouchableOpacity>
                </View>

                </>
                )}
            </Formik>
        </View>
      </View>
    )
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to solve it with the following way:

    <KeyboardAvoidingView>
<ScrollView>
{*Rest of the code*}
</ScrollView>
</KeyboardAvoidingView>

    I honestly dont know why, but this moves up my view when I want to type.


  2. 0

    you can either use KeyboardAvoidingView or make a custom keyboard avoiding view yourself.
    also when using KeyboardAvoidingView dont forget to specify the behavior prop.
    here is an example of custom keyboard avoiding view

        import React, { useEffect, useRef } from 'react';
    import { Keyboard, KeyboardEvent, Animated, Platform } from 'react- 
    native';
    import { heightPercentageToDP as hp } from 'react-native-responsive-screen';

function CustomKeyboardAvoidingView(props: any) {
    const heightAnim = useRef(new Animated.Value(hp('100%'))).current
    function onKeyboardDidShow(e: KeyboardEvent) {
        Animated.spring(heightAnim, {
            toValue: hp('100%') - e.endCoordinates.height,
            overshootClamping: true,
            bounciness: 1,
            speed: Platform.OS == 'ios'? 18 : 50,
            useNativeDriver: false,
        }).start()
    }
    function onKeyboardDidHide() {
        Animated.spring(heightAnim, {
            toValue: hp('100%'),
            overshootClamping: true,
            bounciness: 5,
            speed: Platform.OS == 'ios'? 18 : 50,
            useNativeDriver: false,
        }).start()
    }
    useEffect(() => {
        const SHOW_KEYBOARD_EVENT = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'
        const HIDE_KEYBOARD_EVENT = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'
        const showSubscription = Keyboard.addListener(SHOW_KEYBOARD_EVENT, onKeyboardDidShow);
        const hideSubscription = Keyboard.addListener(HIDE_KEYBOARD_EVENT, onKeyboardDidHide);
        return () => {
            showSubscription.remove();
            hideSubscription.remove();
        };
    }, []);
    return (
        <Animated.View style={[{
            height: heightAnim,
        }]} >
            {props.children}
        </Animated.View>
    )
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search