If you have worked with frontend frameworks like VueJs, ReactJs, you could probably undestand the code written in React native. This tutorial will help you to get started with creating a mobile app in react-native with a very simple example and with minimum configuration. 

Step1: Create Expo dev account

First you'll need to create an account in expo.dev and log in. Expo is a platform that'll eases your mobile development process.

Step2: Get the Snack code ready

Open this snack example. It is a simple react-native mobile app. You would then be able to save your program to the expo account that you've recently created and logged in 

It's like codepen.io but for running React Native apps in the browser. You can write the code in snack and then save it to generate a unique url that you can share with others. You could also open the url in Expo Go app and you can see the app running in your mobile. When you change the code in the browser, it'll start reflecting in mobile as well. Here's a snapshot of what Snack Expo looks like. Here you can import from different plugins and the plugin will automatically be placed in package.json and installed so that you can use it in the code from the browser directly. This also means that you can search for a react-native code online, paste it in Snack and see the output in your mobile without having to fiddle with a lot of configuration in your development machine.

 

You can also view the changes in the web platform itself that looks like this

In order to view your newly created mobile app in your mobile device, install Expo Go and scan the QR code given in Snack under My Device

Mobile development is different from web development so you'll not have access to standard HTML tags. React native has its own set of tags that you can use. Example you can think of <Text> as a <span> or a <div> to display the text defined within it. You can also create styles and apply to those elements. It looks like the css styles that you would implement using javascript. Eg marginBottom for margin-bottom

Step 3: Download the zip file

Download as zip from the link present at top right. Now you have the code present in Snack on your local machine

Step 4: Start the build

You should already be having node installed in your system. If not then you should first install node and npx (npm install -g npx). Now change directory to the folder where you have the code and install eas-cli. EAS is expo application service provided by Expo that'll help us in creating our first mobile app.

 Before you start the build, you'll need the configuration in eas.json to generate the apk file (for Android) as follows:

{
  "cli": {
    "version": ">= 3.6.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "resourceClass": "m1-medium"
      }
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "resourceClass": "m1-medium"
      }
    },
    "production": {
      "ios": {
        "resourceClass": "m1-medium"
      },
      "android": {
        "buildType": "apk"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

Notice that I've added "buildtype": "apk" inside production.android key

cd crankie-cookie
npm install eas-cli
npx eas build

You can also change the build to use specific profile. Eg. npx eas build --profile=production. 

Once you start the build, it will first ask you to log into your Expo account from cli followed by few questions related to the build. You can also see the build progress from Expo dashboard

On completion, you'll see a Download button in the Expo dashboard which you can click to download the apk file.

Step 5: Install the app in your mobile

Email the apk file to your mobile and then you can install the app by clicking the apk file. You can also use We Transfer in order to send the download link to your mobile device.

I haven't created an ios app but you while building in Step 4, you can choose the type of output and select iOs for iOs app.