๐Ÿง‘โ€๐Ÿ’ป 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 use npx @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 and sdk.dir is defined in local.properties.
  • Error: Installing CocoaPods failed

    • Ensure you have the correct Ruby version and reinstall CocoaPods using sudo gem install cocoapods.
  • Warning about Gemfile Ruby version

    • Update the Gemfile to match your installed Ruby version (e.g., ruby '2.7.5').

๐Ÿ” 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! ๐Ÿš€โœจ

1
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

Shiva Nagendra Babu Kore
Shiva Nagendra Babu Kore