React-Native Open Discussion

Learning never stops, No matter where we are…

Today I am here to open up my discussion by briefing up the topic called as “React-Native”. We all know little bit about the “React-Native” but not enough knowledge to integrate in any of your project.

We at Jio, ran the iOS community where the people are sharing their ideas about some topics by giving sessions on PPT, quiz, some problem solving skills. Today we announced, “The Open Discussion Session” to get more interactions from the people of our community.

So we chose the topic “React-Native” for the discussion. It is the time of lockdown, where the people can not interact with each other physically but at Jio, Organised the meeting with help of “Microsoft teams” to get interaction with the people virtually in our community. Here are some glimpses of our community.

iOS Community

So now, on the topic “React-Native”. I have set the agenda for our open discussion. It is like…

• Sharing initial experiences by teams who have made progress in integrating React-Native with existing Native Project
• Pros and cons to ponder upon
• Pitfalls to avoid for a new integration
• Architecting React-Native in existing project and best approach on organising JS files and node modules in Native folder structure
• Best practices

Now I am sharing mine as well as teams point of view on the above agenda.

• Sharing initial experiences by teams who have made progress in integrating React-Native with existing Native Project

Here, we got many points of view from different team who have already integrated React in their project.

Very first, we have to finalise whether we want to go with React- Native or doing in native platform depending on our requirement.

It is quite interesting to learn new technology and implement in our existing project. Developer gets new insights by learning.

We can develop some screens in React and some on native platform to support dynamic content on the application.

For all the discussion on this agenda, it is very much clear that we have to look in our requirements whether it is really important to use React instead of Native as we have to consider a lot of dependencies, SDK sizes etc.

Some of the questions come up while discussing this agenda like..

How we can share the data between react and native module?

What is the database we can use to support local and live data update?

To answer such questions, experts from our community come up and provide their views.

Sharing data between react and native is quite easy. There are some methods available to share the data. It is just like some call backs and promise api is there to set and get data from React to native and vice versa.

For another answer, We can use our native database also to support data management for local and live data update. There is no specific requirement for React-Native to handle the database.

• Pros and cons to ponder upon

For this agenda we got different opinions from team. So I summarise this here.

Every technology is off both the side. There are advantages and disadvantages also. Let’s talk first about advantages:

1. Easy to integrate.
2. More feasible to integrate in multiple platform.
3. Dynamically modify the content of the screen.
4. Its like learn once and write the code for multiple platform.
5. Live reloading reloads or refreshes the entire app when a file changes. For example, if you were four links deep into your navigation and saved a change, live reloading would restart the app and load the app back to the initial route.
6. Hot reloading only refreshes the files that were changed without losing the state of the app. For example, if you were four links deep into your navigation and saved a change to some styling, the state would not change, but the new styles would appear on the page without having to navigate back to the page you are on because you would still be on the same page.

Disadvantage of using this technology.

1. We have to consider the size of the SDK also. As there are multiple dependency libraries we have to integrate depending on our requirement.
2. There is much dependency of the library version. Like we can not update all the dependent library if there is any update available in any of one library.
3. If your app has SDK that you want to share with some other project to integrate, at the same time if your SDK has certain screens which are in React. That may not support other project to adopt that SDK. It is simply as if your SDK is forcing to adopt React in your project too.

• Pitfalls to avoid for a new integration

It is very important to know which technology we need to use while starting any of your project.

Also for the fresher and the specific technology driven people who are new to “React-Native”, it should be useful to know the better way to start off.

As per the people of our community, It is very simple to start off. Just follow the one page document and you will be able to setup the project in React-Native.

Here is the link to start up with basic of React-native. https://reactnative.dev/docs/getting-started

• Architecting React-Native in existing project and best approach on organising JS files and node modules in Native folder structure

This is a little interesting point. How the structuring of the existing project folder with React-Native code or folder.

React project structure is not depended on our xcode project structure. It’s up to us how we want it to structure. Best practice we can follow is, we can fit it in our existing project structure.

We can create different repo for React-Native code also. Xcode is just interesting in one file which is generated while compiling the react code and bundle it in xcode resource folder.

We have to write script in xcode build setting to generate the file using correct path and bundle it in our project, no matter what folder structure we are following in our xcode.

For iOS, we have to write pod name of react native to add the react native SDK in xcode. For other JS file and other dependent library are managed in our existing project structure.

• Best practices

Here, I want to share some of the links where we can start, add react in existing project and how we can structure it.

Integration with Existing Apps · React Native

https://www.freecodecamp.org/news/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92/