Create and Setup React App For Use In Android Studio

React seems like a good idea that allows the process of coding once for multiple platforms. I was quite impressed on how fast the UI changes to code changes.

In a nutshell, the idea is that it is basically a WebView that is using Javascript to create the UI and functionality.

I had little intentions of pursuing this venture but I have recently experienced some issues with an Android API for another app. The API was released for Android and React development. I wanted to learn a bit on how to read through the React code so I could follow the breadcrumbs on my troubleshooting. The code looked fairly simple to understand so I figured I would try it and build a single app for now just as a jumping point.

Steps I Took To Setup

I didn’t have Node.js or any tools beside Android Studio already installed on my machine. The steps below are what I did starting from scratch.

I used this link as the starting point to create the environment.

https://reactnative.dev/docs/set-up-your-environment

  1. I installed Chocolatey

To install, I copied the following from their site under installation directions.

This is a Windows Powershell command. Start Powershell with Administrative Privileges.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

2. Next I installed Node.js on the system via Chocolatey with the following command. Run it with Administrative privileges.

choco install -y nodejs-lts microsoft-openjdk17

3. Next I followed a few steps from the following link

https://learn.microsoft.com/en-us/windows/dev-environment/javascript/react-native-for-android

I created a folder in my Android Studio projects directory named React. This would hold my React projects.

In Node.js CLI which was installed in above step, change working directory to the location you want. In my case it was the React folder

ch React

4. Now execute the following command to load react project into the current working directory.

npx @react-native-community/cli init
NOTE:

The link in step#3 stated to use

npx react-native init MyReactNativeApp

After execution, I was given a n error and was stated to use the first command stated, npx @react-native-community/cli init

5. Now change directory into the project folder

ch MyReactNativeApp

6. Run the following command to run the app. I am using the Android Emulator through Android Studio.

npx react-native run-android

NOTE:

I was had an issue with starting the app. Below is the error I was given.

FAILURE: Build failed with an exception.

* Where:
Settings file 'D:\Android\StudioProjects\React\MyReactNativeApp\android\settings.gradle' line: 2

* What went wrong:
Error resolving plugin [id: 'com.facebook.react.settings']

To fix this, I deleted the ./gradle directory in the projects android folder. ( This regenerates on build ).

Then I executed the following commands while inside the projects root folder.

cd android
gradlew clean
npm run android

This successfully built the project and I was ready to edit the base application file to see changes.

Test It Out

Open Android Studio and look for the file name App.tsx which is located at the root directory of the project.

The file will contain the following generated code.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

I removed all this code and added in a simple view example take from the React templates just to test functionality.

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

const HelloWorldApp = () => {
  return (
    <View
      style={{
          backgroundColor: '#22bbaa',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};
export default HelloWorldApp;

Hope this was useful in setting up your React environment and first project build.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *