React-native-navigation: App no longer works after installing react-native-navigation

[Nisthar]

I followed the installation instructions correctly. I checked twice.

I am getting a blank screen after installing react-native-navigation.

I entered some invalid characters to check. But react-native doesn't give any errors. Its still building successfully.

my index.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Navigation} from 'react-native-navigation';
import {registerScreens, registerScreenVisibilityListener} from './screens';

registerScreens();
registerScreenVisibilityListener();

const tabs = [
  {
    label: "Others Eating",
    screen: "example.Main",
    icon: require("./assets/food1.svg"),
    title: "Others Eating"
  },
  {
    label: "Top Eaters",
    screen: "example.TopEaters",
    icon: require("./assets/food1.svg"),
    title: "Top Eaters"
  }
];

sdgfdsgdsfg //this error is not showing on build. Its building successfully.

// this will start our app
Navigation.startTabBasedApp({
  tabs,
  animationType: Platform.OS === "ios" ? "slide-down" : "fade",
  tabsStyle: {
    tabBarBackgroundColor: "#003a66",
    tabBarButtonColor: "#ffffff",
    tabBarSelectedButtonColor: "#ff505c",
    tabFontFamily: "BioRhyme-Bold"
  },
  appStyle: {
    tabBarBackgroundColor: "#003a66",
    navBarButtonColor: "#ffffff",
    tabBarButtonColor: "#ffffff",
    navBarTextColor: "#ffffff",
    tabBarSelectedButtonColor: "#ff505c",
    navigationBarColor: "#003a66",
    navBarBackgroundColor: "#003a66",
    statusBarColor: "#002b4c",
    tabFontFamily: "BioRhyme-Bold"
  }
});

./screens/index.js

import { Navigation, ScreenVisibilityListener } from "react-native-navigation";
import Main from "./Main";
import TopEaters from "./TopEaters";

export function registerScreens() {
  Navigation.registerScreen("example.Main", () => Main);
  Navigation.registerScreen("example.TopEaters", () => TopEaters);
}

./screens/Main.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default class Main extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Main</Text>
      </View>
    );
  }
}

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

./screens/TopEaters.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default class TopEaters extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Top Eaters</Text>
      </View>
    );
  }
}

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

[FILL THIS OUT - It will be extremely helpful]

---

Environment

• React Native Navigation version: ^1.1.378
• React Native version: 0.53.0
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device

[Nisthar]

The example code is working without any error. So, its not an error in the installation.

I still can't understand why its giving me a blank screen if there is error in the code.

[mkuczera]

Have you tried to reset your packager instance? If the error is not thrown then it seems like he´s getting a old version of your js files

[perrosnk]

@Nisthar Are you experiencing a white screen in Android or iOS?

[pipinov]

Try to downgrade react-native to 0.51.0

[TheDutchCoder]

I have the same issue.

Followed all the instructions but I now have an app that's stuck on the React Native white screen (I'm not even using this package yet):

Seems to time out on something?

[jpacol]

Same issue here

But see what I found

Any idea?

[Nisthar]

@jpacol Its hard to find the real issue here. In my case it was bad configuration in my js code. Try running the example from this repo and see if it works.

[radacx]

I have the same issue, redux-example app worked though. What was the bad configuration? I have installed basic react-native app with init command and then went through this guide https://wix.github.io/react-native-navigation/#/usage

[guyca]

Hey guys, I'm closing as this is not a bug. As @Nisthar poinsted out, usually white screens are caused by some error in Js side.

[devjaw]

downgrade to react 51 and it should works fine

[Noitidart]

I am in 0.54.2 - android - was anyone able to get this to work? It loaded once for me after i kept doing a react-native start --reset-cache react-native run-android. when it loaded that one time i enabled remote debugging and live reload. I see console logging just fine.

[Noitidart]

I got it working. I am on Android, the blank screen issue for me was this - https://github.com/wix/react-native-navigation/issues/2180

[utb2017]

my app was working great
i installed
npm install @react-navigation/core@next @react-navigation/native@next

This broke the app, and i tried to uninstall, broke the app more.
re-installed react-native

now my app cuts off after load screen

i assume i have to start over now

[chrycon]

@utb2017 Make sure you are following the steps correctly. https://reactnavigation.org/docs/getting-started/. React Native documentaion didn't mention the need to change the build.gradle file, and I had ignored the "import 'react-native-gesture-handler';" part. One of the two was the cause for white screen crashing.