🤫 My React-Native little secrets to speed up a project </>
This article groups all awesome (🔥) resources I found on the web while creating my first projects using the React-Native mobile dev framework.
My setup:
- MacBook Pro 13" 2017
- OS: OSX
- Node : v10.16.0
- NPM : v6.9.0
- XCode : 11.2.1 (11B53)
💻 Useful commands
🚧 Create a new project
react-native init ProjectName
cd ProjectName
react-native run-iosHere if you get the simulator which is loading, you are on the good path (for the moment).
🔥 Run the starter kit
git clone https://github.com/joeybronner/rn-starter-kit
npm install
react-native link
react-native run-ios🛣 Add the navigation
One of the most important plugin in a @reactnative project is the navigation between screens. I highly recommend to get the react-navigation plugin.
npm install —-save react-navigation
npm install —-save react-native-gesture-handler
react-native link react-native-gesture-handlerThe perfect example of @react-navigation implementation is done by Zeb Girouard and the full article is available here: Tutorial
📱 Wrap the app into a SafeAreaView
With the new borderless screens like the iPhone X, you have to wrap the app into a SafeAreaView to be sure the components into your view will not be cut.
It’s very easy to add this to your app, but there is some screenshot of the result in an article from Nader Dabit: React Native & iPhone X.
📲 Add menu bar (bottom)
The react-navigation plugin provides a good bottom bar navigation and we will use it because it allows you to be easily mapped with the routes defined for the app.
The documentation is well done and this example is easy to implement. You can fully customize the bottom bar as well.
If you want to use drawer menu or a top bar, they provide this too.
One of the important part here is the logos for the bottom bar. If you want to use icons instead of labels, you have to add a third party icons library (like Ionicons) or use png files.
Below the example of the home screen which is one of the tab.
Home: {
screen: Home,
navigationOptions: {
title: ‘Accueil’,
showLabel: true,
tabBarIcon: (
<Image style={{ width: 24, height: 24 }} source={require(‘./assets/icons/home.png’)} />
),
showIcon: true
}
}🤕 Custom header for views
You can customize headers of your views with react-navigate but I experienced this possibility and it’s not as easy as you can find on the tutorials.
I finally fall for an external library: react-native-parallax-scroll-view. Very nice and easy to implement, it’s my first choice in term of headers.
✍️ Add custom fonts
Another thing which is important about custom fonts for your app is to apply globally a default font. I searched a solution to do this without an external library but I didn’t found a good solution. I also recommend this external library which works with less than 5 lines: https://www.npmjs.com/package/react-native-global-font.
🔗 Firebase
🔓 Authentication (email)
// Todo…
📚 Database (documents)
Interesting article from Medium: Get Google Firestore working with React
Another very well detailed tutorial for Firestore and CRUD: React-Native Firebase tutorial build CRUD firestore app
🌁 Storage (Img, videos & co)
// Todo…
️️✏️ Rename an existing project
Sometimes you are using some starter kits to speed the development of your app. No problem, it’s normal. But at a moment you need to rename the project and if you want to do it manually it’s complicated, you ever miss a file and the project doesn’t compile anymore.
The best library that renames your project like a charm is react-native-rename.
Easy to use and formidably effective.
react-native-rename “App Name” -b com.yourname.appname*Note: Bundle is only renamed for Android, not for iOS (please do the manip with Xcode)*
To rename bundle / app name, follow this article
💰 Payment system
I have not yet done a clear integration of payment but below I bookmarked some articles about in-app libraries:
- React-Native in-app purchase
- Library : react-native-iap (not tested)
🔥 Push to “production” with cable
Once you have an advanced version of your app, you want to push it to kind of production at least on your phone. Facebook wrote a step-by-step tutorial to explain this : building your app to production
🍭 Icons for both platforms
You can easily generate your logo assets for both platforms on IconCutter. Just replace the auto-generated ones with what you get from IconCutter.
Really easy: 5 minutes chrono ⏱
📱 Lock screen orientation
All is explained in this article but in short:
- For Android, you just have to modify the AndroidManifest.xml and add
android:screenOrientation=”portrait” to the activity.- For iOS, you have to open Xcode and go to the project targets, select the app and uncheck the unwanted orientations.
That’s it ✌️
🌍 Multilangage
The best external libraries I found (yes, there is two libraries to merge) are:
- [react-native-localize](https://github.com/react-native-community/react-native-localize)
- [i18n-js](https://github.com/fnando/i18n-js)
All is explained with a step by step tutorial in [this blog post](https://medium.com/@nicolas.kovacs/react-native-localize-and-i18n-js-117f09428017).
You app is multilanguages! 😄
📹 Videos
THE channel you cannot pass through is the channel from William Candill (Cc @wcandill). Awesome quality for videos and tutorials and if you don’t want to start from scratch, he provides some starter projects (not free): https://react-native.shop/
His @youtube channel : https://www.youtube.com/user/wcandill
🚀 Starter Kits
📄 Publish to App Store
First, you can follow the first steps here: https://readybytes.in/blog/how-to-deploy-a-react-native-ios-app-on-the-app-store
Now, you can complete with the official Apple step-by-step but from my point of view, this tutorial was not “complete”…
🤖 Publish to Google Play
Follow this tutorial from developer.android and generate signed APK from Android Studio
