backButtonImage is not working on iPhone 11 Pro max & iPhone XS

[jong-hui]

Hello, Thanks for the good library.

backButtonImage works great. On iPhone 8, iPhone x.
However, on iPhone Xs and iPhone 11 (Pro, max), sometimes, problems occur.

"dependencies": {
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^5.9.2",
    "@react-native-community/viewpager": "^4.0.0",
    "@react-navigation/native": "^5.3.2",
    "@react-navigation/stack": "^5.3.2",
    "@types/lodash.debounce": "^4.0.6",
    "@types/react-native-share": "^3.3.0",
    "axios": "^0.19.2",
    "axios-retry": "^3.1.8",
    "date-fns": "^2.14.0",
    "lodash.debounce": "^4.0.8",
    "lottie-react-native": "^3.4.0",
    "mobx": "^5.15.4",
    "mobx-persist": "^0.4.1",
    "mobx-react": "^6.2.2",
    "react": "^16.9.0",
    "react-hook-form": "^5.7.2",
    "react-native": "0.62.2",
    "react-native-animatable": "^1.3.3",
    "react-native-code-push": "^6.2.1",
    "react-native-fast-image": "^8.1.5",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-get-random-values": "^1.4.0",
    "react-native-haptic-feedback": "^1.10.0",
    "react-native-in-app-message": "^1.0.31",
    "react-native-keychain": "^6.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-parallax-scroll-view": "^0.21.3",
    "react-native-push-notification": "^3.5.2",
    "react-native-reanimated": "^1.8.0",
    "react-native-router-flux": "^4.2.0",
    "react-native-safe-area-context": "^1.0.0",
    "react-native-screens": "^2.9.0",
    "react-native-shadow": "^1.2.2",
    "react-native-share": "^3.5.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-static-safe-area-insets": "^2.1.0",
    "react-native-svg": "^12.1.0",
    "react-native-swiper": "^1.6.0",
    "react-native-typography": "^1.4.1",
    "react-native-view-overflow": "^0.0.5",
    "react-native-webview": "^10.2.3",
    "react-navigation-collapsible": "^5.6.0",
    "react-string-replace": "^0.4.4",
    "react-uuid": "^1.0.2",
    "reanimated-bottom-sheet": "^1.0.0-alpha.20",
    "rn-placeholder": "^3.0.0",
    "styled-components": "^5.1.0",
    "uuid": "^8.1.0",
    "validatorjs": "^3.18.1"
  },

[jong-hui]

Well, I think this is not a device problem, but an OS version issue.

ios 11 is working well,
ios 13.5 is not working.

[beqramo]

Hello,

as a workaround use your own button component as shown there: https://reactnavigation.org/docs/header-buttons/

[WoLewicki]

Can you provide a repo/snack with minimal configuration needed to reproduce the issue?

[jong-hui]

I found the part where the problem occurred.

I think it was a problem from moving from Screen(headerShown: false) to Screen(headerShown: true).
I tried add prop(backButtonImage) at first screen, but problem is not go away.

Thanks for reading it

reproduce code

type ParamList = {
  default: undefined;
}

type TestParamList = {
  first: undefined;
  second: undefined;
  third: undefined;
}

const NavigatorOptions = (props: any): any => {
  return {
    backButtonImage: require('assets/imgs/icons/titleIconBack.png'),
    headerBackTitleVisible: false,
    headerTintColor: '#333',
    headerHideShadow: true,
    stackPresentation: 'push',
    stackAnimation: Platform.OS == 'ios' ? 'default' : 'fade',
    contentStyle: {
      borderTopColor: '#f5f5f5',
      borderTopWidth: 1,
    },
  };
};


const Stack = createNativeStackNavigator<ParamList>();
const TestStack = createNativeStackNavigator<TestParamList>();

const First = () => {
  const navigation = useNavigation()

  const handleGoToSecond = () => {
    navigation.navigate('second')
  }

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={handleGoToSecond}>
        <Text>Go to second</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const Second = () => {
  const navigation = useNavigation()

  const handleGoToThird = () => {
    navigation.navigate('third')
  }

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={handleGoToThird}>
        <Text>Go to Third</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const Third = () => {
  const navigation = useNavigation()

  const handleGoToSecond = () => {
    navigation.navigate('second')
  }

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={handleGoToSecond}>
        <Text>Go to second</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}
const TestNavigator = () => {
  return (
    <TestStack.Navigator
      initialRouteName="first"
      screenOptions={NavigatorOptions}
    >
      <TestStack.Screen
        name="first"
        component={First}
        options={{
          headerShown: false,
        }}
      />
      <TestStack.Screen
        name="second"
        component={Second}
      />
      <TestStack.Screen
        name="third"
        component={Third}
      />
    </TestStack.Navigator>
  )
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen
          name="default"
          component={TestNavigator}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

[jong-hui]

Hello,

as a workaround use your own button component as shown there: https://reactnavigation.org/docs/header-buttons/

@beqramo Thanks, but I wish my back button follow ios native (e.g hitSlob)

[WoLewicki]

Can you check if #552 resolves your issue?

[jong-hui]

Thanks @WoLewicki. Its work for me.
but, back button flickering when every push.(can see when you use go back swipe gesture)
and, Sometimes problem seems on the transitioning

[WoLewicki]

Can you check with the change I made?

[jong-hui]

It's perfectly working for me. I need it. Thanks.
I don't know why this code working, but can you merge #552 pull request? Or should I specify software-mansion/react-native-screens/@wolewicki/fix-custom-back-image in pakage.json?

[WoLewicki]

You can use patch-package until this change is released.

[jong-hui]

Ok, thanks. 👍👍