Blank Screen while using react-navigation - react-native

Question

I am beginner is React Native, I have created a sample application and trying to add react-navigation
here is my code in App.js
import React, {Fragment} from 'react';
import {
StyleSheet,
View,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Container from './ScreenContainer';
const App = () => {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#819ca9" barStyle="light-content" hidden={true}></StatusBar>
</View>
);
};
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
backgroundColor:'#819ca9',
flex: 1,
// alignItems:"center"
},
});
export default App;
And this is my ScreenContainer.js
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import login from './pages/login'; //import Login from './pages/login';
const NavigationStack = createStackNavigator({
SignUp: login
});
const Container = createAppContainer(NavigationStack);
export default Container;
When I use this js in my App.js everything goes blank, after research a lot I found if I comment alignItems:"center" then my screen comes bt everything get distorted, search a lot on internet couldn't found the proper solution
Here is my package.json
{
"name": "MobileAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-router-flux": "^4.0.6",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "^6.0.1",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Can anyone help me how to make this working without disturbing my UI.
Thanks a lot

Answer 1

I see that you’ve imported Container in your App.js but I can’t see it being used anywhere.