Configuring React Native Android Emulator on Windows 11
First you go to GitHub and create a repo, then go to your desired folder and open that folder in CMD terminal or git bash then clone the repo into the said folder.
Video Tutorial ==> https://www.youtube.com/watch?v=oorfevovPWw
After that you need to follow the below Instructions...
1. Install NODE, Java Development Kit and Android Studio.
- While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
- Android SDK
- Android SDK Platform
- Android Virtual Device
- If you are not already using Hyper-V: Performance (Intel ® HAXM) (See here for AMD or Hyper-V)
Then, click "Next" to install all of these components.
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Android SDK Setup
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked:
- Android SDK Platform 29
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 29.0.2 is selected.
Finally, click "Apply" to download and install the Android SDK and related build tools.
3. Configure the ANDROID_HOME & JAVA_HOME environment variable.
The React Native tools require some environment variables to be set up in order to build apps with native code.
- Open the Windows Control Panel.
- Click on User Accounts, then click User Accounts again
- Click on Change my environment variables
- Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:
JAVA_HOME
C:\Program Files\Android\Android Studio\jre
Then on to the next...
4. Add platform-tools to Path.
- Open the Windows Control Panel.
- Click on User Accounts, then click User Accounts again
- Click on Change my environment variables
- Select the Path variable.
- Click Edit.
- Click New and add the path to platform-tools to the list.
The default location for this folder is:
GO TO THE USER FOLDER, (SHOW HIDDEN FILES) APP DATA, LOCAL, ANDROID, SDK, PLATFORM TOOLS FOLDER
Click the file bar and copy the file path URL similar to what is below...
%LOCALAPPDATA%\Android\Sdk\platform-tools
5. React Native CLI Creating a new application.
If you previously installed a global "react-native-cli" package, please remove it as it may cause unexpected issues.
- npm uninstall -g react-native-cli
React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
npx react-native init AwesomeProject
Next...
To create a new AVD, Select
"Create Virtual Device...",
then pick any Phone from the list and click "Next", then select the
Q API Level 29 image.
After you have created a new react-native project and METRO has started
6. Running your React Native application.
Step 1: Start Metro and Android Emulator
To start Metro, run the following inside your React Native project folder:
- npm start
starts Metro Bundler.
- npm run android
starts the created Android Emulator AVD.
Now that you have successfully run the app, let's modify it.
Open App.js in your text editor of choice and edit some lines.
Press the R key twice or select Reload from the Developer Menu (Ctrl + M) to see your changes!
That's it!
Congratulations! You've successfully run and modified your first React Native app.
ERROR 1 - Warning: License for package Android SDK Platform 29 not accepted."
Fix (for ERROR 1) - Search for "Run" on Windows, then paste this command :
cmd.exe /C"%ANDROID_HOME%\tools\bin\sdkmanager.bat --licenses"
ERROR 2 -
No Error 2 at the moment 😜
React Native Splash Screen
https://www.youtube.com/watch?v=cdNBd63H54g
https://github.com/captainIN/splashexample
Configure ESLint For React Native
If you are like me and love to keep your React Native code free of unused styles, missing PropTypes, and in general clean and organized, then read on and find out how to configure ESLint for React Native.
- Install ESLint globally
$ npm install eslint --global - Install Locally
$ npm install --save-dev eslint - Configure ESLint
$ eslint --initAnswer the configuration questions. After running this command the following eslintrc file will be created in the project root and will look like this.
- Install the following globally and locally
$ npm install eslint-plugin-react --global
$ npm install --save-dev eslint-plugin-react$ npm install eslint-plugin-react-native --global
$ npm install --save-dev eslint-plugin-react-native
Note: At this point this is a working ESLint configuration if you run $ eslint MyAwesomeFile.js the linter should run. In my case, I’m using arrow function and newer Ecma script features so I ran into errors related to this.
To fix it install babel-eslint $ npm install babel-eslint --save-dev
This is what my final .eslintrc.json file looks like.
{ "parser": "babel-eslint", "parserOptions": { "ecmaFeatures": { "jsx": true }}, "env": { "browser": true, "react-native/react-native": true }, "plugins": ["react", "react-native"], "extends": ["eslint:recommended", "plugin:react/recommended"], "rules": { "react-native/no-unused-styles": 2, "react-native/split-platform-components": 2, "react-native/no-inline-styles": 2, "react-native/no-color-literals": 2, "react-native/no-raw-text": 2, "react-native/sort-styles": [
"error",
"asc", {
"ignoreClassNames": false,
"ignoreStyleProperties": false
} ] }}
App Icon
https://appicon.co/#app-icon
https://aboutreact.com/react-native-change-app-icon/
https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=-0.05&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=circle&effects=none&name=ic_launcher_round
Fonts
https://garbagevalue.com/blog/use-custom-fonts-in-react-native
ESLint React Native
https://jqn.medium.com/configure-eslint-for-react-native-d914679e122f
https://three29.com/set-up-eslint-and-prettier-for-react-native-projects/
OTHER TIPS
To Start Up your already made project
1 - npm run android
2 - npm start
3 - npm run android
NOTE: Make sure debugger is automatically open in browser, use debugger console to console.log and see api requests.
To Reload the App
1 - Press "R" key on your key board or
2 - Press the "Reload" button shown on debugger interface in your browser.
...
And so on and so forth..... 😜
No comments:
Post a Comment