Building a simple React Native app from scratch

React Native is a popular open-source framework for building hybrid mobile apps that run on both iOS and Android platforms. With the growing demand for mobile applications, React Native has become an essential tool for developers to create fast, responsive, and user-friendly apps.

Getting Started Before we dive into building a simple React Native app, make sure you have the following prerequisites installed on your computer:

• Node.js and npm
• React Native CLI

To check if you have React Native CLI installed, run the following command in your terminal:

react-native -v

If it’s not installed, you can install it by running the following command:

npm install -g react-native-cli

Creating the Project Once you have React Native CLI installed, let’s create a new project by running the following command:

react-native init MyFirstApp

This command will create a new project named “MyFirstApp” in a directory with the same name. Change into the project directory by running the following command:

cd MyFirstApp

Building the UI Now that you have a new project set up, let’s build the UI for our app. Open the “App.js” file in the “src” directory and replace the existing code with the following:

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

const App = () => {
  const [input, setInput] = useState('');

  return (
    <View style={{ padding: 50 }}>
      <TextInput
        placeholder="Enter text here"
        value={input}
        onChangeText={text => setInput(text)}
        style={{ fontSize: 18, marginBottom: 20 }}
      />
      <TouchableOpacity
        onPress={() => alert(input)}
        style={{ backgroundColor: 'lightblue', padding: 10 }}>
        <Text style={{ fontSize: 18, color: 'white' }}>Show Alert</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

This code sets up a simple UI with a text input and a button. When the button is pressed, it shows an alert with the text entered in the input.

Running the App To run the app, open a terminal window and run the following command:

react-native run-ios

If you are on a Windows or Linux machine, you can run the app on an Android emulator by running the following command:

react-native run-android

With this simple example, you have learned how to set up a new React Native project and build a basic UI. React Native provides a vast library of components and APIs that make it easier to create visually appealing and responsive apps. Whether you are a seasoned mobile developer or just starting out, React Native is a great choice for building hybrid mobile apps.