๐งโ๐ป Step-by-Step Guide for React Native Beginners: From Setup to Running Your First App! ๐ @chai aur code
1๏ธโฃ Installing React Native
Run the following command:
npx react-native init Awesome01
โ ๏ธ Note: The
init
command is deprecated; you'll see a message advising to usenpx @react-native-community/cli init
after Dec 30, 2024.
2๏ธโฃ Setting Up Android Development Environment ๐ค
Install Android Studio and set up the Android SDK.
Add the Android SDK path to the
local.properties
file:sdk.dir=/Users/<your-username>/Library/Android/sdk
Make sure to replace
<your-username>
with your actual username.
3๏ธโฃ Configuring Environment Variables for Android
Open your terminal and edit
.zshrc
:nano ~/.zshrc
Add the following lines:
export ANDROID_HOME=/Users/<your-username>/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools
Save and apply the changes:
source ~/.zshrc
Verify by running:
echo $ANDROID_HOME
4๏ธโฃ Running on Android Emulator or Device ๐ป
Start the Android emulator or connect your device.
Run the app using:
npx react-native run-android
5๏ธโฃ Setting Up iOS Environment ๐
Install Xcode from the App Store.
Make sure you have Ruby installed. Check the version with:
ruby --version
If you have an issue with Ruby, use RVM to manage your Ruby versions:
\curl -sSL https://get.rvm.io | bash -s stable rvm install 2.7.5 rvm use 2.7.5 --default
6๏ธโฃ Installing CocoaPods ๐
If you're running iOS, install CocoaPods:
sudo gem install cocoapods
Navigate to your iOS project directory:
cd Awesome01/ios pod install
7๏ธโฃ Running on iOS Simulator ๐ฑ
After installing all the pods, run:
npx react-native run-ios
๐ ๏ธ Troubleshooting Common Issues
Error:
SDK location not found
- Make sure
ANDROID_HOME
is set correctly andsdk.dir
is defined inlocal.properties
.
- Make sure
Error:
Installing CocoaPods failed
- Ensure you have the correct Ruby version and reinstall CocoaPods using
sudo gem install cocoapods
.
- Ensure you have the correct Ruby version and reinstall CocoaPods using
Warning about
Gemfile
Ruby version- Update the Gemfile to match your installed Ruby version (e.g.,
ruby '2.7.5'
).
- Update the Gemfile to match your installed Ruby version (e.g.,
๐ Useful Commands
Check your React Native environment setup:
npx react-native doctor
๐ That's It!
You now have your first React Native project up and running!
Feel free to reach out if you have any questions. Happy coding! ๐โจ
Subscribe to my newsletter
Read articles from Shiva Nagendra Babu Kore directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by