In this post, I'm going to share my React Native project structure, configurations and some tips. It contains most of the things I've learnt after 1 year of development with React Native, from the creation to the distribution. I created a Github repository called that I now use for all my projects. So I hope it's helpful for other developers who are new with React Native. And you are welcome to make PR :D typescript-react-native-starter Features I started to use Typescript recently after several projects which made me understand the importance of typed variables. It might take some time to learn at first but it's worth it. You might avoid hours maybe days of debugging thanks to Typescript. Plus it makes your code self-documenting which is crucial for projects with severals developers. Typescript based React Native's typescript template Flux State management : predictable state container Redux : offline store Redux Persist : side effect model for Redux Redux Saga : create typesafe actions easily typesafe-actions { action } ; * types ; myAction = action(types.MY_ACTION_TYPE, payload); import from 'typesafe-actions' import as from './actionTypes' export const => payload Navigation : easy-to-use navigation solution based on Javascript React Navigation Unit testing Unit tests with , and Jest Enzyme react-native-testing-library : coverage report Codecov CI/CD Run linting pre-commit and unit testing pre-push with 's hooks husky Placeholder App Icon: useful for uploading your app to beta quickly with Fastlane : generate all required sizes, label and annotate icon.Placeholder feature graphic and screenshot to upload beta android app quickly App Icon generator Linting Tslint configured with Airbnb styles Vscode Prettier compatible Internationalization and localization : easy to use package for i18n react-native-localization Others : iOS dependencies manager Cocoapods : transition tool for jetifier React Native 0.60 AndroidX migration : bind your component's functions easily with a decorator autobind-decorator handleClick()  {...}

<button onClick={ .handleClick.bind( ) }> @boundMethod
handleClick() {...}

