Developing Android & iOS apps has never been easier when it comes to delivering the right product to the end-user. React-Native has changed this problem totally since it was introduced, knowing about design patterns in React-Native is an essential skill that developers should know. In the React-Native ecosystem, the way we design our apps has always been easier since due to the large community support you can easily pick some of the work done by other outstanding developers. I will discuss the design patterns in React-Native that will help you write more maintainable code with examples.

Components In React-Native

A component is all that React uses most of the time the apps and writing your components in the right way is really important as you start to make real-world and bigger apps that require actual maintenance over time. These practices are still used by professional developers to make awesome React-Native apps and also I will discuss why it is so important to learn design patterns in React or React-Native in our case

When it comes to Components it is very crucial to make them reusable as your app grows with the time you will find it really hard to make new components every time to use somewhere else and end-up up following the well-known programmer principle-Don't Repeat Yourself (DRY). Presentational components are meant to do that.

I will discuss the following practices in this article:

1. Stateless and Stateful Components, with short and more complex examples.

2. Creating Presentational Components with easy configuration.

3. Container Components.

4. When to compose components and how to create (HOC)-High Order Components.

Stateless And Stateful Components

If you create a simple React-Native project using Create React-Native App (CRNA) you will observe simple React components already written in the file App.js.This component was created using the class syntax that was introduced in ES6 and such components are called class components.

You can take a deeper look at the example below:

Class components can be used to create stateful components, in this case, the clas component is unnecessary and we can use a stateless one instead.

Let's understand how can we convert it into a Stateless Component.

The most common approach is by using ES6 arrow syntax as such components are called Functional Components. (You can use regular syntax if are not comfortable with the arrow syntax)

The question that comes to mind is why is it stateless? Because it doesn't contain any inner state, which means we are not storing any private data inside it, everything that the component renders itself is provided from the external world and the component cont care about that in this case.

Till now we are not passing any kind of external data to our component. To pass some data we will make another new component called HelloText that consumes the property to display some text. To do so the usual convention to pass text to such a component is to place a text between the opening and closing tag,

For example: Text to be passed

But to retrieve such a prop within our functional component we still need to use a special key called Children.
After implementing the props in our functional component that's how it will look like:

Using the Children prop makes the HelloText component way much powerful, as props are flexible you can send any valid JavaScript type. In this case, we have just sent a Text, but you can send other components too.

Now it's the time to add some more features to our component and we will make expand the third text blocks after pressing the title text. To achieve this functionality we need to store a state that remembers if the component is expanded or collapsed.

Here's what changes we need to make:

1. At first, we need to change the component to a class syntax. 

2. To leverage the state object in the React library we must initialize the state within the class constructor and make the text collapsed by default.

3. Add conditional rendering to the component render function.

4. Add the press handler which will change the state once we tap on the title or text.

After making these changes here what our code will look like.

Now to understand the design pattern we will make something more challenging (a TaskList)

To create the following feature the constructor should initialize the task list in its state, in the example the task list will be an array of strings. It will iterate over the task to create the Text component for each task & and this should happen in the render function in the App component.

Read the full post at: https://mohit19.medium.com/design-patterns-in-react-native-component-patterns-785d585ac3f