MovieFinder App

• First Run
• Change Splash Screen Logo
• Vector Icon
  • IOS
  • Android
• Version Bump
• Absolute Aliased Import
  • Example
    • ESModule Systax
    • Require Syntax (Generally Used for Assets)
• Global State Management
• Navigation
  • Pre Configured Navigators
  • Navigator Nesting
• Deep Link
  • URL and Schema
  • Testing Deep Links
  • More Info
• Components
  • Container
  • Fixed Container
  • Keyboard Avoiding Container
• Troubleshooting

This was bootstrapped with TS-Plus Template

First Run

Remember to install Pods if you are developing for ios (On MacOS)

cd ios && pod install && cd ..

Change Splash Screen Logo

Replace src/assets/bootsplash_logo_original.png with your own then run,

yarn regenerate-bootsplash

For more control, see React Native Bootsplash - Setup - Assets Generation

Vector Icon

By default, to reduce footprint, only MaterialCommunityIcon is enabled. You can easily enable other icons by following the instruction below.

IOS

Edit ios/MovieFinder/Info.plist and add a property called UIAppFonts and add your desired fonts from the list below.

<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>
  <string>Fontisto.ttf</string>
</array>

Then Rebuild The App.

Android

Edit android/app/build.gradle and find:

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialCommunityIcons.ttf' ]
]

Now add your desired fonts inside the iconFontNames array.

iconFontNames: [
  'AntDesign.ttf',
  'Entypo.ttf',
  'EvilIcons.ttf',
  'Feather.ttf',
  'FontAwesome.ttf',
  'FontAwesome5_Brands.ttf',
  'FontAwesome5_Regular.ttf',
  'FontAwesome5_Solid.ttf',
  'Foundation.ttf',
  'Ionicons.ttf',
  'MaterialIcons.ttf',
  'MaterialCommunityIcons.ttf',
  'SimpleLineIcons.ttf',
  'Octicons.ttf',
  'Zocial.ttf',
  'Fontisto.ttf'
]

Then rebuild the app.

Version Bump

This template comes with react-native-version. Just do,

yarn version

to bump version number on both ios and android.

Absolute Aliased Import

You can import any files inside src/ directory using ~/ prefix.

Example

ESModule Systax

// src/deeply/nested/folder/file.ts(x)
import { useRootStore } from '~/stores/store-setup';

Require Syntax (Generally Used for Assets)

// src/component/coolest-image.tsx
const CoolestImage = () => (
  <Image style={styles.logo} source={require('~/assets/bootsplash_logo.png')} />
);

Global State Management

The Excellent mobx-state-tree is preconfigured with AsyncStorage persistence using mst-persistent-store.

You can access the store using useRootStore hook that's exported from src/stores/store-setup.ts.

You can view the pre-configured Root Store Model and customize it in src/stores/root-store.ts.

To learn Mobx State Tree, checkout their Getting started tutorial or follow the free egghead.io course.

👉 Official docs can be found at http://mobx-state-tree.js.org/

Navigation

React Navigation is pre-configured with the Root Stack Being a Native Stack.

Pre Configured Navigators

1. Native Stack Navigator
2. Drawer Navigator (With Custom Drawer Component using React Native Paper)
3. Material Top Tab Navigator
4. Material Bottom Tab Navigator

Navigator Nesting

The aforementioned navigators are nested in the following way:

Root Stack Navigator (navigators/root-stack.tsx)
|-- Loader Screen (screens/loader.tsx)
|-- Drawer Navigator (navigators/drawer.tsx)
| |-- Welcome Screen (screens/welcome.tsx)
| |-- Top Tab Navigator (navigators/top-tab.tsx)
| | |-- Screen One (screens/one.tsx)
| | |-- Screen Two (screens/two.tsx)
| | |-- Screen Three (screens/three.tsx)
| |-- Bottom Tab Navigator (navigators/bottom-tab.tsx)
| | |-- Home Screen (screens/home.tsx)
| | |-- Details Screen (screens/details.tsx)

Deep Link

Deep Link & Universal Link is also pre-configured for React Navigation. It should just work on android. Universal Link for IOS may need additional setup.

URL and Schema

URL: https://www.moviefinder.com Schema: moviefinder://

Testing Deep Links

You can use uri-scheme to test deep links on both ios and android.

npx uri-scheme open moviefinder://loader/3000/Test_Deep_Link --android
npx uri-scheme open moviefinder://loader/3000/Test_Deep_Link --ios

px uri-scheme open https://www.moviefinder.com/loader/3000/Test_Deep_Link --android
npx uri-scheme open https://www.moviefinder.com/loader/3000/Test_Deep_Link --ios

More Info

See React Navigation - Deep linking & React Navigation - Configuring links for more information.

Components

Container

A scrollable container that respects safe area and accepts both SafeAreaView and ScrollView props.

Fixed Container

For non scrollable pages, respects safe area and accepts SafeAreaView props.

Keyboard Avoiding Container

Same as Container, but plays nicely with keyboard. Useful for screens with forms.

Troubleshooting

See Here for a list of potential issues and their solutions.