React native KeyboardAvoidingView not moving correctly

Question

I have a TextInput that when pressed gets covered by the keyboard. So I wrapped it in a KeyboardAvoidingView . But regardless of the behavior that I set for this view, the TextInput won't move above the keyboard. Using position as the behavior moves the TextInput but only half way above the keyboard, while the other two don't seem to work at all.

I also tried wrapping my entire component with a KeyboardAvoidingView , but doing so breaks the entire layout.

Can anyone help me? I never managed to get KeyboardAvoidingView to work for me and now I really need it. Thanks in advance!

Here is my component. Also worth mentioning is that this component is top level(well, almost top level since it's wrapped in a Router)

const { height, width } = Dimensions.get('screen')

const style = StyleSheet.create({
    main: {
        height,
        width,
        flexDirection: 'column',
    },
    iconSelecter: {
        width,
        height: 196,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.primary,
        marginTop: 32
    },
    icon: {
        height: 164,
        width: 164,
    },
    saveButton: {
        width: 96,
        height: 96,
        borderRadius: 100,
        backgroundColor: Colors.secondary,
        alignItems: "center",
        justifyContent: "center",
        alignSelf: 'center',
        position: 'absolute',
        bottom: 96 + 32
    },
    saveIcon: {
        height: 54,
        width: 54,
    },
    textInputWrapper: {
        borderBottomColor: Colors.textInputBorder,
        width: 288,
        borderBottomWidth: 1,
        alignSelf: 'center',
        marginTop: 96,
        height: 48,
    },
    textInput: {
        fontWeight: "300",
        fontSize: 14,
        margin: 0
    },
    hintWrapper: {
        alignSelf: 'center',
        marginTop: 4
    },
    hint: {
        fontSize: 12,
        fontFamily: "Roboto-Thin",
        fontStyle: 'normal',
    }
})


    const CreateActivity = ({ goBack }: NavigationProps) => {

    //////////////////////////////
    //State and logic 
    ///////////////


        return (
            // TODO: Add touchable opacity to dismiss keyboard

            <View style={style.main}>
                <Appbar title="New activity" canGoBack goBack={goBack} />
                <View style={{ flex: 1 }}>
                    <View style={style.iconSelecter}>
                        <GestureRecognizer onSwipeLeft={nextIcon} onSwipeRight={lastIcon}>
                            <Image style={style.icon} source={icons[currentIconIndex]?.file}></Image>
                        </GestureRecognizer>
                    </View>
                    <View style={style.hintWrapper}>
                        <Text style={style.hint}>Swipe to cycle through the icons</Text>
                    </View>

                    <KeyboardAvoidingView>
                        <View style={style.textInputWrapper}>
                            <TextInput style={style.textInput} placeholder={"Give this activity a name"} value={name} onChangeText={setName}></TextInput>
                        </View>
                    </KeyboardAvoidingView>
                    <TouchableNativeFeedback onPress={createActivity} background={TouchableNativeFeedback.Ripple("#fff", true)}>
                        <View style={style.saveButton}>
                            <Image style={style.saveIcon} source={require("../../assets/icons/light/save.png")}></Image>
                        </View>
                    </TouchableNativeFeedback>
                </View>
            </View>

        )
    }


    export default CreateActivity;

Answer 1

I suggest that you to try wrap all the content of the screen in <KeyboardAvoidingView /> (or make it one of the outermost elements), otherwise it only will slide up its children (the View and the TextInput) leaving the rest of the content in its original position, making the layout look overlaped and weird. If you do that, the value "position" should work fine.

Something like this:

<View style={style.main}>
    <Appbar title="New activity" canGoBack goBack={goBack} />
    <KeyboardAvoidingView behavior="position" >
      <View style={{ flex: 1 }}> // --> Remove flex: 1 if you experience some issue with the positioning
          <View style={style.iconSelecter}>
              <GestureRecognizer onSwipeLeft={nextIcon} onSwipeRight={lastIcon}>
                  <Image style={style.icon} source={icons[currentIconIndex]?.file}></Image>
              </GestureRecognizer>
          </View>
          <View style={style.hintWrapper}>
              <Text style={style.hint}>Swipe to cycle through the icons</Text>
          </View>

          <KeyboardAvoidingView>
              <View style={style.textInputWrapper}>
                  <TextInput style={style.textInput} placeholder={"Give this activity a name"} value={name} onChangeText={setName}></TextInput>
              </View>
          </KeyboardAvoidingView>
          <TouchableNativeFeedback onPress={createActivity} background={TouchableNativeFeedback.Ripple("#fff", true)}>
              <View style={style.saveButton}>
                  <Image style={style.saveIcon} source={require("../../assets/icons/light/save.png")}></Image>
              </View>
          </TouchableNativeFeedback>
      </View>
    </KeyboardAvoidingView>
</View>

Also see the comment in the code above. Check if you really need to use of flex: 1 in all the outer wrapper elements, and take a look to the height you are setting in the style.main based on dimentions. I don't think that it is necesary and I think it could lead to some measure issues if you fix the height of the parent container.

EDIT:

I was just digging in react-native docs and I realize that there is a zIndex that you could use to avoid ablsolute positioning. It is a relative style prop so it needs to be set between sibling views, like this:

export default class MyComponent extends React.Component {
  render() {
    return (
      <View>
        <View style={[styles.appbarShape, styles.appbarZIndex]} ><Text>Header</Text></View>
        <KeyboardAvoidingView behavior="position" style={styles.contentZIndex}>
          {other children}
          <TextInput placeholder="enter text"/>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  appbarShape: {
    height: 80,
    width: Dimensions.get('window').width,
    justifyContent: 'center',
    alignSelf: "stretch",
    backgroundColor: "#FFF"
  },
  appbarZIndex: {
    zIndex: 3,
  },
  contentZIndex: {
    zIndex: 0
  }
});

Since the view that represents the appbar has a greater zIndex it shows up over the ones with a lower zIndex Check this out working in this snack https://snack.expo.io/5VXAcw4Y0

Docs: https://reactnative.dev/docs/layout-props

Hope it helps!

Answer 2

Use react-native-keyboard-aware-scroll-view

<KeyboardAwareScrollView extraHeight={135} enabledOnAndroid={true} 
extraScrollHeight={70} style={styles.mainContainer}
automaticallyAdjustContentInsets={true}
enableOnAndroid={true}
keyboardShouldPersistTaps='handled'
scrollEnabled={true} >

//your form 

</KeyboardAwareScrollView>



 const styles = StyleSheet.create({
    mainContainer: { flex: 1, marginHorizontal: 15, marginVertical: 15 },
});