React Native Tips - building cross-device apps on a single codebasesteemCreated with Sketch.

in #programming9 years ago (edited)

mandala_avitar.png

React and React Native being very different animals, I wanted to point out not to confuse one for the other;
they have completely different widget libraries, tooling and ecosystems.

One thing they do share, is they are both from Facebook, and they both use the same CLI application.

Much as been written about React. Far less so, about React Native, so here are my notes, almost straight out of my personal notebook:

I found the Expo(nent) is a great FREE tool for building, and sharing apps that are under development.
It does require installing the client app on IOs or Android, then loading the app from a URL.

Then, using CodePush, the rest of an app can be installed, and updates can be installed, all outside of the app stores. Not sure there is any commercial side to this, but it is a boon for developers and casual sharing of prototypes.

IDE for development:

EXPONENT, or EXPO:
"we handle builds for you when you want to ship to the app store, before that you can just use the Exponent client".

https://expo.io/

https://docs.expo.io/versions/v14.0.0/index.html
https://docs.expo.io/versions/v14.0.0/introduction/installation.html#installation XDE installation docs
https://expo.io/@geekyants/nativebase-kitchenSink Ksink brought to life fast on Expo
https://docs.expo.io/versions/v14.0.0/guides/up-and-running.html#up-and-running Up and Running docs

The second option is to publish your project using Expo:

Anyone with the Expo app can then open your project if they have the URL for it.
This option is free and is wonderful for sharing your project outside of the app stores! App stores and URL distribution can both be used too.

KEEP YOUR USERS IN SYNC ON THE SAME VERSION:

CodePush: used GitHub account to sign in

https://github.com/Microsoft/react-native-code-push
https://microsoft.github.io/code-push/

GETTING STARTED:

React Native Starter Kit: (NSK)

https://strapmobile.com/
http://startreact.com/themes/native-starter/
https://strapmobile.com/docs/native-starter-pro/v5.2.0/guide/basics Docs

NATIVEBASE:

  • NativeElements is really cool too!

Great widget library for RN

https://github.com/react-native-community/react-native-elements

Shoutem UI is also great!

http://nativebase.io/
http://nativebase.io/docs/v2.0.0/ NB Docs
https://github.com/GeekyAnts/NativeBase-KitchenSink KSink App on github

REACT NATIVE EXPRESS - Get moving in RN FAST!

http://www.reactnativeexpress.com/
http://www.reactnativeexpress.com/shoutem_ui

Recommends the following boilerplates:

Ignite - 4,82 stars
Pepperoni App Kit - 3,210 stars
Snowflake - 3,74 stars

GET the NSK working:

Globally installed node >= 4
Globally installed npm >= 3
Install React Native NOTE: long arduous task, hope to bypass with EXPO
https://facebook.github.io/react-native/docs/getting-started.html

Before installing NativeBase, make sure you have installed React Native CLI in your system.
Install NativeBase.
VS (try this first)

Globally installed node >= 4.0 node -v
Globally installed npm >= 3.0 nmp -v
Globally installed rnpm (only if React Native version <0.29)
Globally installed react-native CLI v 2.0.1
Install CodePush globally and get keys for your app https://microsoft.github.io/code-push/

WIDGETS:

Toaster
https://libraries.io/npm/react-native/dependents?page=25

NPM projects using React Native - listing
https://libraries.io/npm/react-native/dependents?page=25

React Native Hacker News:
https://news.ycombinator.com/item?id=12583224

NativeBase: seems like a "Proxy" in many ways. Fills in what is usually left to do on each device natively. Includes some basic UI native widgets.

WIFI:
A react-native implementation for viewing and connecting to Wifi networks on Android devices.

https://libraries.io/npm/react-native-android-wifi (there are several others for Android)

Regarding IOs functionality for Wifi info:

Android only. Programatically connecting to WiFi networks on iOS is not possible. You should show instructions telling your user to connect manually.

Bluetooth:

Android: I see at least 2 existing libs for Android Bluetooth connections with docs
https://www.npmjs.com/package/react-native-bluetooth-serial

IOs: here is a contrib library that works for both
https://github.com/Polidea/react-native-ble-plx

React TESTING:

TestUtils is built into React.

Jest is a test runner, based on Jasmine, author finds it hard to use, lots of undefined messages, no multi-browser support

We can use Karma as our test runner instead.
And Mocha as a "testing framework".

Sort:  

Thank you!! Super knowledgeable and helpful! :) If you get the chance you should upvote my latest post about altcoins blowing up! Thanks! :) https://steemit.com/cryptocurrency/@parkermorris/steemit-vlog-3-altcoins-will-blow-up

so helpfull! :D

Coin Marketplace

STEEM 0.05
TRX 0.33
JST 0.079
BTC 63953.57
ETH 1690.68
USDT 1.00
SBD 0.42