is one of the biggest JavaScript libraries for building user interfaces provided by Facebook and framework lets you to build native mobile apps which uses the same design as React library. One of the amazing fact about React-Native is that it’s not only about building Native IOS/Android apps but we can also build web applications using the same code and share more than codes between React-Native(Mobile) and React(Web) because we are using React and JavaScript in both cases. React React-Native 50% Sounds good, right? So let’s understand the general parts which can’t be shared between React and React-Native. I think your guess now, Components can’t be shared inside of render method, because in render we return which is totally different in Web and Mobile, as you might know in the web we use but in Mobile, it’s not possible to use HTML tags.I will not emphasis on saying that it’s not possible, like the first case, if you want, you can do it but there is no point of doing it, it’s part, as you might know in React-Native we use Styles like but with little differences. Also, you will have more screen differences in Mobile and Web which will interrupt you. Also in this point, you need to copy CSS code and modify the code in order to use it in React-Native, because in React-Native Style is not pure CSS, it’s JS but uses CSS keywords and values in the object. XML HTML Style CSS Here is a small style example in React and React-Native height: 25px;
  background-color: red;
} #redBox { width : 25px; StyleSheet.create({ }
}); import { StyleSheet } from 'react-native' ; redBox : { width : 25 , height : 25 , backgroundColor : 'red' , But our goal is to share code exactly as it is. 100% So which parts can be shared between React and React-Native? As we want to have the same JS code in both of sides we need to understand how we can do it and how to structure our projects which will be similar to each other and can be shared. We can easily share requests, , validations, helpers, wrappers and etc. As we use React in Web and Mobile, our project structures can be fully similar to each other, but it’s not effective to write i.e. a helper function in a project and then copy past in the other project. Http Sockets Hmm, how to find a solution for this point? One of the good ways to choose is to have another repository which will be called SDK and there will be stored all code which will be shared between that projects, and in projects, you will have a vendor folder where you will have your SDK. SDK A SDK provides a set of tools, libraries, relevant documentation, code samples and processes or guides that allow developers to create software applications on a specific platform. I am going to show some ways to create SDK, and how to use it to have more effective, reusable and clean code. In my examples, you can have a look at the small concept of SDK and understand how to build and use it. So I will not jump into this deeply, let’s have a look at examples. Http calls and Sockets If you have HTTP calls, you don't need to use the method in each project and then parse the response to check for errors, etc. Instead, you can make an SDK for HTTP calls which will do all the necessary processes and return the result. It would be best to implement a flow, so the user won't know what is going under the hood. It can be done by HTTP or by something else, so no one should not meet HTTP-specific things such as headers, status codes, etc. For example, the user of the () function shouldn't work with HTTP requests. Instead, he should expect a result or error. fetch getAllNews } try { const news = await getAllNews(input); } catch (err) { console .log(err.message); // automatic generated message for getAllNews function And in the same way, we should encapsulate all the internal processes that the other developer shouldn't work with. In this second example, it can be a Socket connection. player.joinRoom(roomId); // 1 const player = new GameSDK.Player(options); // 2 const roomId = await player.createRoom(options); // 3 As you can see, this code is very readable, and you can easily understand what is happening, but under the hood, it can do many things. At first, it can open a new socket connection and add a few listeners. After that, using the socket connection, it can send and receive messages, etc. You can create an SDK using a singleton pattern which always will have the same state. It depends on the business logic of your application, so you need to understand how the SDK would work. Validations Imagine in your business logic you need to create SignIn/SignUp pages in Web and Mobile, so here you need to validate form fields. Is it necessary to have two validation functions in two different projects, or is it an excellent way to copy-paste the code? Having our small validation framework is a good idea. In SDK, you can take which contains all data from forms and rule names, and then you can specify and validate data using that rule names and generate an error message. You need to create validation rules(functions) for every case. JSON, Redux I think about of the code in projects is written for redux-related processes because state managing is used a lot. So it's a great idea to start thinking about how to share that part of the code between projects. How much of the code in your project is written in redux? 20–30% It is enough to store the logic from the redux . Most likely, you will have similar actions and reducers on both platforms. actions Summary When I was working on my first online multiplayer game project, I heard about the SDK, and for the first time, I started to build SDKs for games that Web/Mobile teams will use. After that, when I started working on different projects with React and React-Native, I understood that we can also use the same approach here, and I suggest having an SDK for projects. The question is challenging to answer because it also depends on project business logic and requirements. "which parts of the code can be shared by SDK" I have created SDK for a few projects, so I can suggest you start working with this approach in your projects. As I mentioned earlier, using SDK also helps to switch from one platform/project to another because codes are very similar, and you can easily understand them. Thank you for reading this article, feel free to ask any questions or tweet me . @nairhar

Sharing code between React and React Native using SDK

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Graceful shutdown in NodeJS

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Graceful shutdown in NodeJS

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps