UPDATE:
Trying to use
react-navigation
package in React Native(Expo-Typescript)
the same way as we do with regular React Native (Expo - Vanilla JS)
But it doesn't render anything on the screen.
AppNavigator.tsx
import {createAppContainer, createStackNavigator} from 'react-navigation';
import * as React from 'react';
import {StyleSheet, View, Text} from 'react-native';
const styles = StyleSheet.create({
container: {
backgroundColor: '#f0f',
flex: 1
}
});
const HomeScreen = () => (
<View style={styles.container}>
<View>
<Text>PLEASE PLEASE PLEASE RENDER THIS</Text>
</View>
</View>
);
HomeScreen.navigationOptions = {
title: 'Home'
};
const AppNavigator = createStackNavigator({Home: HomeScreen});
export default createAppContainer(AppNavigator);
App.tsx
import React from 'react';
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import AppContainer from './navigation/AppNavigator'
const styles = {
container: {
flex: 1,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
} as ViewStyle
};
const App = (style:Object): {} => {
const { container } = styles;
return (
<View style={container}>
<AppContainer/>
</View>
);
}
export default App;
INCASE IF NEEDED:
package.json
{
dependencies: {
expo: "^34.0.1",
react: "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-gesture-handler": "^1.3.0",
"react-native-web": "^0.11.4",
"react-navigation": "^3.11.1"
},
devDependencies: {
"@types/react": "^16.8.23",
"@types/react-native": "^0.57.65",
"babel-preset-expo": "^6.0.0",
typescript: "^3.4.5"
}
}
Please let me know what's wrong.