Getting Started with Mobile Development with React Native

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create our first app.

Getting Started

To get started with React Native, we’ve to install the Expo CLI.

We run:

npm install -g expo-cli

to install it.

Node 12 LTS or later is required.

Then we can create a React Native project by writing:

expo init react-native-example

We also have to install Android SDK with an Android device or emulator.

We can install Genymotion which is faster than the Android emulator.

To install it, we can go to https://www.genymotion.com/ to download it.

Then we go to:

cd react-native-example
yarn android

to start the Expo CLI.

In the react-native-example project, we have App.js which has:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The View component has the main app view.

The Text component has text.

StatusCar has the status bar.

The StyleSheet.create method creates the styles.

Then we applied it with the styles prop.

We can use flexbox and other CSS properties for our layouts.

Images

We can add images by using the Image component.

For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/fork.jpg')} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We add the Image component with the source prop to set the image.

We can also add icons from a URL. For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={{ uri: 'https://reactjs.org/logo-og.png' }}
        style={{ width: 400, height: 400 }} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We can also set other HTML request data like the headers and body when we get the image.

For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: 'https://reactjs.org/logo-og.png',
          method: 'POST',
          headers: {
            Pragma: 'no-cache'
          },
          body: 'Your Body goes here'
        }}
        style={{ width: 400, height: 400 }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Conclusion

We can get started with mobile development with React Native in a few minutes.

And we can use Genymotion or a real device to preview our app fast.