Typescript | Flow
svgr.now.sh for react-native-svg
ESLint | TSLint
NativeBase | React Native Elements | React Native Paper
Visual Studio Code | Atom
Redux, Redux Saga, Deox
Mobile developers prefer React Native because it opens the way for rapid development. Sometimes results even go beyond the expectations.
In this perspective, SoundCloud’s case may be interesting to mention. When the guys have switched to React Native, their Tech-Team estimated that app development will take 6 months. However, they’ve managed to cut this time to 4 months!
For the best experience, our team uses some tools for React Native development that we’re sharing with you today. How can they help?
What are these tools? Check the list below:
Let’s take a closer look at these React Native Development Tools!
If you don’t know what Ignite is, this introduction video explains this tool quite well:
In a nutshell, Ignite CLI is a React Native boilerplate generator. With its help, you can choose project templates from the existing base or add your own component boilerplates as well. What boilerplates do we mean?
The key idea here is the following: since the structure stays the same sometimes, there’s no need to write it from scratch. If you can easily generate these repeatable parts of code why not to do it? And that’s what Ignite is for.
A few reasons why Ignite is one of our favourite React Native tools:
What’s not great? You’ll need to follow the code convention of such generators. However, it’s true for all similar tools for React Native development where you generate boilerplates.
Expo is one of our key helpers in React Native Development. This is a free open-source toolchain for delivering Android and iOS applications that creates its own ecosystem for delivering React Native applications.
As the guys describe their tool, it’s like “rails for React Native” - many things are set up for you which helps to move faster and in the right direction.
How can it be helpful?
However, we couldn’t help but mention a few pitfalls you may face when working with Expo. The good thing is that the guys don’t try to hide it and have a special “Why not Expo?” section in their docs. Here’s what they say:
Despite it may be strange to compare a language (which is Typescript) and a tool (which is Flow), they both are used to solve the same problem.
And here’s how these React Native tools deal with it.
Moreover, you don’t even need any special React Native development environment to write in Typescript. But to get the best out of the box development experience we recommend to use the VS Code. It was developed by Microsoft (as well as Typescript) and fits perfectly for this purpose.
If you’re interested in using Typescript, we recommend watching this video about its basics:
Unlike Typescript, Flow isn’t a programming language. It’s rather a static type checker that can be installed right into your local React Native development environment.
So what are the peculiar properties of each? Here they are.
🗃 Basic types
Both tools handle basic types (literals and primitives), interfaces, tuples, function types, classes, aliases, unions, generics in the same way. However, Flow provides a bigger collection of utility types.
🔄 Export syntax
You can export and import types just like any other JS construct, using ES6 modules syntax. So you don’t even have to think whether something is a type or not when working with modules.
You have to use an export/import type syntax. It may not be a big problem but you will have to pay attention whether you’re exporting or importing a type or not.
⚙️ Methods overloading
If you need to redeclare your method or function with different parameters or return type, you can freely do it in Typescript.
In Flow, it’s only possible in definition files.
Typescript has a bigger community, well-established ecosystem and more type declaration and good dev tools based on it (for example, VS Code).
Flow is younger and, thus, it has a smaller community. However, this tool is actively developing right now, so the situation may dramatically change.
Typescript has clear and well-defined documentation.
Flow’s documentation is rather good, too. However, some features are undocumented or may be unclear.
🤝 React support
Typescript lacked good React Native support at first. However, it’s not a problem anymore. Now you can choose a Typescript template when starting a new RN project and be all set!
Flow has built-in, advanced support for React. You just need to add the JSX plugin to Babel config and that’s all.
If you’re interested in learning more about Typescript vs Flow differences in syntax and usability, check this post.
СodePush is one of the favourite React Native development tools of the whole community. Why?
I bet you’ve heard about over-the-air updates. Just in case: React Native apps can be updated instantly, avoiding the long and sometimes complicated review process. Moreover, users also see the difference immediately, having no need to download the newer version of the app.
CodePush is a cloud service that allows deploying applications instantly & directly to users’ devices.
This React Native development software tool acts as a central repository. Instead of recompiling and redistributing the entire binary, developers can directly publish updates (JavaScrip and images) to it. Then apps can query for updates from it using the special SDK for React Native.
However, it’s true only for JS updates. All changes to the native code (like custom bridges or any third-party libraries that require linking) still need to be updated through the recompilation and after going through the Apple Store or Google Play review processes.
SVGR is quite a simple yet helpful React Native development tool. As you may guess from its name, SVGR’s main purpose is to make SVG integration into React Native projects fast & easy. It transforms SVGs into ready-to-use components.
The guys tried to make this tool developer-centric and ensure a seamless workflow. Thus, you can use it right out of the box.
SVGR works as a generator. It eliminates the need to transform SVG into react-native-svg components manually which saves you some time.
Moreover, you can try how it works online - just follow this link and let the magic happen 🙂
Both are pluggable linting tools to identify problematic code that doesn’t match certain style guidelines.
An example of how ESLint works
Despite these React Native development software tools come with a list of default rules, you can easily load your own rules at any time. Easy as that. Moreover, all rules are completely pluggable and can follow the same pattern for themselves and for tests as well.
ESLint and TSLint will also be very helpful for teams where a few developers are working on the same project and need to keep up to a common codestyle. Also, such linters can help you prevent some mistakes and initially inefficient code parts.
This tool got on our list of the best tools for React Native development because it provides excellent experience when handling routing and navigation within the app.
Navigation is a common part for any application whether it’s an app for making calculations in the building industry or a dating app for cats. React Navigation isn’t the only solution to the navigation issue for RN, but we will consider it as the most popular and easiest one to start.
With React Navigation you can implement all kinds of transitions out of the box. Of course, the tool supports such navigation elements as the tab bar, stack navigation (sliding across), drawer navigation (slide up) and deep linking.
Also, you’re not limited since it’s possible to build your own navigator.
However, this is a fully JS solution so all the components only mimic their real iOS and Android analogues.
By the way, to get a sense of React Navigation possibilities, you can try out the Navigation Playground app.
In some projects (or at the MVP-Stage) there’s no need to make an application fully custom. And that’s when React Native Elements, NativeBase or React Native Paper can help you. What are these?
All of these React Native development tools are UI toolkits that provide developers with generic interface components. But you can also use them as a ground for your own custom UI system.
In other words, you don’t have to build a simple button, date picker or list from scratch. Of course, if you don’t need hem to be custom and unique.
Some of the interface components that can be found in React Native Elements
Is there any difference between these three React Native tools? No really significant or important one. All three work with both Android and iOS apps, leave some room for small customization (for example, you may change colours or make sure they match platform’s guidelines). So which one you decide to choose is just a matter of your own taste and preferences.
Of course, this list of React Native development software tools wouldn’t be full without a few code editors. We recommend choosing between the following 2 options - Atom or Visual Studio Code. However, both these code editors have similar functionality:
Reactotron is a free desktop application used to inspect React Native and React JS apps. What exactly can it do?
To learn more about Reactotron, we recommend watching this video from its developers, Infinite Red:
Redux is an open-source JS library and a state container. In React Native development it’s used to develop user interfaces.
It gives each component the definite piece of state it needs and holds it up within a single location.
The best cases to use Redux are:
However, we recommend using a few additional tools together with Redux. These are Redux Saga and Deox.
Redux Saga is a middleware library that allows handling asynchronous actions. It leverages ES6 features (also known as Generators) and thus, developers are able to write and test asynchronous code that looks synchronous.
Finally, it makes things like accessing the local cache and data fetching easier to test and manage as well as more efficient to execute.
The main Deox’s purpose is to diminish types repetition, verbosity and complexity and not to lose any type information. In other words, it makes the maintenance of architecture simpler by sticking to the functional programming paradigm.
So, it allows writing significantly less code for the same scope of functionality.
We hope that our list of tools for React Native development will be helpful for you no matter whether you’re only starting to work with this framework or already have some experience.
Mentioned tools are quite easy to install and use. Their main aim - to make the development faster, easier and time-efficient.
Looking for a Rockstar React Native Dev Team? Hit the button below and we'll help to launch your project with this framework!
Was it helpful?
How to Build a Companion App for your IoT/BLE Device
How We at Stormotion Maintain Products After Release
How to Integrate BLE-Based Fitness Devices into your App
Our clients say
When I was working with Stormotion, I forgot they were an external agency. They put such effort into my product it might as well have been their own. I’ve never worked with such a client-focused company before.
Alexander Wolff, CPO