Getting Started in Cross-Platform App Development with React Native.

Share on facebook
Share on google
Share on twitter
Share on linkedin
Learn to work with React Native to develop Apps for Android and IOS.

To work with React Native, you will need to have an understanding of JavaScript fundamentals.

With React, you can make components using either classes or functions. Originally, class components were the only components that could have a state. But since the introduction of React’s Hooks API, you can add state and more to function components.

Getting Started

The easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native.

Make sure you have installed NodeJs and run the following command:

$ npm install -g expo-cli

To create a new project run:

$ expo init newProject
$ cd newProject
$ npm start

This will start a development server for you.

Components

In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components.

Core Components

React Native has Core Components for everything from form controls to activity indicators. You can find them on the website of the react-native documentation.

A few common components are:

  • View
  • Text
  • Image
  • ScrollView
  • TextInput

Create your first component

Here is how you do it: First import ‘React’ and ‘React Native’:

import React from 'react'; 
import { Text } from 'react-native';

And you create a component like a regular javascript function:

const Article = () => {};

You can add elements to these components, like text, images or inputs. Example:

const Article = () => {
return <Text>Hello, I am an Article!</Text>;
};

To be able to use this component, you need to export it:

const Article = () => {
return <Text>Hello, I am an Article!</Text>;
};export default Article;

JSX

React and React Native use JSX, a syntax that lets you write elements inside JavaScript. Any JavaScript expression will work between curly braces.

For example:

const Article = () => {
const number = 1;
return <Text>Hello, I am an Article number {number}</Text>;
};export default Article;

Props

Props is short for properties, these properties you can pass through components to, for example, display data.

For example:

const Cat = (props) => {
return (
<View>
<Text>Hello, I am {props.name}!</Text>
</View>
);
}

State

A state is like personal storage for a component. The state is useful for handling data that changes over time or that comes from user interaction. State gives your component a memory.

Let’s see how that works:

First import state:

import React, { useState } from 'react';

Then add a new variable:

const Cat = (props) => { const [isHungry, setIsHungry] = useState(true);  return (
<View>
<Text>Hello, I am {props.name} and I am {isHungry ? "hungry" : "full"}!!</Text>
</View>
);
}

Text Input

The ‘<TextInput>’ element will let users be able to enter text to your application. You can store the text in a state for example.

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

Create your component:

const Cat = (props) => {
const [text, setText] = useState('');

return ( <View>
<TextInput
onChangeText={text => setText(text)}
/>
</View> );
}

When the ‘InputText’ element changes it replaces the value of the state with the value of the element.

List Views

The ‘FlatList’ component displays a scrolling list of changing, but similarly structured data. ‘FlatList’ works well for long lists of data, where the number of items might change over time.

Here an example of the ‘FlatList’:

const FlatListBasics = () => {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
}export default FlatListBasics;

Conclusion

After this article, I hope you can write a simple React Native code now and have a good idea of what React Native is about.

bryan@dijkhuizenmedia.com

bryan@dijkhuizenmedia.com

Leave a Replay

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit