React Native, a JavaScript toolkit that facilitates the creation of mobile apps that work on iOS and Android, was introduced by Facebook in 2015.

Since then, tech behemoths like Microsoft, Uber, Spotify, and Pinterest have all adopted the paradigm more frequently among the mobile development industry.

Large-scale project development can be difficult, so to ensure a stable environment for development, we should establish a solid structure and concepts early on.

I've developed a few React Native apps along the way, and I've picked up a few key ideas that help me write faster-performing projects with code that is cleaner and easier to read.

In this article, I will share a few important points that, from my point of view, can help you develop better mobile apps. The article is geared towards developers at any level of React Native development.

Which concepts are we going to cover?

1. Feature folder
   2. Keep the logic outside of the component
   3. Support accessibility with big/small font
   4. Animations

1. Feature folder

In terms of organisation, React Native is ambiguous. It depends on the project you're working on as well as your personal preferences.

Developers commonly employ one of two folder structures: PBL (Package by Layer) 1. Package by Feature (PBF) 2.

Package by Layer (PBL) The highest-level packages are organised by type and reflect the many application "layers" such as components, actions, reducers, etc.

Disadvantages:

Lack of modularity (OOP idea) - The functionality cannot be readily extracted because it is strongly tied with our codebase. Files that are not directly related to one another are contained in folders. Poor code navigation forces you to jump between several projects to find the relevant files. in large teams can lead to merge conflicts and be challenging to grow.

2. Keep the logic outside of the component

I have seen this behavior often when a developer writes a long component with a bunch of logic - when a new developer wants to make changes in the code, it could take days instead of hours.

React should be responsible for only rendering the UI, the logic should be managed by the redux or exported utils functions/classes, we will write it in a dedicated file, in that way your code will be more:

• Understandable and clean with a function name that describes the purpose of the logic.

• The logic can be reused in other components too.

It’s easier to test it using a unit test when it’s an independent function.

Sources and credits:-

* https://medium.com/react-native-training/lets-write-examples-with-package-by-feature-approach-on-react-native-7494b49e034c
* https://hackernoon.com/package-by-features-not-layers-2d076df1964d
* https://www.freecodecamp.org/news/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92
*tutorialspoint.com/object_oriented_analysis..
* https://blog.bitsrc.io/top-5-animation-libraries-in-react-native-d00ec8ddfc8d React