Create app with PURE React Native

Let's embark on the beautiful adventure of App Development!! Did you have enough of Expo and dying desperately for Pure React Native!! Then let's leap off!! The first and biggest challenge I've been facing while transitioning from Expo is to set up the environment for Pure React Native! So fear you not!! This time we'll kill it together!! For Pure React Native project based blogs and more stay tuned!! Coming soon!! This is a NEVER ENDING SERIES :)

Set up React Native Environment

We have to do this only one time on our machine. We need to set up our development environment.

(Refer to this link it's the BEST)
ReactNative.dev/docs/environment-setup

• [x] Install NodeJs and Java SDK
• [x] Install Android Studio
• [x] Configure ANDROID_HOME env variable
• [x] Add platform-tools to path
• [x] Create React Native App and ENJOY :)

Step 1: Install NodeJs and Java SDK

Considering you already have NodeJs installed because well we are NodeJs maniacs right? Just make sure you are using version 14 or above. I'd recommend having nvm :). Anyway, so the only thing we need to install now is the Java SDK or JDK for short.

We'll be doing it using "Chocolatey". How to install it? Refer to above link. Once done, open your powershell or cmd as an administrator and let's install JDK with this following command

choco install -y openjdk11

Once done let's install Android studio from the above mentioned link. Why? Because if installed from the above link, it'll have all our desired configurations as default.

Step 2: Adding Env and Path variables

Username=SilvenLEAF

ANDROID_HOME=C:\Users\{Username}\AppData\Local\Android\Sdk
PATH=C:\Users\{Username}\AppData\Local\Android\Sdk\platform-tools

Open Windows Control Panel > User Accounts > User Accounts > Change my environment variables

Now for ANDROID_HOME click on New and add this above mentioned key value pair

Now for PATH, click the Path variable, then click edit and then click New and add the above value.

Great now we are ready to create React Native Apps and enjoy the delicacy of developing apps :)

Step 3: Create React Native App

Type this following command to create React Native App

npx react-native init YOUR_APP_NAME --template react-native-template-typescript

It'll create your typescript react native app. Open the created app in VS Code or Android Studio (which is more or less VS Code) and enjoy developing (from here it's all like react, know the basics, google, use react-native-paper, etc etc the same old lovely loop)

Now to start the app

npm run android

OR

react-native run-android

BONUS STEP: How to run it on your physical phone

(Only for the first time) Open your phone settings and go to about phone and find the Build number section. (If not sure, google it for your model). For Realme It is in Settings > About Phone > Version > Build number.

Click on it 7 times (or keep clicking until you get the prompt) and it'll make the Developer options appear.

Go there. For real me it will appear on Settings > Additional Settings > Developer options.

After opening it select USB debugging toggle on. This will allow you to let your app hosted on your localhost of your Developing Machine (your PC or Laptop) connect to your phone.

(Whenever you want to connect your phone) Connect your phone to your Developing Machine with an USB and start your react native app

npm run android

OR

react-native run-android

It will open your app on your phone :)
Enjoy!!!

SUPER BONUS: React Native Paper

If using pure react native, first install these

npm i react-native-vector-icons

If using typescript, add this type as well

npm install -D @types/react-native-vector-icons

And then use this command

react-native link react-native-vector-icons

Install react native paper

npm install react-native-paper

Meta BONU: Toast

Install "react-native-toast-message" package

npm i react-native-toast-message

Now use its component in your App.tsx file so that we can use it in our app. So your App.tsx file will look something like this

import 'react-native-gesture-handler'; // this must be on extreme top of this file

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './NeiXin/store/store';

import RootDrawer from './NeiXin/navigation/RootDrawer';
import Toast from 'react-native-toast-message';

const App = () => {
  return (
    <Provider store={store}>
      <RootDrawer />
      <Toast />
    </Provider>
  );
};

export default App;

Giga BONUS: JSON TREE

Install this package for displaying your storage with a JSON tree

npm i react-native-json-tree

Tera BONUS: Vibration

Now import components and enjoy using :)

How to use Vibration API? First we need to allow permission for that by adding this following line to the "AndroidManifest.xml" file

<uses-permission android:name="android.permission.VIBRATE"/>

Now to use it on your app, simply import it from "react-native" and call it like this

...
import { Vibration} from 'react-native';
...
onPress = ()=>{ Vibration.vibrate(); }
...

What's NEXT?

1. Project with Pure React Native

2. More on App Development

3. How to generate apk with pure React Native

4. How to deploy to playstore

5. Insane stuff with JavaScript/TypeScript

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP with Expo

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io