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
- 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.
Leave a Reply