Home /Javascript frameworks, Reactnative /React Native Installation iOS and Windows : Part 1

Blog

Back to Blog

React Native Installation iOS and Windows : Part 1

Post Views: 948

React Native Installation iOS and Windows : Part 1- We often need to list youtube video of a playlist and play it in Android and IOS App . Youtube easily provide data in xml by playlist id. Here I am going to explain how to parse video xml and play video using WebView component in react native.

Page 1: React native installation process on windows and ios

IOS:

Dependencies for IOS

  1. XCODE from App Store https://developer.apple.com/xcode/
  2. Copy code from brew.sh and paste in terminal. Press Enter
  3. Node : brew install node
  4. Watchman: brew install watchman
  5. React Native CLI: npm install -g react-native-cli

Finally run command to create your project.Please open terminal and run this command:

react-native  init youtube_video
To open Simulator. Please run this command

  1.  cd youtube_video
  2. react-native run ios

Window:

Installation of Dependency for Window. It is long process

  1. Installation of Java http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
  2. Installatiion of Node Js : https://nodejs.org/en/
  3. Installtion of Android Studio : https://developer.android.com/studio/index.html
  4. Then open command prompt in window , win + r, type cmd then press enter
  5. Run command npm install -g react-native-cli
  6. Then install react native in drive where you like
  7. Type E: or C: or D: where you want to install
  8. Run command react-native init youtube_video ( or which name you like )
  9. Open android studio and click on open an existing android project
  10. Please select android folder in your youtube_video folder and click ok
  11. Open message tab in android studio and if you see any update please click on link if it is there
  12. Create virtual device:  Open Tool menu on top then android > AVD Manager
  13. Click on create virtual device select which device you want to add as i select Nexus 5 click on next then click on download button of Marshmallow
  14. On popup window you will see installation start and after finish click on finish button
  15. Then in window select Marshmallow and click on next and on next window click on finish
  16. You can see you virtual device in list , In action column click on green arrow to open it
  17. Now we need to set environment of our system
  18. Search system setting in window search then select View Advance System Setting
  19. Select Advance tab
  20. Click on Environment variables button
  21. In user variable section , please click on new button
  22. Variable name :  JAVA_HOME
  23. Variable Value: Then click on browse directory and select path where android sdk folder so click on c: > Program Files > Java > jdk1.8.0 (what is folder name of java there)
  24. click on path on user variable then click edit and click on new button and enter c:\Users\Computer\AppData\Local\Android\sdk\platform-tools
  25. to check this open any directory and type this path in top path bar you will see all files and folder of sdk folder
  26. Now open command prompt and cd your project directory path run react-native run-android and you can see your project in similator now

We are all done for window

Back to Blog
top