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

<div class="section-inner sectionLayout--insetColumn"><figure><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill"></div><img data-image-id="1*wpXodFuPfZx_LsImAg90TQ.png" data-width="2000" data-height="733" data-action="zoom" data-action-value="1*wpXodFuPfZx_LsImAg90TQ.png" src="https://hackernoon.com/hn-images/1*wpXodFuPfZx_LsImAg90TQ.png"></div></figure><p><strong>React</strong> is one of the biggest JavaScript libraries for building user interfaces provided by Facebook and <strong>React-Native</strong> 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&#x2019;s not only about building Native IOS/Android apps but we can also build web applications using the same code and share more than <strong><em>50%</em></strong> codes between React-Native(Mobile) and React(Web) because we are using React and JavaScript in both cases.</p><p><em>Sounds good, right?</em></p><p>So let&#x2019;s understand the general parts which can&#x2019;t be shared between React and React-Native.</p><ol><li>I think your guess now, Components can&#x2019;t be shared inside of render method, because in render we return <strong>XML</strong> which is totally different in Web and Mobile, as you might know in the web we use <strong>HTML</strong> but in Mobile, it&#x2019;s not possible to use HTML tags.</li><li>I will not emphasis on saying that it&#x2019;s not possible, like the first case, if you want, you can do it but there is no point of doing it, it&#x2019;s <strong>Style</strong> part, as you might know in React-Native we use Styles like <strong>CSS</strong> 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&#x2019;s JS but uses CSS keywords and values in the object.</li></ol><p>Here is a small style example in React and React-Native</p><figure><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill"></div><img src="https://avatars2.githubusercontent.com/u/15065065?s=400&amp;v=4"></div></figure><figure><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill"></div><img src="https://avatars2.githubusercontent.com/u/15065065?s=400&amp;v=4"></div></figure><p>But our goal is to share code <strong><em>100%</em></strong> exactly as it is.</p><p>So which parts can be shared between React and React-Native?<br>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.<br>We can easily share <strong>Http</strong> requests, <strong>Sockets</strong>, validations, helpers, wrappers and etc.<br>As we use React in Web and Mobile, our project structures can be fully similar to each other, but it&#x2019;s not effective to write i.e. a helper function in a project and then copy past in the other project.</p><p><em>Hmm, how to find a solution for this point?</em></p><p>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.</p><h3>SDK</h3><blockquote name="9300" id="9300" class="graf graf--blockquote graf-after--h3">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.</blockquote><p>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&#x2019;s have a look at examples.</p><h4>Http calls and&#xA0;Sockets</h4><p>If you have HTTP calls, you don&#x2019;t need to use fetch in each project and then parse the response to check for errors and etc. Instead you can make an SDK for HTTP calls which will do that entire functionality and return the result or will throw an error. you should implement the flow in such a way that the user won&#x2019;t know what is going under the hood, HTTP or something else, so one should not meet HTTP specific things such as headers, status code and etc. For example, it should be clear for the user that <strong><em>getAllNews</em></strong>(input) function will return data or throw an error, and the user should not use low-level HTTP requests.</p><figure><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill"></div><img src="https://avatars2.githubusercontent.com/u/15065065?s=400&amp;v=4"></div></figure><p>SDK is popular in online games which used i.e. Socket, because the game flow is more realistic than Http calls, and SDK will more effective because you don&#x2019;t know what happens under the hood, here is an example how it will work.</p><figure><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill"></div><img src="https://avatars2.githubusercontent.com/u/15065065?s=400&amp;v=4"></div></figure><p>As you can see this code is very readable and you can easily understand what is happening, but under the hood, it is doing many things.<br>At first, it can connect new socket and add few listeners, after that using socket it can create room and wait for the response from the server, after that you request to join a room, which also does a few works under the hood. You can create multiple players which will connect with multiple sockets.</p><p>Also, you can create SDK using singleton pattern which always will have the same state, so it depends on the business logic of your application.</p><h4>Validations</h4><p>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 a good way to copy paste the code?</p><p>Having our own small validation framework is a good idea.<br>In SDK you can take <strong>JSON</strong> which contain all data from forms and rule names, and then you can specify and validate data using that rule names and generate an error message. Here you just need to create validation rules(functions) for every case.</p><h4>Redux</h4><p><em>How much of the code in your project is written in redux?<br></em>In my opinion about <strong><em>20&#x2013;30%</em></strong> of the code is written in redux because state managing is used more, so it&#x2019;s a great idea to start thinking how to share state managing code between projects.</p><p>Actually, some parts are not really like SDK, because we just storing code for reusability, but we can implement it and use like an SDK.<br>(in my opinion, it is enough to store all logic from the <strong>action</strong>). You can have just very similar actions and reducers in both platforms which will help to switch from a platform to another and build something.</p><h3>Summary</h3><p>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 SDK&#x2019;s for games which will be used by Web/Mobile teams. After that when I started working on different projects (not only games) with React and React-Native I understood that we can implement SDK here also, and I suggest to have an SDK for projects.</p><p>The question <em>&#x201C;which parts of the code can be covered by SDK&#x201D; </em>is very difficult to answer, because it also depends on project business logic and requirements.</p><p>I have created SDK for a few projects, so I can suggest you to start building your own SDK for the project. As I mentioned earlier(in Redux part) using SDK also helps to switch from a platform/project to another because codes are very similarly together and you can easily understand.</p><p>Thank you for reading this article, feel free to ask any questions or tweet me <a href="http://twitter.com/nairhar" title="Twitter profile for @nairhar" target="_blank">@nairhar</a>.</p></div>

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Sharing code between React and React Native using SDK

Too Long; Didn't Read

Nairi Harutyunyan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Sharing code between React and React Native using SDK

Too Long; Didn't Read

Nairi Harutyunyan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES