When I build a stand alone android app the header left back button disappears, yet it's there if you click on it. It has no issue on the emulator. What could cause this?

I'm not sure when it started because I was relying on the emulator, but I do know that it was working at some point

Here is my app.json

{
  "name": "appname",
  "displayName": "appname",
  "expo": {
    "name": "appname",
    "version": "1.0.0",
    "slug": "appslug",
    "orientation": "portrait",
    "privacy": "unlisted",
    "sdkVersion": "32.0.0",
    "description": "",
    "platforms": [
      "ios",
      "android"
    ],
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "enabled": true,
      "fallbackToCacheTimeout": 30000,
      "checkAutomatically": "ON_LOAD"
    },
    "ios": {
      "buildNumber": "1.0.0",
      "icon": "./assets/images/icon.png",
      "bundleIdentifier": "my.unique.id"
      //      "splash": {
      //        "backgroundColor": "#FFFFFF",
      //        "resizeMode": "cover",
      //        "image": "./assets/iphone/[email protected]"
      //      }
    },
    "android": {
      "versionCode": 1,
      "icon": "./assets/images/icon.png",
      "package": "my.unique.id",
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon.png",
        "backgroundColor": "#FFFFFF"
      }
      //      "splash": {
      //        "backgroundColor": "#FFFFFF",
      //        "resizeMode": "cover",
      //        "mdpi": "./assets/android/res/drawable-mdpi/background.9.png",   // natural sized image (baseline),
      //        "hdpi": "./assets/android/res/drawable-hdpi/background.9.png",   // scale 1.5x
      //        "xhdpi": "./assets/android/res/drawable-xhdpi/background.9.png",  // scale 2x
      //        "xxhdpi": "./assets/android/res/drawable-xxhdpi/background.9.png", // scale 3x
      //        "xxxhdpi": "./assets/android/res/drawable-xxxhdpi/background.9.png" // scale 4x
      //      }
    },
    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "my.org",
            "project": "proj",
            "authToken": "************"
          }
        }
      ]
    },
    "primaryColor": "#fefefe"
  }
}

And here is my App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';
import { Ionicons } from '@expo/vector-icons';
import Sentry  from 'sentry-expo';

// Remove this once Sentry is correctly setup.
Sentry.enableInExpoDevelopment = true;

Sentry.config('https://sentry').install();


export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  async componentDidMount() {
    await Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      }),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

/navigation/MainTabNavigator.js

import React from 'react';
import {Platform} from 'react-native';
import {createBottomTabNavigator, createStackNavigator} from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import NotificationScreen from '../screens/NotificationScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ProfileScreen from "../screens/ProfileScreen";
import DraftScreen from "../screens/DraftScreen";
import StatsScreen from "../screens/StatsScreen";
import Colors from "../constants/Colors";
import ViewStoryScreen from "../screens/ViewStoryScreen";
import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import MyStoriesScreen from "../screens/MyStories";
import EditStoryScreen from "../screens/EditStoryScreen";
import AddStoryScreen from "../screens/AddStoryScreen";

const headerStyle = {
  /* The header config from HomeScreen is now here */
  /*
   For full list of options
   https://reactnavigation.org/docs/en/stack-navigator.html#navigationoptions-for-screens-inside-of-the-navigator
    */
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: Colors.headerBackgroundColor,
    },
    headerTintColor: Colors.headerTintColor,
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerBackTitleStyle: {color: Colors.headerTintColor},
    headerBackStyle: {color: Colors.headerTintColor},
    headerBackAllowFontScaling: true,

  },
};

const HomeStack = createStackNavigator({
      Home: HomeScreen,
      ViewStoryScreen: ViewStoryScreen,
      EditStory: EditStoryScreen,
      AddStory: AddStoryScreen,
    },
    {
      /* The header config from HomeScreen is now here */
      defaultNavigationOptions: headerStyle.defaultNavigationOptions
    }
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({focused}) => (
      <TabBarIcon
          focused={focused}
          name={
            Platform.OS === 'ios'
                ? `ios-home`
                : 'md-home'
          }
      />
  ),
};

const NotificationStack = createStackNavigator({
      Links: NotificationScreen,
      ViewStoryScreen: ViewStoryScreen,
    },
    {
      /* The header config from HomeScreen is now here */
      defaultNavigationOptions: headerStyle.defaultNavigationOptions
    });

NotificationStack.navigationOptions = {
  tabBarLabel: 'Notifications',
  tabBarIcon: ({focused}) => (
      <TabBarIcon
          focused={focused}
          name={Platform.OS === 'ios' ? 'ios-notifications' : 'md-notifications'}
      />
  ),
};

const SettingsStack = createStackNavigator({
      Settings: SettingsScreen,
      Profile: ProfileScreen,
      Drafts: DraftScreen,
      Stats: StatsScreen,
      Login: LoginScreen,
      Register: RegisterScreen,
      MyStories: MyStoriesScreen,
      ViewStoryScreen: ViewStoryScreen,
      EditStory: EditStoryScreen,
      AddStory: AddStoryScreen,
    },
    {
      /* The header config from HomeScreen is now here */
      defaultNavigationOptions: headerStyle.defaultNavigationOptions
    }
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({focused}) => (
      <TabBarIcon
          focused={focused}
          name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
      />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  NotificationStack,
  SettingsStack,
});

Solution As @Masuk Helal Anik mentioned this is a bug Here is what worked for me, but had to sacrifice header back title. In every screen add this

static navigationOptions = ({navigation}) => {
    return {

      headerLeft: (
          <Ionicons
              name={Platform.OS === "ios" ? "ios-arrow-back" : "md-arrow-back"}

              size={Platform.OS === "ios" ? 35 : 24}
              color={Colors.headerTintColor}
              style={
                Platform.OS === "ios"
                    ? { marginBottom: -4, width: 25, marginLeft: 9 }
                    : { marginBottom: -4, width: 25, marginLeft: 20 }
              }
              onPress={() => {
                navigation.goBack();
              }}
          />
      ),
      title: 'Screen Title'
    }
  };

1 Answers

1
Masuk Helal Anik On Best Solutions

It seems to me like a bug. As a solution in this issue is stated

if you use expo you should include the assets from react-navigation in your assetBundlePatterns so the images are bundled with your app when you build a standalone app. the easiest way to do this is to just bundle all assets that your app uses: https://github.com/expo/new-project-template/blob/6d4c5636de573852dfd2f7715cfa152fd9c84f89/app.json#L20-L22. to fix it in development mode within expo, you can cache the assets locally as per this guide. we do this in the navigationplayground example app, so you can copy that code from here.

There is some workaround also. Try out them to find which one working for you!