This content originally appeared on DEV Community and was authored by SilvenLEAF
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
react-native-vector-icons
react-native link react-native-vector-icons
If using typescript, add this type as well
npm install @types/react-native-vector-icons
Install react native paper
npm install react-native-paper
Now import components and enjoy using :)
NEXT blog is coming by April 30th
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
This content originally appeared on DEV Community and was authored by SilvenLEAF
SilvenLEAF | Sciencx (2022-04-23T02:30:25+00:00) Create app with Pure React Native :). Retrieved from https://www.scien.cx/2022/04/23/create-app-with-pure-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.