React Navigation V2 does not display bar, React Native - reactjs

Question

I recently started to learn React-Native and I was trying to implement React-Navigation V2 in one of my project but it does not seem to work. The project also uses Redux and other dependencies along with the core installed by Expo.
This is the code for my Router component that manages the Navigation:
import { createStackNavigator } from 'react-navigation';
import Movie from './Movie';
import Home from './Home';
const RoutRouter = createStackNavigator({
Movie : {
screen : Movie
},
Home : {
screen : Home
}
}, {
initialRouteName : 'Home'
});
export default RoutRouter;
Home Component
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
class Home extends Component {
render() {
console.log('Home screen');
return (
<View>
<Text>HOME</Text>
</View>
);
}
}
export default Home;
Movie Component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Button } from 'react-native';
import { apiRequest } from '../actions';
import { MOVIE } from '../constants';
class Movie extends Component {
//api request to retrieve data
getData = () => {
console.log('Button works!');
}
render() {
console.log('Movie screen');
return (
<View>
<Text>MOVIE</Text>
<Button title = 'Get Movie' onPress = {()=> {this.getData()}} />
</View>
);
}
}
const mapStateToProps = (state) => {
return{
state : state
}
}
export default connect(mapStateToProps, {apiRequest})(Movie);
Main Component
import React from 'react';
import { Provider } from 'react-redux';
import { StyleSheet, Text, View, Button, SafeAreaView } from 'react-native';
import store from './src/store';
import RootRouter from './src/routes/Router';
import { Constants } from 'expo';
console.ignoredYellowBox = ['Remote debugger'];
export default class App extends React.Component {
render() {
console.log('stae');
return (
<Provider store = { store }>
<SafeAreaView>
<View style={styles.container}>
<RootRouter />
</View>
</SafeAreaView>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: Constants.statusBarHeight,
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
and this is my package.json
{
"name": "m",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.11.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
}
At first I thought I was getting error but then when I logged the screen out I noticed that on the debugger the screen message is shown but the screen is blank.
Any idea what am I missing?