Make professional mobile apps with React Native and Typescript — Routing and navigation (Chapter 3 — Part 2)

Photo by Malcolm Lightbody on Unsplash

Pro tip: If you start to make a new app, react-navigation is the way to go. It provides cleaner & easier APIs to work with (and better documentation). Previously, the performance was an obstacle when working with large applications, but the recent versions resolved it. You should choose react-native-navigation if you want a native look and feel or want to integrate React Native into an existing app which already has navigation natively.

git clone -b setup_linting_tools https://github.com/thinhtran3588/react-native-starter-kit.git
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
index.js
yarn add @react-navigation/bottom-tabs
app.tsx
navigation screenshots
yarn add react-native-vector-icons
yarn add --dev @types/react-native-vector-icons
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
app.tsx
bottom tab with icons
'import/no-unresolved': ['error', { ignore: ['@app', '@core', '@settings', '@weather'] }], // ignore module import
'react/jsx-closing-bracket-location': 'off', // let prettier formats the code
alias: {   '@app': './src',   '@core': './src/core',   '@weather': './src/modules/weather',   '@settings': './src/modules/settings',},
"paths": {   "@app/*": ["src/*"],   "@core/*": ["src/core/*"],   "@weather/*": ["src/modules/weather/*"],   "@settings/*": ["src/modules/settings/*"]},
interfaces

Pro tip: Normally, using the any type is strictly prohibited. However, in some special cases, when making general interfaces/core components, we may have to use it.

Pro tip: Using index.ts to combine components, functions, interfaces in a same root reduces import lines in other files. For example, instead of using:
import {Interface2} from ‘@core/interfaces/interface2’;
import {Interface2} from ‘@core/interfaces/interface2’;
We can use:
import {Interface1, Interface2} from ‘@core/interfaces’;

components

Pro tip: We reuse the Icon component from react-native-vector-icons by import & export it without touching it. This is a way of wrapping 3rd components inside our own ones, even though we don't modify it. As a result, in the future, if we want to change it or updating its behavior, we only need to fix it in 1 place. The screen components and their sub-components in modules should never import 3rd components directly but only using @core/components.

settings
weather
git clone -b navigation https://github.com/thinhtran3588/react-native-starter-kit.git

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store