<button onClick={ .handleClick }> // Before this this </ > button // After this </ > button Project Structure The structure I used is inspired from many sources so you might find this familiar. I like to seperate my files by category except for some special ones like App.tsx, store.ts,... The publishing folder also contains some useful placeholder images to deploy your app. For example, in order to deploy your app on Google Play, even for Internal Testing, you would have to add screenshots, feature graphics,... It was ok at first but after several projects, it's kinda annoying so I decided to create some placeholder images for that. ├── __tests__                            // Unit tests
│   ├── App.test.tsx                     // App component's tests
│   ├── components
│   │   └── MyComponent.test.txs
│   └── ...
├── android
├── app.json
├── assets                               // All assets: images, videos, ...
├── index.js
├── ios
├── publishing                           // Icon, screenshots, preview,... for App Store & Play Store
└── src
    ├── App.tsx
    ├── actions                          // Actions
    │   ├── actionTypes.ts               // Action types
    │   └── app.ts                       // appReducer's actions
    ├── components                       // Components
    │   └── MyComponent.tsx
    ├── constants                        // Colors, sizes, routes,...
    │   └── strings.ts                   // i18n
    ├── containers                       // Screens, pages,...
    ├── lib                              // Libraries, services,...
    ├── index.tsx                        // Root component
    ├── reducers                         // Reducers
    │   └── app.ts                       // appReducer
    ├── sagas                            // Redux sagas
    ├── store.ts
    ├── types                            // Type declarations
    │   └── index.d.ts
    └── utils                            // Utilities Useful tips This section is for completely random but useful tips, feel free to share yours in the comment or make a PR NavigationService You can by using from src/lib/NavigationService.ts navigate without navigation prop NavigationService NavigationService ; NavigationService.navigate( , { : }); import from '../lib/NavigationService' //... 'ChatScreen' userName 'Lucy' Cocoapod When you run react-native link and the linked library has podspec file, then the linking will use Podfile. To disable this feature, remove # Add new pods below this line from line 24 in ios/Podfile Static bundle The static bundle is built every time you target a physical device, even in Debug. To save time, the bundle generation is disabled in Debug react-native-screens You can use react-native-screens with react-navigation in order to improve memory consumption Install and follow steps in Usage with react-navigation (without Expo) from react-native-screens Open ./src/index.tsx and uncomment // import { useScreens } from 'react-native-screens'; // useScreens(); Responsiveness Avoid as much as you can "absolute" position and hard values (100, 300, 1680,...) especially for big ones.Use flex box and % values insteadIf you have to use hard values, I have this normalize function for adapting hard values accordingly to the screen's width or height. I might upload it on the repository later: { Dimensions, Platform, PixelRatio } ; { : SCREEN_WIDTH, : SCREEN_HEIGHT } = Dimensions.get( ,
); wscale = SCREEN_WIDTH / ; hscale = SCREEN_HEIGHT / ; { newSize = based === ? size * hscale : size * wscale; (Platform.OS === ) { .round(PixelRatio.roundToNearestPixel(newSize));
  } { .round(PixelRatio.roundToNearestPixel(newSize)) - ;
  }
} import from 'react-native' export const width height 'window' // based on iphone X's scale const 375 const 812 export ( ) function normalize size, based = 'width' const 'height' if 'ios' return Math else return Math 2 So now I can use: normalize( ) normalize( ) container = { : normalize( , ), height: normalize( , )
} // iphone X 100 // = 100 // iphone 5s 100 // = maybe 80 // You can choose either "width" (default) or "height" depend on cases: width 100 "width" // "width" is optional, it's default 100 "height" Before pushing, test your app on 3 differents emulators: iphone5s (small), iphone 8 (medium) and iphone Xs Max (big) Beta distribution with Fastlane - Install fastlane sudo gem install fastlane -NV brew cask install fastlane # Using RubyGems # Alternatively using Homebrew iOS - Open your project Xcode workspace and update your app's Bundle Identifier and Team - Initialize fastlane cd <PROJECT_NAME>/ios
  fastlane init - Distribute your app fastlane beta Android - Collect your Google Credentials - Open your project with Android Studio and update your app's applicationId in build.gradle (Module: app) file - Select Generated Signed Bundle / APK... from the Build menu - Next then Create new... under Key store path then Next and Finish - The first time you deploy your application, you MUST upload it into Google Play Console manually. Google don't allow to use theirs APIs for the first upload.Create your application in the (unlike for iOS Fastlane cannot do that for you) Google Play Console - Make sure that these 4 checkmark icons are green Recommended order: Pricing & distribution, Content rating, Store listing and App releases You can find the required assets for Store listing in the publishing/android folder - Initialize fastlane cd <PROJECT_NAME>/android
  fastlane init - Use the Fastfile from publishing cp publishing/android/fastlane/Fastfile android/fastlane - Distribute your app There is no official plugin to automatically upgrade android version code (unlike the iOS lane). Before each deployment, be sure to manually upgrade the versionCodevalue inside android/app/build.gradle. More - Checkout the for more details Fastlane's beta distribution guide - for React Native Fastlane's documentation Apple Store Connect's missing compliance If you dont' use Fastlane and you don't want to at , then add this to your Info.plist Provide Export Compliance Information every push Note that you might have to set that to <true/> if your app uses encryption

AirBnB

Apple

My React Native Stack After 1 Year

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

What No One Told Me About Being a Product Manager at an Early Stage Startup

What Are Convolution Neural Networks? [ELI5]

Rules of Thumb for Software Engineering

10,331,579,614 Records Leaked in 2019 And Counting...

10 Ways to Future-Proof Your Business With Cloud

102 Stories To Learn About Storytelling

What No One Told Me About Being a Product Manager at an Early Stage Startup

What Are Convolution Neural Networks? [ELI5]

Rules of Thumb for Software Engineering

10,331,579,614 Records Leaked in 2019 And Counting...

10 Ways to Future-Proof Your Business With Cloud

102 Stories To Learn About Storytelling

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps