0

I am using expo. When I open the keyboard on Android, it pushes the view to the top. I would like to disable this behaviour. Here React-native: How to control what keyboard pushes up it is recommended to use "softwareKeyboardLayoutMode": "pan" for expo. I have inserted it into my app.json, tried restarting expo / intellij / pc. The keyboard still pushes the view to the top. However, the entry seems to be recognized, since if I use KeyboardAwaScrollView with enableOnAndroid={true}, it works nicely ( the keyboard still pushes the view though ). Without "softwareKeyboardLayoutMode": "pan" it works very weird.

But KeyboardAwareScrollView is not the main topic here, I used it for testing of app.json entry. If I use simple View, the problem is still there. So how to do I disable keyboard pushing the View up?

Some screenshots.
Simple View. Not ScrollView / KeyboardAwareScrollView and with "softwareKeyboardLayoutMode": "pan" :

12

My app.json looks like this:

{
  "expo": {
    "name": "smartphone-app",
    "slug": "smartphone-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "softwareKeyboardLayoutMode": "pan"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-localization"
    ]
  }
}

My screen layout looks as following:

return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <StatusBar style="auto" />
        <ImageBackground
          source={require("../assets/login_background.jpg")}
          resizeMode="cover"
          style={styles.backgroundImage}
        />
        <Animatable.View
          animation="fadeInUpBig"
          style={styles.body}
        >

          <View style={styles.body_main}>
            <LoginForm />
          </View>
        </Animatable.View>
      </View>
    </TouchableWithoutFeedback>
  );

And the styles used for that screen:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
  },
  body: {
    height: "100%",
    maxHeight: 680,
  },
  body_main: {
    flex: 1,
    backgroundColor: "#fff",
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingHorizontal: 20,
    paddingVertical: 30,
  },
});
MinisX
  • 107
  • 1
  • 9
  • It seems that something like "softwareKeyboardLayoutMode":"adjustNothing" as with android:windowSoftInputMode="adjustNothing" would do the job, but expo does not have adjustNothing – MinisX Jun 14 '23 at 07:12

0 Answers0