Have you ever heard of React Native (RN) but are still unsure what it is? It’s quite similar to ReactJS, however, there are some major differences. The biggest one is that React Native is used for creating native apps for Android and iOS, while React is used for web development.

If you want to learn React Native then you should have already at least a basic understanding of ReactJS. Both are built on the same concepts and use the same principles.

Native components

Contrary to what you may be used to from building in React, RN doesn’t depend on JSX or HTML elements and CSS for styling those. It uses native components, which were pre-built for you.

As a developer, you then import those to your project and use them like lego pieces to create the interface of your application.

Take a look at the full list of available components to get an idea of what the development in RN could look like for you.

Let’s take a look at what a simple text input would look like.

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

const Name = () => {
  const [name, setName] = useState('');
  return (
    <View>
      <TextInput
        placeholder="Type your name here!"
        onChangeText={newText => setName(newText)}
        defaultValue={name}
      />
      <Text>
        {name}
      </Text>
    </View>
  );
}

export default Name;

The Name component looks quite similar to what it would look like ReactJS. The only differences lay in the native components that we’re using for the text input and display.

Native features

Developing in RN also lets you access the native features of mobile devices like cameras or geolocation.

The support for those is provided by a super active community and open source projects.

Fast refresh

Thanks to the provided fast refresh you can instantly see all the changes happen almost instantaneously. You won’t have to wait for the long build processes to finish before testing your interfaces.

Styles

In RN you won’t find any CSS, although don’t be worried. RN is using JS to inject additional styles into its components.

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

const Name = () => {
  const [name, setName] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type your name here!"
        onChangeText={newText => setName(newText)}
        defaultValue={name}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {name}
      </Text>
    </View>
  );
}

export default Name;

As you can see in the snippet above. RN components accept the style property that consumes a JS object, whose properties are camelCased CSS properties. Those work in the same way as they would in regular web applications.

There is a lot of parallels that can be drawn between React and React Native. You should definitely familiarise yourself with RN at least a little bit in your career.

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.