Problem with KeyboardAvoidingView on Android

#1

Hi, first of all, thank your for the amazing framework, Expo is really amazing.

Well, I’m facing a problem on Android with the app I’m currently building. On the screens that I have forms, the KeyboardAvoidingView does not work. The only way to fix the issue is by providing ‘androidStatusBar’ on my app.json, but that breaks the layout of the app because it adds blank space in every screen (even if I don’t use React Native’s StatusBar).
I’m did some research and found the following issue https://github.com/expo/expo/issues/1065

But its an old issue for a very important problem, I don’t know if there is any workaround for that.

I really don’t wanna detach because of this issue.

Any help is appreciated. I will put my app.json and package.json here:

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node_modules/.bin/jest"
  },
  "jest": {
    "preset": "jest-expo",
    "testMatch": [
      "**/?(*.)test.js?(x)"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/setup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-navigation|expo)/"
    ],
    "collectCoverageFrom": [
      "src/**/*.js",
      "!src/icons/*",
      "!src/navigation/*",
      "!src/screens/Container.js"
    ]
  },
  "dependencies": {
    "axios": "^0.18.0",
    "date-fns": "^1.29.0",
    "expo": "^31.0.4",
    "prop-types": "^15.6.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-expo-image-cache": "^3.2.0",
    "react-native-iphone-x-helper": "^1.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.7.4",
    "react-native-masked-text": "^1.9.2",
    "react-native-modal": "^6.5.0",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-modal-dropdown": "^0.6.2",
    "react-native-open-maps": "^0.3.1",
    "react-native-picker-select": "^5.0.0",
    "react-native-render-html": "^3.10.0",
    "react-native-responsive-screen": "^1.1.7",
    "react-native-root-toast": "^3.0.1",
    "react-native-status-bar-height": "^2.1.0",
    "react-navigation": "^2.18.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.0",
    "sentry-expo": "^1.9.0",
    "yaqrcode": "^0.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-eslint": "^8.2.6",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^21.21.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "jest-expo": "^31.0.0",
    "prettier": "^1.14.2",
    "prettier-eslint": "^8.8.2",
    "react-dom": "16.3.1",
    "redux-mock-store": "^1.5.3"
  }
}
{
  "expo": {
    "name": "BaladAPP",
    "description": "This project is really great.",
    "slug": "app-reactnative",
    "privacy": "public",
    "sdkVersion": "31.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "2.0.0",
    "orientation": "portrait",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "buildNumber": "4",
      "supportsTablet": false,
      "bundleIdentifier": "my bundler",
      "icon": "./assets/icone-ios.png",
      "config": {
        "googleMapsApiKey": "mykey"
      },
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "Utilizamos sua localização para lhe mostrar os eventos mais próximos"
      }
    },
    "android": {
      "versionCode": 1,
      "icon": "./assets/icone-android.png",
      "package": "my package",
      "config": {
        "googleMaps": {
          "apiKey": "mykey"
        }
      },
      "permissions": [
        "CAMERA",
        "READ_EXTERNAL_STORAGE",
        "WRITE_EXTERNAL_STORAGE",
        "ACCESS_FINE_LOCATION"
      ]
    },
    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "sentry",
            "project": "my project",
            "authToken": "mykey",
            "url": "my address"
          }
        }
      ]
    }
  }
}
#2

Nothing?

closed #3

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

#4

hi there!

due to the lack of a good status bar api in react-native at the moment we had to assume in react-navigation that if you are using expo then you are using the default config of having a transparent status bar and thus we add some padding for it.

if you change to opaque, you’ll need to add this somewhere in your app:

import { Platform } from 'react-native';
import { SafeAreaView } from 'react-navigation';
if (Platform.OS === 'android') {
  SafeAreaView.setStatusBarHeight(0);
}

hopefully we can handle this automatically when this feature lands: https://github.com/facebook/react-native/pull/20999

edit: sorry nobody got back to you on this, not sure what happened there. better late than never probably isn’t actually true in this case but hopefully at least this answer can serve as a reference for other folks who encounter the same issue in the future