1

After building the standalone iOS native binary using Expo, uploading to Testflight and running it on an iPhone, the status bar looks like there are many elements missing.

What might be the cause of this? How can we fix it? Thanks!

In iPhone Expo Client:

Status bar looks normal.

enter image description here

In TestFlight:

Status bar appears to be empty except for the green battery indicator

enter image description here

/src/Routes/index.js

import React from 'react';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, withStyles } from 'react-native-ui-kitten';


...



class BottomNavigationTabsComponent extends React.Component {
    render() { ... }
}

BottomNavigationTabs = withStyles(BottomNavigationTabsComponent, (theme) => ({
    bottomNavigation: {
        borderTopColor: theme['border-basic-color-2'],
        borderTopWidth: 1
    }
}));

const TabNavigator = createBottomTabNavigator(
    {
        Foo: FooScreen,
        Bar: BarScree,
    }, {
        initialRouteName: 'Foo',
        tabBarComponent: BottomNavigationTabs,
        tabBarOptions: {
            indicatorStyle: {
                height: 0       // remove indicator
            }
        }
    }
)

const AuthStack = createStackNavigator({
    Login: LoginScreen,
    Baz: BazScreen,
}, {
    headerMode: 'none',
})


const RootNavigator = createSwitchNavigator({
    Main: TabNavigator,
    AuthLoading: AuthLoadingScreen,
    Auth: AuthStack,
}, {
    initialRouteName: 'AuthLoading'
})

const AppContainer = createAppContainer(RootNavigator);

export default AppContainer

/src/App.js

import React, { Component } from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout } from 'react-native-ui-kitten';

import ApplicationLoader from './ApplicationLoader'
import AppContainer from './Routes';

export class App extends Component {
    render() {
        return (
        <ApplicationLoader assets={assets}>
            <ApplicationProvider
            mapping={mapping}
            theme={lightTheme}>
            <AppContainer/>
            </ApplicationProvider>
        </ApplicationLoader>
        )
    }
}

export default App

app.json

{
    "expo": {
        "name": "FooBar",
        "slug": "foo-bar",
        "privacy": "public",
        "sdkVersion": "33.0.0",
        "platforms": [
            "ios",
            "android",
            "web"
        ],
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/icon.png",
        "splash": {
            "image": "./assets/splash.png",
            "resizeMode": "contain",
            "backgroundColor": "#000"
        },
        "updates": {
            "fallbackToCacheTimeout": 0
        },
        "assetBundlePatterns": [
            "**/*"
        ],
        "ios": {
            "supportsTablet": true,
            "bundleIdentifier": "com.foo.bar"
        },
        "android": {
            "package": "com.foo.bar"
        }
    }
}
Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
  • Could we see the content of `app.json`? – remeus Jul 28 '19 at 09:07
  • @Remeus Sure, I have updated the question with `app.json` – Nyxynyx Jul 28 '19 at 13:55
  • Are you setting the `StatusBar` yourself in the code? Something like: ` `. Because it looks like the text is written in white for whatever reason. – remeus Jul 28 '19 at 14:26
  • 3
    Maybe try to explictly set it in `App.js`: `import { StatusBar } from 'react-native'; StatusBar.setBarStyle('dark-content', true);` – remeus Jul 28 '19 at 14:29
  • @Remeus Your second solution works! Both Expo client app and Testflight app has a visible status bar content. Did not try your first soution. Thank you! – Nyxynyx Jul 28 '19 at 15:23
  • @Remeus, you're a lifesaver. `StatusBar.setBarStyle('dark-content', true);` worked for me when nothing else would. – Andy Corman Jan 23 '20 at 19:35

0 Answers0