React Native Projects

Project Setup

• RULE #1: Choose the right CLI to start a project:

If you are new to mobile development, the easiest way to get started is with Expo CLI https://docs.expo.dev/workflow/expo-cli/ . Expo is a set of tools built around React Native and, while it has many features, the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator

If you are already familiar with mobile development, you may want to use React Native CLI https://www.npmjs.com/package/react-native-cli. It requires Xcode or Android Studio to get started.

• RULE #2: always start a new project with a fresh new installation of the choosen CLI with the latest framework and libraries. If the project is similar to a previous one, still do not clone it

• RULE #3: React Native doesn't force conventions: everyone can setup a project in a random way. The convention must be defined in a per company way and followed for every project.

• RULE #4: before starting a new project, read the official documentation to find out new features and to remember forgotten ones: https://reactnative.dev/docs/getting-started Also, if you go for Expo, read it's official documentation first https://docs.expo.dev/guides/

Must to have packages

It's easy to start with few packages and finish the project with lot of dependencies. Despite other frameworks and languages, node packages tend to be less stable during time (that means lot of breaking changes). So the goal is to add only a few libraries and follow these best practices:

• Do not add packages that are not actively maintained or with a few stars
• Do not add unknown packages just to reinvent a little wheel: see what they do and create a library.js inside the lib folder
• Add the minimum number of packages to your project: more dependencies mean more issues in the future if you have to upgrade the project

Below a list of packages that can be always be included:

• react-query to handle communications with remote APIs: https://react-query.tanstack.com/
• react-hook-form, to easily work with forms: https://react-hook-form.com/
• moment, to work with dates: https://momentjs.com/
• lodash, as general utility library: https://lodash.com/
• axios, to perform remote calls: https://github.com/axios/axios
• joy as validator: https://github.com/sideway/joi
• react-navigation to habdle navigation between screens: https://reactnavigation.org/
• react-native-async-storage as simple key-value storage: https://react-native-async-storage.github.io/async-storage/

Why using React Query? Some of the features that React Query provides include:

• Providing hooks useful with function components
• Abstracting the underling library to perfom remote calls (like axios)
• Can be used ofr both REST and GraphQL APIs
• Using window focus pre-fetching mechanism to pre-fetch the data depending on application tab activity.
• We can set the number of request retries for any request, in case of random errors.
• It's easy to perform APIs polling
• Performs pre-fetching so that the application can update stale data in the background.
• Handling complex application caching so that the request operation is optimized.
• Allow to performs dependant queries
• The difference between React-Query and the common data fetching patterns such as useEffect, is that React Query will first return the previously fetched data and then re-fetch it again. If the resource is the same as the first, React Query will keep both the data as a reference without forcing the page to reload.

Project Structure

React Native gives you the ability to choose which project structure best fits your needs: the only advice is to be consistent through all the development process.

The best way to structure projects is to divide code between "functionality" folders

components/
  index.ts
  blog-item/
    BlogItem.ts
    BlogItem.style.ts
    BlogItem.props.ts
    BlogItem.presets.ts
    BlogItem.hooks.ts
  ...
navigation/
  index.ts
  BlogStack.tsx
  ...
screens/
  index.ts
  blog/
    BlogScreen.ts
    BlogScreen.style.ts
    BlogScreen.props.ts
    BlogScreen.presets.ts
    BlogScreen.hooks.ts
api/
  index.ts
  mutations.ts
  queries.ts
utils/
  ...
libs/
  ...
store/
  ...

Style guide & Linting

Consider using JavaScript Standard Style: https://github.com/standard/standard That's the simple to setup and very widely used formatter, linter and style checker on the market. If you are using Typescript, use Ts-standard: https://github.com/standard/ts-standard

Best Practices

Almost every best practice written in the React section is valid for React Native.

And more:

• If you have a small project, you should mindfully keep away from the redux store planning. Because the developers have to write long line codes for doing small changes. Thus, redux store planning is more suited for large scale applications.
• Compress images and other graphic elements. Proper image optimization makes the entire app lightweight, increasing its performance and scalability. Another option to reduce image size is using file types like APNG in place of PNG files.
• Optimize native libraries.
• Optimize the number of state operations and remember to use pure and memoized components when needed.
• Use Global State wisely for example worst-case scenario is when state change of single control like TextInput or CheckBox propagates render of the whole application. Use libraries like Redux or Overmind.js to handle your state management in a more optimized way.
• Use key attribute on list items, it helps React Native to pick which list to update when rendering a long list of data
• Use VirtualizedList, FlatList, and SectionList for large data sets.
• Clear all the active timers which may lead to heavy memory leakage issues.
• Remove all "console.log"!