ReactNative - invariant violation: requireNativeComponent: "RNCSafeareview" was not found in the UI Manager - reactjs

Question

I have created a react native package with expo-bare-workflow. I have also added the packages like,
npm install --save react-navigation
npm install --save react-native-gesture-handler
npm install --save react-navigation-stack
npm install --save #react-native-community/masked-view
npm install --save react-native-safe-area-view
npm install --save react-native-safe-area-context
npm install --save react-native-gesture-handler
npm install --save react-native-reanimated
Following is my App.js file.
import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";
class SignInScreen extends React.Component {
static navigationOptions = {
title: 'Please sign in',
};
render() {
return (
<View style={styles.container}>
<Button title="Sign in!" onPress={this._signInAsync} />
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate({
routeName: 'Home',
key: 'Home',
params: { userInfo: 'lol' },
});
};
}
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome to the app!',
};
componentDidMount() {
// alert(JSON.stringify(this.props.navigation.state.params))
}
render() {
return (
<View style={styles.container}>
<Text>{JSON.stringify(this.props.navigation.state.params)}</Text>
<Button title="Show me more of the app" onPress={this._showMoreApp} />
<Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
</View>
);
}
_showMoreApp = () => {
this.props.navigation.navigate('Other');
};
_signOutAsync = async () => {
await AsyncStorage.clear();
this.props.navigation.navigate('Auth');
};
}
class OtherScreen extends React.Component {
static navigationOptions = {
title: 'Lots of features here',
};
render() {
return (
<View style={styles.container}>
<Button title="I'm done, sign me out" onPress={this._signOutAsync} />
<StatusBar barStyle="default" />
</View>
);
}
_signOutAsync = async () => {
await AsyncStorage.clear();
this.props.navigation.navigate('Auth');
};
}
class AuthLoadingScreen extends React.Component {
constructor() {
super();
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
if (userToken) {
this.props.navigation.navigate({
routeName: 'Home',
key: 'Home',
params: { userInfo: 'hello world' },
});
} else {
this.props.navigation.navigate('SignIn');
}
};
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
const AppStack = createStackNavigator(
{ Home: HomeScreen, Other: OtherScreen },
{ initialRouteKey: 'Home', initialRouteName: 'Home' }
);
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
},
),
);
But i am getting an error as shown in screenshot.
Please suggest a solution.
Also, i want to know how to decide which packages will work with reactnative-cli, expo-managed-cli, expo bare-cli ?
Thanks.