DEV Community

Cover image for Intro to React Native
AJ
AJ

Posted on

Intro to React Native

#beginners #tutorial #react #javascript

This blog is a comprehensive guide for beginners who are looking to use react software for their wants and needs. First, before we dive into the code, let's complete a quick history lesson about what react is exactly.

What is React Native?

React Native was developed by Facebook as an open-source framework that allows developers to create cross-platform apps using JavaScript and React. This software has emerged as one of the most popular frameworks for building mobile applications and it enables developers to use the same codebase to create applications for both iOS and Android. Unlike other cross-platform frameworks that use WebView, React Native directly translates components into native ones, resulting in better performance and a more native feel.

Environment Set Up
Now before we start, you need to set up your development environment. Ensure you have Node.js installed, then install the React Native CLI by running:

npm install -g react-native-cli
Enter fullscreen mode Exit fullscreen mode

You can then create a new project with:

react-native init MyNewProject
cd MyNewProject
Enter fullscreen mode Exit fullscreen mode

Congratulations, you've successfully installed React and created your first project with the framework!

Say Hello
As usual a quick and easy way to familiarize yourself with a new environment is to start with a hello function. So now open the App.js file and replace its contents with the following code:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;
Enter fullscreen mode Exit fullscreen mode

Explanation
1. Imports:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
Enter fullscreen mode Exit fullscreen mode

Here, we're importing the core components from React and React Native. View is similar to div in HTML, Text is used to display text, and StyleSheet is used for styling.

2. App Component:

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};
Enter fullscreen mode Exit fullscreen mode

The App component returns a View component that contains a Text component. The Text component displays "Hello, World!" on the screen.

3. Styling:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
Enter fullscreen mode Exit fullscreen mode

The StyleSheet.create method is used to create styles for the components instead of CSS. The container style centers the content both vertically and horizontally, and the text style sets the font size and text alignment.

Core Components
React Native offers several core components for building user interfaces. Here are a few essential ones:

  1. View: The fundamental building block for UI, similar to div in HTML.
  2. Text: For displaying text.
  3. Image: For displaying images.
  4. TextInput: For input fields.
  5. Button: For clickable buttons.

Here is an example of using some of the core components:

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

const App = () => {
  const [name, setName] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        onChangeText={text => setName(text)}
        value={name}
      />
      <Button title="Greet" onPress={() => alert(`Hello, ${name}!`)} />
      <Image
        style={styles.image}
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    padding: 10,
    width: '80%',
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default App;
Enter fullscreen mode Exit fullscreen mode

Explanation: Part 2
1. State Management

const [name, setName] = useState('');
Enter fullscreen mode Exit fullscreen mode

We use the useState hook to create a state variable name and a function setName to update it. Initially, name is an empty string.

2. Text Component

<Text style={styles.text}>Welcome to React Native!</Text>
Enter fullscreen mode Exit fullscreen mode

Displays a welcome message. The style prop applies the text style defined in the StyleSheet.

3. TextInput Component

<TextInput
  style={styles.input}
  placeholder="Enter your name"
  onChangeText={text => setName(text)}
  value={name}
/>
Enter fullscreen mode Exit fullscreen mode

Creates an input field. The onChangeText prop updates the name state with the text entered by the user. The value prop sets the current value of the input to name.

4. Button Component

<Button title="Greet" onPress={() => alert(`Hello, ${name}!`)} />
Enter fullscreen mode Exit fullscreen mode

Displays a button that, when pressed, shows an alert with the message "Hello, {name}!".

5. Image Component

<Image
  style={styles.image}
  source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
/>
Enter fullscreen mode Exit fullscreen mode

Displays an image from a URL. The source prop takes an object with a uri key pointing to the image URL.

6. Styling (Never forget this part.)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    padding: 10,
    width: '80%',
  },
  image: {
    width: 100,
    height: 100,
  },
});
Enter fullscreen mode Exit fullscreen mode

The container style centers the content, the text style sets the font size and margin, the input style defines the input field's dimensions and appearance, and the image style sets the image size.

Navigation

Navigation in React Native is handled by libraries like React Navigation. To get started, install React Navigation:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

Here's a basic example of navigation:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Explantion
1. Navigation Components

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
Enter fullscreen mode Exit fullscreen mode

We import the NavigationContainer and createStackNavigator from React Navigation. The NavigationContainer manages our app's navigation state, while createStackNavigator helps us create a stack-based navigation system.

2. HomeScreen Component

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};
Enter fullscreen mode Exit fullscreen mode

This component displays a "Home Screen" message and a button. When the button is pressed, it navigates to the "Details" screen using the navigate method from the navigation prop.

3. DetailsScreen Component

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};
Enter fullscreen mode Exit fullscreen mode

This component displays a "Details Screen" message.

4. Stack Navigator

const Stack = createStackNavigator();
Enter fullscreen mode Exit fullscreen mode

Here we create a stack navigator instance for our code.

5. App Component

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
Enter fullscreen mode Exit fullscreen mode

The App component sets up the navigation container and the stack navigator. The initialRouteName prop specifies the initial screen to display. Each Stack.Screen component defines a route, associating a name with a component.

In Conclusion
React Native simplifies mobile app development by allowing developers to use a single codebase for both iOS and Android. With core components, easy setup, and extensive documentation, it's a great choice for building high-performance mobile applications.
For further reading, check out the official React Native documentation and the React Navigation guide.

Top comments (0)

Read next

empiree profile image

How to Become a Successful Software Developer in 2024

Oleg Dubovoi -

alpira profile image

🚀 Introducing Odysseus-CLI: Simplified Deployment for Laravel, React and other Applications

alpira -

code42cate profile image

Day 18: Deploying Docker to the Cloud

Jonas Scholz -

pardnchiu profile image

QuickUI: Lightweight Frontend Framework

邱敬幃 Pardn Chiu -