NativeBase and Expo together provide a good starting point for ReactNative apps. This post provides the steps to set this up.
The GitHub repo for NativeBase is here. An Expo with Create React Native App (CRNA) version of the repo is here.
Start by cloning the Expo/CRNA version of the app and switching to the cloned directory
git clone https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/CRNA cd CRNA
Install the following packages:
npm install @expo/vector-icons --save npm install expo --save npm install
You may want to update the version of react-native in the package.json:
"react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz",
Insert the following line in package.json:
"main": "node_modules/expo/AppEntry.js",
Insert the following block in the app.json after the displayName:
"expo": { "name": "NativebaseKitchenSink", "description": "An empty new project", "slug": "blank", "privacy": "public", "sdkVersion": "19.0.0", "version": "1.0.0", "orientation": "portrait", "primaryColor": "#cccccc", "packagerOpts": { "assetExts": ["ttf", "mp4"] }, "ios": { "supportsTablet": true } }
In the App.js, replace the render block with the following:
async componentWillMount() { console.log('componentWillMount'); await Expo.Font.loadAsync({ 'Roboto': require('native-base/Fonts/Roboto.ttf'), 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), 'Ionicons': require('@expo/vector-icons/fonts/Ionicons.ttf'), }); console.log('componentWillMount, back from loadAsync'); this.setState({isReady: true}); } render() { if (!this.state.isReady) { return ; } return ; }
Open the project in Expo and start it on the iOS simulator.
Enter these commands to clone my version of the repo:
git clone https://github.com/rgstephens/NativeBase-KitchenSink.git npm install
Open the project in Expo and start it on the iOS simulator.