Learning React Native Pt. 1

You can build the native mobile application using React Native. The code you write will be in JavaScript (or TypeScript). The official website for React Native is https://reactnative.dev.

To get started, we can use React Native or framework such as Expo. React Native suggests to use Expo framework to get started with React Native. So, we are going to use Expo framework.

Before going further make sure that the development environment setup is properly by following the steps mentioned in the documentation available at this link.

Open the terminal and write following command.

npx create-expo-app@latest

This command will ask for the name of to application. You can give any name you like, e.g. hello-world. Then wait for the process to complete — the process stub the application and download the required dependencies.

Once the process is done, go inside the hello-world folder (or application) and run either on Android or iOS based on the setup you have on your computer. For example, I’ve the Android setup.

cd hello-world
npm run android

This command run the Metro, a JavaScript bundler for React Native and compile your application code to run it on the Android natively. After a few seconds, you will get a Welcome screen on the Android and there you have the React Native application.

Open the hello-world application in editor or IDE. For example, I’m using Visual Studio Code.

code .

As they suggest on the Welcome page, open app/(tabs)/index.tsx page. Don’t be overwhelmed by the existing code, files, and folders. After familiarity and practice, you’ll know all of these and even write more code than this!

Delete the code written in this index.tsx file and write the following code.

import { View, Text } from "react-native";

const Home = () => {
  return (
    <View>
      <Text>Hello, World</Text>
    </View>
  )
}

export default Home;

We have created a Home component that displays ‘Hello, World’. To display text on the screen, we need to use <Text /> component. The <View /> component is a container component. If you’re coming from web development background then consider it as <div /> tag or if you’re coming from mobile development background then consider it as UIView (for iOS) or android.view (for Android).

After you save the change, Metro compiles the changes, hot reload the application and you’ll see the Hello, World text displayed on the top-left screen! If that is the case, you just wrote the Hello, World application in React Native. Congratulation!