How to code IOS react native app from windows/linux or Android app from mac book!

M Shahzaib Shoaib
Nov 6 · 2 min read

React Native is Awesome tool for Mobile Development and it’s getting better and better. You can build both android and ios from the same code.
But what if you want to test it on the same PC.

Mac is Expensive

While developing for ios i just realize this when my iphone got damaged. Before that I was using Amazing expo App which automatically compiles code to ios .

At that time I just found a magic innovation by Expo called Expo Snack.
You can try it right now by going to https://snack.expo.io/ on your computer’s web browser. What is does is amazing. It is similar to Codepen and JSFiddle which provides javascript and other languages IDE on web browser.

Chrome View

Expo Snack

Snack provides react native environment built in inside Web Browser. What you need to do is just type code and run on any simulator. There are 3 available simulators , 1) android , 2) IOS and 3) web. The way it works is amazing. It seems to be working real-time at every keystroke hit.

Bonus Features

It consists of all features which are available in Expo because it is built over it.
You can import the following third party modules which they’ve bundled with the app:
@expo/vector-icons, @expo/ex-navigation, react-router-native, react-navigation, react-native-tab-view, redux, react-redux, redux-effex, redux-logger, redux-thunk, apollo-client, react-apollo, graphql-tag, ReactNativeART, art/morph/path, base-64, date-fns, gl-mat4, hsv2rgb, immutable, lodash, pubnub, regl, seamless-immutable, socket.io-client, three, url-parse, uuid-jsvalidator.

Just import them and use. Apart from this if you want to use other libraries which provide Expo support like Native-Base, then just add it in package.json and it will be installed in your Snack:

package.json =>
“dependencies”: {
“native-base”: “^2.12.1”,
“react-native-paper”: “3.1.1”,
},

Other Features:

> Integrated ESLint support
ESLint will remained you when you make a syntax error. Just like in any other IDEs

> Save and share snacks
Hit save and share the URL with anyone. They can open the URL to preview it on their device. Just like in Codepen and JSFiddle.

> Console mode
You can see the consoles/logs from the device directly in the editor to serve your basic debugging needs. Just do a console.log in your code and it’ll appear in the logs panel.

I hope it helps you, if so please clap

Thanks

Other use full links on Snack

https://blog.expo.io/sketch-a-playground-for-react-native-16b2401f44a2
https://forums.expo.io/t/how-to-install-any-third-party-library/15489
https://reactnativecode.com/ios-emulator-react-native-windows/
https://github.com/expo/snack-web
https://stackoverflow.com/questions/56738123/react-native-use-hooks-on-snack-expo-io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade