Sure, it’s quite straightforward:
App.js
import React from 'react';
import { Platform, StatusBar, StyleSheet, View, Text, AsyncStorage } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import { StyleProvider, Root } from 'native-base';
import getTheme from './native-base-theme/components'
import AppNavigator from './navigation/AppNavigator';
import styles from './constants/Styles'
import { Provider, connect } from 'react-redux';
import store from './store';
import * as Actions from './container/actions';
export default class App extends React.Component {
state = {
isLoadingComplete: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<StyleProvider style={getTheme()}>
<Root>
<View style={styles.baseContainer}>
{/* <StatusBar backgroundColor="#000" /> */}
{/* {Platform.OS === 'ios' && <StatusBar barStyle="default" />} */}
<Provider store={store}>
<AppNavigator />
</Provider>
</View>
</Root>
</StyleProvider>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Font.loadAsync({
// This is the font that we are using for our tab bar
...Icon.Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free
// to remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
}),
]);
};
_handleLoadingError = error => {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
package.json
{
"name": "My-app-name",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/samples": "2.1.1",
"@expo/vector-icons": "github:expo/vector-icons",
"@expo/videoplayer": "^0.4.0",
"adm-zip": "^0.4.13",
"axios": "^0.18.0",
"expo": "^31.0.6",
"native-base": "^2.10.0",
"plist": "^3.0.1",
"react": "^16.6.3",
"react-native": "^0.57.7",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-lightbox": "^0.8.0",
"react-native-render-html": "^3.10.0",
"react-native-status-bar-height": "^2.2.0",
"react-native-video": "^4.3.1",
"react-navigation": "^2.18.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"xcode": "^1.1.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
app.json
{
"expo": {
"name": "My-app-name",
"version": "1.0.0",
"slug": "My-app-name",
"sdkVersion": "31.0.0",
"ios": {
"bundleIdentifier": "com.yourcompany.yourappname"
},
"android": {
"package": "com.yourcompany.yourappname"
}
}
}