React native - first touch

about a month ago, one of my colleagues (who is a senior iOS developer) asked me if I have some experience in cross-platform mobile app development. I've been watching some react native tutorials and I haven't even exported APKs, so I responded YES! then I got introduced to an application that had complex UI as well as device-related features like working with geolocation data or using databased, etc. I should mention that there was limited time and the reason the client wanted this application to be developed using cross-platform tools, was that they wanted it as soon as possible.

after 2 weeks of development, and about another week of applying some other changes and fixing alpha and beta version bugs, the application got ready for a limited number of customers.

now, I want to share my thoughts over react native as a developer who used it for the first time, but, for developing an enterprise application. hope you find these useful!

OK. Where's the start line?

the first step is to make your computer ready for android/ios development with react native. first of all, I did not feel good about expo because I was thinking that the final bundle size is going to be massive so I chose react-native-cli to generate and manage application.

I work on a Linux machine so I had to prepare my computer for android app development by installing JDK, Android SDK, and android virtual device. although I used android studio for installing SDKs and AVD, I had to set all of the environment variables manually. setting those could be a little tricky but it's not that complecated.

after all, the process of setting up the computer for android development is not enjoyable and beginner friendly. as the react native docs said:

If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.

by the way, I prefer using typescript in all of my projects, so I installed the `react-native-template-typescript.

Believe me, there will be a lot of dependencies.

according to a couple of famous memes, the heaviest object in the universe is the node_modules directory in a js-based project. as a javascript developer, I'm strongly agreed. almost all js-based applications depend on tons of 3rd party packages and react native is not an exception. and it's not just npm dependencies. there are some other build-time dependencies like Hermes, which is a js engine specifically for react native code and you should bring it.

there are some common 3rd party packages that I think are necessary for all applications. and react native does not provide us with these features. some of them are:

• react-navigation - for routing and navigation
• AsyncStorage - something like localStorage but in a mobile app
• @reduxjs/toolkit - although we have context for global state management, redux is more suitable for most cases
• axios, react-query - fetch API is available in react native, but..., come on!

the list does not end here, but I try to mention really necessary dependencies.

AH! I hate UI!

managing UI in react native is not pleasant. at least I can say it's not pleasant to me. for example:

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 50,
        marginVertical: 30,
    },
    text: {
        color: "red"
    }
})

export const SomeComponent: React.FunctionComponent = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                I Am Groot
            <Text>
        </View>
    )
}

it's not like we have to write a ton of repetitive styles for a different element. there are array-based styles, in which you can pass an array of styles and they will be combined. but I think it's not the fastest way to create UI in react native. so I look for libraries and frameworks for implementing UI in react native.

I think native base is the best option amongst other tools and libraries. its API is very similar to chakra-ui, material-ui, or mantine (none of them are compatible with react native) and it's highly customizable and easy to use.

this is the converted version:

import React from 'react';
import { View, Text } from 'native-base';

export const SomeComponent: React.FunctionComponent = () => {
    return (
        <View mx={50} my={30}>
            <Text color={'red'}>
                I Am Groot
            <Text>
        </View>
    )
}

I think it's a better way to implement UI. BTW, this is only my opinion.

animations: also for animations, here in react native, we do not use animations using CSS properties. instead, we should use the Animated library form react-native. and it's not optimized that way, because the UI animation is controlled by javascript, through bridge, so long story short, we have the old js problem here too: 'we are single threaded so we have to keep the main thread free as much as possible. there is another library for doing this kind of task more efficiently: react-native-reanimated. it's a better approach.

Where is version one?

react-native has been there since 2015, and yet in 2022, we do not have version 1.0 and the latest version in mid-2022 is 0.69. so can we conclude that react native is not stable? the answer is yes and no at the same time.

By the way it does not mean that react native is not stable. it means it's under development. there are changes in core architecture like the new NativeModule system (TurboModule) and the new Renderer (Fabric). I'm not going to investigate the difference between these two architectures, but in general, the differences are something like these:

current architecture: (including bridge and native modules)

new architecture: (including JSI, Fabric, and TurboModules)

Just js? nothing else?

I am going to disappoint you. it's not like writing js and that's it, we have ready-to-use iOS and Android app. there are a lot of use cases that we should change some native code in both java and objective-c which is not considered a good experience. because I do not feel ok with languages and frankly, js feels like home, other languages are just a bit weird. specifically objective-c. but these changes are mostly just configuration and adding just one line of code. there's no development in native languages.

for example, permissions in android should be handled in AndroidManifest.xml and info.plist. or setting up react-navigation requires adding some lines of code in MainActivity.java. in the iOS side, most of the things will be handled just by running npx pod-install ios but in android sometimes it should be challenging.

Myth: no native feature in react native

that's completely wrong. In this application, I used device geolocation (for using in the map parts), and user fingerprint in local authentication. there are other libraries that make it possible to use device native features like camera, voice recorder, sensors, contacts, phone calls etc.

also, you can load your TensorFlow lite models directly on the device using react-native-tensorflow-lite (which is iOS only, but I'm sure there's some other library that provides this feature for android systems too) or Pytorch using react-native-pytorch-core.

I did not face any serious limitations or barriers, so forget about these myths.

Last word. will I use it again?

well, let's discuss it a bit.

react-native is hard, in the beginning, especially in comparison to its powerful rival, flutter. I have practical experience in flutter android app development too, but as a javascript developer, I always prefer using js based tools. the development experience is a really valuable feature for react native. it also makes rapid development possible. and one of the most important features of the js world is its great community. you can find a lot of libraries, and your questions have already been answered in StackOverflow maybe years ago, so you won't be stuck in some problem for a long time.

It wasn't an easy journey at the beginning, but as I progressed in the project and find how to ask google about my react native problems (believe me, it's important), It got better and better. and yes. I'm going to use it again. I'm thrilled to see finalized version of the new architecture. it looks promising.

thank you and have a nice code!