Screens appear sometimes moved to the right on iOS

user_9265054 0
Viewed 198

Sometimes when i navigate to a screen, the screen appear moved to the right. This only happen on iOS. I've tried removing the KeyboardAviodingView, SaveAreaView ( using the SafeAreaView provided by react navigation too), Views that wrap the entire App to check if any of those was causing the problem, but with no luck.

example

package.json dependencies:

{
    "@unimodules/core": "~5.0.0",
    "axios": "^0.19.0",
    "expo": "^36.0.0",
    "expo-application": "^2.0.0",
    "expo-constants": "^8.0.0",
    "expo-font": "~8.0.0",
    "expo-linear-gradient": "~8.0.0",
    "expo-localization": "~8.0.0",
    "expo-secure-store": "~8.0.0",
    "expo-server-sdk": "^3.3.0",
    "formik": "^2.1.4",
    "i18n-js": "^3.3.0",
    "i18next": "^19.3.2",
    "immutable": "^4.0.0-rc.12",
    "lottie-react-native": "~2.6.1",
    "moment": "^2.24.0",
    "nyc": "^14.1.1",
    "react": "^16.12.0",
    "react-dom": "16.9.0",
    "react-hook-form": "^3.26.4",
    "react-i18next": "^11.3.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-appearance": "~0.3.1",
    "react-native-calendars": "^1.264.0",
    "react-native-elements": "^1.2.7",
    "react-native-formik": "^1.7.7",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-modal": "^11.5.1",
    "react-native-modal-datetime-picker": "^8.1.1",
    "react-native-paper": "^3.5.1",
    "react-native-parallax-scroll-view": "^0.21.3",
    "react-native-platform-touchable": "^1.1.1",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-shared-element": "~0.5.1",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-svg": "9.13.3",
    "react-native-svg-uri": "^1.2.3",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7",
    "react-native-workers": "^0.3.1",
    "react-navigation": "4.1.1",
    "react-navigation-animated-switch": "^0.3.2",
    "react-navigation-collapsible": "^3.0.3",
    "react-navigation-drawer": "^2.2.2",
    "react-navigation-fluid-transitions": "^0.3.2",
    "react-navigation-header-buttons": "^3.0.3",
    "react-navigation-material-bottom-tabs": "2.1.2",
    "react-navigation-shared-element": "^0.5.0",
    "react-navigation-stack": "1.9.3",
    "react-navigation-tabs": "^2.5.6",
    "react-redux": "^7.1.1",
    "recompose": "^0.30.0",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "remove": "^0.1.5",
    "sentry-expo": "^2.0.1",
    "yup": "^0.27.0"
}

EDIT: The error only happens when i show the keyboard in the screen B and then go back to the screen A

react-native-paper react-navigation expo react-native reactjs
2 Answers

The problem occurs when:

1) I navigate to a screen -> this.props.navigation.navigate ('');

2) I put the application in the foreground;

3) go back -> navigation.goBack ();

4) I find the screen moved to the right.

user_130610540

Upgrading react-navigation-stack to 2.3.11 fixed the problem

user_92650540
Related