Getting Started with React Native and Expo

React Native has revolutionized cross-platform mobile development allowing developers to build applications for both IOS and Android using Javascript and Expo. Expo has really made it easier for new people to get into React Native, coming from a Javascript or React background you are able to jump into React Native and in this article that is what we will be looking at

What is React Native?

React Native is an open-source mobile application development framework created by Facebook. It allows you to build mobile apps for both iOS and Android using a single codebase.

What is Expo?

Expo is a framework that makes developing Android and iOS apps easier. It is built around React Native enabling you to build faster and deploy quickly desktop, mobile and web applications using Javascript or Typescript

Setting Up Your Development Environment

First install Node Js into your machine. Different computers have different configurations of installing node

Install Java JDK it is recommended to install Java JDK 17 for Android runtime

After installing those two you also need to install Android Studi where you will configure the emulator you will use. In this article we will use Expo GO which you only need to install on your device and scan a QR code to see your app

After installing you are ready to build your application. We will head on to our terminal and use the following command

npx create-expo-app@latest

Then we go to the folder

d RN_Learning 

Then run our first application

npx expo start

For more in-depth installation check the React Native Documentation

Run on your device or simulator

On your device scan the QR code and follow the steps shown in the screenshot below

Understanding the Project Structure

• index.tsx: This is the main component of your app.
• app.json: Contains configuration for your Expo project.
• package.json: Lists your project dependencies and scripts.

Your First React Native Component

Open index.tsx and replace its content with the following:

import { Image, Platform, StyleSheet } from 'react-native';

import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';

export default function HomeScreen() {
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={
        <Image
          source={require('@/assets/images/partial-react-logo.png')}
          style={styles.reactLogo}
        />
      }>
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">Welcome! From Kodaschool</ThemedText>
        <HelloWave />
      </ThemedView>
      <ThemedView style={styles.stepContainer}>
        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
        <ThemedText>
          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
          Press{' '}
          <ThemedText type="defaultSemiBold">
            {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
          </ThemedText>{' '}
          to open developer tools.
        </ThemedText>
      </ThemedView>
      <ThemedView style={styles.stepContainer}>
        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
        <ThemedText>
          Tap the Explore tab to learn more about what's included in this starter app.
        </ThemedText>
      </ThemedView>
      <ThemedView style={styles.stepContainer}>
        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
        <ThemedText>
          When you're ready, run{' '}
          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
        </ThemedText>
      </ThemedView>
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});

This code creates a simple screen with a title and a few components

Key Concepts

• Components: In React Native, you build your UI using components. The View component is like a div in web development and Text is used for displaying text.
• StyleSheet: React Native uses JavaScript objects for styling. The StyleSheet.create method is used to create an optimized style object.
• Flex Layout: React Native uses Flexbox for layout. The flex: 1 in the container style makes it take up all available space.

Adding Interactivity

Let's add a button to our app:

 <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">Welcome! From Kodaschool</ThemedText>
        <HelloWave />
        <Button  
        title="Learn More"
        color="#841584"
        />
      </ThemedView>

Whoop. You just added your first button and you are already set to become a React Native developer.

If you have noticed there are two properties that we have added to our button components

• Title: The text going inside the button
• color: The colour of the button

We are going to discuss even more topics and you are free to head over to the react native documentation and start learning

https://reactnative.dev/docs/button