Does React Native That Good?

React Native

React Native is a shiny new technology, often considered a silver-bullet for mobile development, especially by newbie web-developers. This paper removes shiness and brightness from React Native, and brings up the downsides of it.

Ok, lets start from the beginning. I'm a full-stack developer, using ES6 for frontend and backend development. I have absolutely no knowledge in mobile development, but I have 5+ years expirience of developing high perfomance projects. My technology stack is Node.js/Python/Docker/React/Redux. My first application created with React Native is Android client for LessPass.

A bit about LessPass. It's a password manager application. It doesn't store any passwords on your device. It recalculates passwords on-demand with a help of some sneaky hash function. Hash function receives url, login and master password as an input and generates the password to use. So, Android client for this app is dead-simple - it has only 3 inputs and one button that generates the password. The application's main screen is on the screenshot below. So let's dive into programming itself.

The main screen

Main Screen Layout

Creating a layout in React Native is pretty the same to React for web. Main difference is flexbox. It's the default mobile grid in React Native. To make your application look pretty you should install React Native Elements. You won't see any divs and spans there. Some components miss obvious properties, so you need to go through the React Native Components Guide.

Here is an example of a React Native Layout:

<View style={styles.inputView}>  
    <FormInput
        inputStyle={styles.inputStyle}
        placeholder={'Site'}
        keyboardType={'url'}
        underlineColorAndroid = 'transparent'
        onChangeText={(value) => this.setState({...this.state, site: value})}
        value={this.state.site}
        />              
</View>  

Business Logic

The core function of my application is hash caclulating. It receives the master password, url and login and returns a hash string that is used as a password. This function already exists in lesspass-core library. I started with executing npm install lesspass. But this approach failed, due to the lesspass-core library requirement of Node.js base classes such as Buffer and Stream. Next thing that I tried was browserify, but it also didn't work in the React Native environment. Finally, I created my own implementation of the core hashing function using cryptojs versus cryptobrowserify, as the result I got a dramatic perfomance regression (60 seconds versus 100 ms).

The key point of this story is that you just can't use billions of Node.js libraries with React Native. If the library works - you're lucky. But usually it doesn't. You can try finding an alternative library that doesn't use Node.js, if it fails you'll have to create your own Native Component with Java or Swift. But if you have to use Java or Swift anyway, what is the purpose of React Native?

Debugging

Debugging made excellent in React Native. A lot of Android developers only could dream about hot-reloading, and instant app deploying. Perfomace tools are included too.

Other

80% of React Native libraries are shitty. A lot of libraries are outdated and won't compile with latest React Native releases. The number of good and well-supported libraries for React Native is less than 100 (yes, I checked 'awesome-react-native'). As a proof, you can try installing splash-screen component.

To Sum up

In my opinion, React Native cant'be used in a complicated project. You can easily create a 'hello-world' application with it, but when you dive deeper you will have to deal with numbers of problems. Guys from Lesspass turned React Native down and created their mobile app with Cordova in 30 minutes. React Native needs more solid libraries and native components.

You can find the source code of my React Native app on GitHub.