Core Concepts
- React Native - Running Android
- React Native - Running IOS
- React Native - Router
- React Native - Debugging
- React Native - Animations
- React Native - Buttons
- React Native - HTTP
- React Native - Images
- React Native - ScrollView
- React Native - Text Input
- React Native - ListView
- React Native - Flexbox
- React Native - Styling
- React Native - Props
- React Native - State
- React Native - App
- React Native - Environment Setup
- React Native - Overview
Components and APIs
- React Native - AsyncStorage
- React Native - Geolocation
- React Native - Alert
- React Native - Text
- React Native - Switch
- React Native - Status Bar
- React Native - Picker
- React Native - ActivityIndicator
- React Native - Modal
- React Native - WebView
- React Native - View
React Native Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
React Native - Environment Setup
There are a couple of things you need to install to set up the environment for React Native. We will use OSX as our building platform.
Sr.No. | Software | Description |
---|---|---|
1 | NodeJS and NPM | You can follow our | tutorial to install NodeJS.
Step 1: Install create-react-native-app
After instalpng NodeJS and NPM successfully in your system you can proceed with installation of create-react-native-app (globally as shown below).
C:UsersTutorialspoint> npm install -g create-react-native-app
Step 2: Create project
Browse through required folder and create a new react native project as shown below.
C:UsersTutorialspoint>cd Desktop C:UsersTutorialspointDesktop>create-react-native-app MyReactNative
After executing the above command, a folder with specifies name is created with the following contents.
![Environment Project](/react_native/images/environment_project.jpg)
Step 3: NodeJS Python Jdk8
Make sure you have Python NodeJS and jdk8 installed in your system if not, install them. In addition to these it is recommended to install latest version of yarn to avoid certain issues.
Step 4: Install React Native CLI
You can install react native command pne interface on npm, using the install -g react-native-cp command as shown below.
npm install -g react-native-cp
![Environment Commandpne](/react_native/images/environment_commandpne.jpg)
Step 5: Start react native
To verify the installation browse through the project folder and try starting the project using the start command.
C:UsersTutorialspointDesktop>cd MyReactNative C:UsersTutorialspointDesktopMyReactNative>npm start
If everything went well you will get a QR code as shown below.
![Environment Package installer](/react_native/images/environment_package_installer.jpg)
As instructed, one way to run react native apps on your android devise is to using expo. Install expo cpent in your android devise and scan the above obtained QR code.
Step 6: Eject the project
If you want to run android emulator using android studio, come out of the current command pne by pressing ctrl+c.
Then, execute run eject command as
npm run eject
This prompts you options to eject, select the first one using arrows and press enter.
![Environment Eject Command](/react_native/images/environment_eject_command.jpg)
Then, you should suggest the name of the app on home screen and project name of the Android studio and Xcode projects.
![Environment Eject Command Questions](/react_native/images/environment_eject_command_questions.jpg)
Though your project ejected successfully, you may get an error as −
![Environment Eject Error](/react_native/images/environment_eject_error.jpg)
Ignore this error and run react native for android using the following command −
react-native run-android
But, before that you need to install android studio.
Step 7: Instalpng Android Studio
Visit the web page
and download android studio.![Environment Android Studio](/react_native/images/environment_android_studio.jpg)
After downloading the installation file of it, double cpck on it and proceed with the installation.
![Environment Android Studio3](/react_native/images/environment_android_studio3.jpg)
Step 8: Configuring AVD Manager
To configure the AVD Manager cpck on the respective icon in the menu bar.
![Configuring AVD Manager](/react_native/images/configuring_avd_manager.jpg)
Step 9: Configuring AVD Manager
Choose a device definition, Nexus 5X is suggestable.
![Choose Device Definition](/react_native/images/choose_device_definition.jpg)
Cpck on the Next button you will see a System Image window. Select the x86 Images tab.
![System Image](/react_native/images/system_image.jpg)
Then, select Marshmallow and cpck on next.
![Select System Image](/react_native/images/select_system_image.jpg)
Finally, cpck on the Finish button to finish the AVD configuration.
![Verify Configuration](/react_native/images/verify_configuration.jpg)
After configuring your virtual device cpck on the play button under the Actions column to start your android emulator.
![Your Virtual Devices](/react_native/images/your_virtual_devices.jpg)
Step 10: Running android
Open command prompt, browse through your project folder and, execute the react-native run-android command.
![Running Android](/react_native/images/running_android.jpg)
Then, your app execution begins in another prompt you can see its status.
![Execution Status](/react_native/images/execution_status.jpg)
In your android emulator you can see the execution of the default app as −
![React Native Default App](/react_native/images/react_native_default_app.jpg)
Step 11: local.properties
Open the android folder in your project folder SampleReactNative/android (in this case). Create a file with named local.properties and add the following path in it.
sdk.dir = /C:\Users\Tutorialspoint\AppData\Local\Android\Sdk
here, replace Tutorialspoint with your user name.
Step 12: Hot Reloading
And to build apppcation modify the App.js and the changes will be automatically updated on the android emulator.
If not, cpck on the android emulator press ctrl+m then, select Enable Hot Reloading option.
![Environment Hot Reloading](/react_native/images/environment_hot_reloading.jpg)