Recently I completed my first React-Native app. Although it had a steep learning curve, it has some advantages that’ll make your time worthwhile.  Unlike traditional programming languages, it is advertised as ‘learn once, write anywhere’, that sounds exciting, right? Well, at least it made me roll up my sleeves and go ‘okay, let’s do this!’. And then I realized something, while React-Native is designed for developing apps on all platforms, it isn’t exactly ‘write anywhere’, at least not yet and it has some pitfalls. So these are some things you should know if you’re going to build your next app using React-Native.


Don’t throw out your native tools

Just installed react-native on my machine, let me just go ahead and remove Android Studio/Xcode and forget all about native code. Stop! It doesn’t work that way. React-Native executes JavaScript code locally to generate native widgets in an activity. But it’s in early stages of development and still can’t do some things like native code does. You are going to write native code from time to time, it’s inevitable if you’re a React-Native developer. 

React-Native provides APIs for communication between Java/Objective C. Sometimes it’s better to write a few lines of native code instead of installing a new library for it. For example, do want to keep the screen on in your app? Go ahead and do this: 

On Android: 

getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

 

On iOS: 

[[UIApplication sharedApplication] setIdleTimerDisabled:YES];

 

There you go, that’ll save you some time and now you have one less library to worry about.


Know the differences

Before I started developing with React-Native it seemed like configuring my app to run on both Android and iOS would take about the same time. I couldn’t have been more wrong. This depends on the expertise you have in these native developing environments and availability of libraries for that particular platform. So always take special care in estimating time and effort required to configure an app. Consider all the packages while doing this, because some of them may not be cross platform and you will find yourself using multiple packages for same functionality on different platforms.


Gather the libraries

You have already planned your app and you’re ready to start building. Do you have all the libraries for implementing certain tasks? Do comprehensive research beforehand. You might need to remove or change some key features in your app. If you’re opting for a UI library, check if it has support for custom styling and behaviors.

Make sure the libraries you need have well maintained Git repos and are thoroughly documented. Some popular libraries even have their own communities, so if you need any help troubleshooting they will help you. Don’t be nervous to create a few PRs if need be.


Concurrent development

This is a common mistake among react native developers. Don’t wait till you have completed developing for a platform to start the work on the other one. This can cause major remodeling some core features of the app which will, in turn, cost more time and money.

There are some good emulators out there and we should never completely remove them from development. It is a good practice to test your apps on devices (both Android and iOS) from day one.


Don’t be scared to update

React-Native might as well be one of the most frequently updated tools right now (At the time of writing this, it was once a month). Most developers are afraid to do frequent updates mostly due to breaking changes in most updates. This might save you some time now, but the outdated code has the potential to deprive you of sleep for days straight.

This applies to all packages, maintainers often add features, fix bugs and optimize code. If you have the habit of updating regularly, it won’t take much time to accommodate breaking changes.


Optimize UI performance

React-Native does not have a UI performance bottleneck like other cross-platform solutions. Unlike Cordova, Ionic etc. it does not use web-view to render UI, instead, it generates native widgets in activity. But still, some careless coding can make the UI sluggish hence less user-friendly. 

  • Providing a unique key for all UI components can make the re-renders much more efficient by only updating the changed ones. These unique keys should stay unchanged during updates for this to work, that means you can’t generate random unique keys during render. I’ve seen some developers use this:

<ListItem key={_.uniqueId()}>.....................</ListItem>

 

This does more harm than good, not only it generates a unique key every time it renders, using more CPU time but also it does not help React-Native identify which component has changed. If you’re rendering from an array of values you can use the unique id from array values as key.

  • Use console log inside all render methods to know when they’re updated, this helps identify unnecessary renders. There are packages available for detecting useless re-renders like:

https://github.com/garbles/why-did-you-update

 

  • Direct manipulation of components can have a positive effect on UI performance, especially in cases where you just need to update opacity of a component for example. In React-Native there is a ‘setNativeProps’ method to achieve this. Check out the code below:

setOpacityTo(value) {
  // Redacted: animation related code
  this.refs[CHILD_REF].setNativeProps({
    opacity: value
  });
}

 

This does not require setting a state to update UI, further reducing refresh time.


Conclusion

Given all these shortcomings in React-Native, you might be thinking ‘Should I even start with React-native?’. If you ask me, I would say, ‘Go for it!’. Most of these shortcomings will probably be taken care of in future updates. React-Native has a huge community and you can get almost real-time support from them (If you know where to ask). It can reduce development effort by more than 40%, now that's a huge advantage. 

Hope I helped your decision to start using React-Native for your next app. Thanks for sticking around till the end.

Subscribe to our newsletter. Get updates on awesome happenings in the technology world!
Newsletter subscription successfull! Something went wrong! Email is already registered!

TAGS