React native navigation back arrow missing on iOS 14

user_1206388 0
Viewed 1853

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.

react-navigation react-native ios
3 Answers

This is probably related to the image not showing issue, which was fixed in React Native version 0.63.2.

You could try upgrading to the latest version or patch your project using the changes made in the related pull request.

Edit: Had the same issue and just tested it in my project by upgrading from RN 0.63.0 to 0.63.3 and it is now fixed.

user_46918620

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];
  }
}
user_12063880
user_2713510
Related