React native navigation back arrow missing on iOS 14

Question

When upgrading to iOS 14 the back arrow disappeared when using stack navigation. I have come to the conclusion that it has something to do with our react-native version. I created a new project using https://reactnative.dev/docs/environment-setup with the following setup:

"@react-native-community/masked-view": "^0.1.10",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.7",
"react-native-screens": "^2.10.1",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2"

With that, the back arrow is showing. However our setup is the following:

"@react-native-community/masked-view": "^0.1.10",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.7",
"react-native-screens": "^2.10.1",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2"

With that setup the back arrow is not showing. My App.js looks like this in both cases:

import 'react-native-gesture-handler';
import React from 'react';
import {Button, View, Text} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  },
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

An obvious solution would be to upgrade the react-native version but we would like to avoid this at the moment because it is quite a time-consuming task. You could also use headerBackImage but I would like to use the "native" way. So I wanted to ask if anyone knows how to fix this if there is some asset that is not linked properly or something.

Answer 1

An alternative if you don't want to upgrade your React Native version is to edit the following file: node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m.

Replace

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
}

with

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
}

Answer 2

There is a very easy way to fix this: simply add the following to package.json:

"postinstall": "npx react-native-fix-image"

See: https://github.com/imhuy/react-native-fix-image