Going deeper with React Native By High School Technology Services myhsts.org Recap from Previous Session In the previous session we covered the chapter Developing your UI with JSX including following topics • Adding controls to your UI • Buttons and Text Labels • Styling - in JavaScript • Interactive Design • Creating custom Components • Properties (props) • Managing State • Populating and Manipulating Lists • Using open source (NPM)
Dynamic properties(stylesheet) Intro • A dynamic stylesheet for react native, support typescript. • npm install react-native-dynamic-stylesheet --save
• How to use • Just like react stylesheet, but need use build to generate stylesheet after use createmethod. import DynamicStyleSheet from 'react-native-dynamic-stylesheet' const styles = DynamicStyleSheet.create({ container: { flex: 1 } }).build() class Example extends React.Component { render () { return (
Cont.. • Usage 1. platform specific styles import { StyleSheet } from 'react-native' import DynamicStyleSheet from 'react-native-dynamic-stylesheet' const RNStyles = StyleSheet.create({ container: { ...Platform.select({ android: { flex: 1 }, ios: { flex: 2 } }) } })
// is same const styles = DynamicStyleSheet.create({ container: { android: { flex: 1 }, ios: { flex: 2, } } }).build()
• Then when application running at android device, container style flex will be 2, ios container style flex will be 1. • Do not need write Platform.select anymore.
Dynamic Styles • You can pass props at build method. import { StyleSheet } from 'react-native' import DynamicStyleSheet from 'react-native-dynamic-stylesheet' const RNStyles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#ffffff' } })
// build styles const styles = DynamicStyleSheet.create({ container: props => ({ flex: 1, ...props.isTrue ? { backgroundColor: '#ffffff' } : {} }) }).build({ isTrue: true })
Network Requests • Networking in React Native Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server. Here we will see the example of simple network request in react native. • Install npm install --save react-native-requests-logger
Cont..
Usage import React, {Component} from 'react'; import {AppRegistry} from 'react-native'; import {logRequests} from 'react-native-requests-logger'; class App extends Component { constructor() { super();
logRequests(); // Your app constructor code }
render() { // Your app render code } }
Or use it as a component import React, {Component} from 'react'; import {AppRegistry} from 'react-native'; import RequestsLogger from 'react-native-requests-logger'; class App extends Component { render() {
Navigation • React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.
• If you're already familiar with React Native then you'll be able to get moving with React Navigation quickly!
• What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation. Cont.. • React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives. Cont.. • Installation Install the react-navigation package in your React Native project.
yarn add react-navigation # or with npm # npm install --save react-navigation
• Next, install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise:
yarn add react-native-gesture-handler # or with npm # npm install --save react-native-gesture-handler
• Link all native dependencies: react-native link react-native-gesture-handler
• And you are ready to go for your react native navigation Storing Data- Realm for React Native • What is Realm Realm is a full database for mobile app developers, one that uses native JavaScript objects that are dynamically mapped to a full, custom database engine (not just a key-value store). This allows you to provide a simple API while preserving performance. With Realm, you can model complex data, link objects in a graph, and compose advanced queries. Continue.. Perequisites • Make sure your environment is set up to run React Native applications. • Apps using Realm can target both iOS and Android. • React Native 0.31.0 and later is supported.
Installation • Create a new React Native project: react-native init
Continue.. • Warning for Android: Depending on the version, react-native link may generate an invalid configuration, updating Gradle correctly (android/settings.gradle and android/app/build.gradle) but failing to add the Realm module. Confirm that react-native link has added the Realm module; if it has not, link manually to the library with the following steps:
1) Add the following lines to android/settings.gradle: include ':realm' project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android') 2) Add Realm to dependencies in android/app/build.gradle: // When using Android Gradle plugin 3.0 or higher dependencies { implementation project(':realm') }
// When using Android Gradle plugin lower than 3.0 dependencies { compile project(':realm') }
3) Add the import and link the package in MainApplication.java: import io.realm.react.RealmReactPackage; // add this import Cont.. public class MainApplication extends Application implements ReactApplication { @Override protected List
Integrating with Map APIs • Integrating with Map APIs Now is the time to install react-native-maps. Use the yarn add-react-native-maps or npm install react- native-maps command to run the map package installation. Once the installation is complete, you can not link the package with the help of react- native link react-native-maps.
Cont.. • Android Integration First we need to add android implementation to android/app/build.gradle Cont.. • Next we add including package to android/settings.gradle Cont.. • Now we must add api key to android manifest at android/app/src/main/AndroidManifest.xml. For getting Google Api key, if you do not already have it, follow steps from next part. Cont.. • Last step for running Goole maps on android is to add import and initialize map in MainApplication.java placed in android/app/src/main/java/com/mapexample/MainApplication.java. mapexample change to your project name. Cont.. • Next we need to upgrade gradle for build our app. So open android/gradle/wrapper/gradle- wrapper.properties and update it like this. Cont.. • The last configuration step is to add the Maven google address in android/build.gradle • Add } } } at end of code Cont.. • Get Google API key
1) open Maps platform 2) click to button get started 3) check Maps option 4) choose option create new project 5) fill project name, for me is MapExample 6) you’ll be prompted to create a payment account (foolish new Google terms) — however, you get a free credit 7) after entering all your payment information (pretty annoying) you will get your free account 8) after that you finally get api key, which you can paste to android/app/src/main/AndroidManifest.xml instead of _YOUR_API_KEY_
Now we have our api key and we can run our application. It’s worth mentioning that google has about 5 minutes to activate of all SDKs
Cont.. • Run and show the Map!! Run the application with our familiar react-native run-android command (the first time building takes 5 to 8 minutes). We will still be able to see the initial screen as when we first launched the app. We will modify the App.jsfile in the root of our application as following snippet.
import React, { Component } from "react"; import { StyleSheet, View } from "react-native"; import MapView from "react-native-maps";
export default () => (
Cont.. • Now just fire our familiar command react-native run-android and … Native React Components • React Native provides a number of built-in components. If you're not sure where to get started, take a look at the following categories: 1) Basic Components 2) User Interface 3) List Views 4) iOS-specific 5) Android-specific 6) Others
Cont.. • Basic Components Most apps will end up using one of these basic components. You'll want to get yourself familiarized with all of these if you're new to React Native.
Cont.. • User Interface Render common user interface controls on any platform using the following components.
Cont.. • List Views Unlike the more generic ScrollView, the following list view components only render elements that are currently showing on the screen. This makes them a great choice for displaying long lists of data.
Cont.. • Android Components and APIs Many of the following components provide wrappers for commonly used Android classes.
Cont.. • Other Components These components may come in handy for certain applications.
How to share code effectively between iOS and Android • One of the (many) advantages of writing an app with React Native is that you can write a mobile app for both iOS and Android from the same codebase. Something that, as designers and developers • Ideally we could share 100% of the code between iOS and Android but at times this just doesn’t work… so how can we do it? React Native makes it very easy by providing an easy to use API. So, Lets look at the code example on next slide
Cont.. • Setup • We’ll use the same React Native project structure. Let’s get set up… 1)react-native init CodeSharing 2)cd CodeSharing 3)mkdir app && cd app/ 4)mkdir components/ && touch index.js
Cont.. • Then in index.js add this code: Cont.. • Last part of our setup is to use app/index.js for both iOS and Android. This is our first step is code sharing. So for both index.ios.js and index.android.js change the files to Cont.. • So, even within setup you can see what code sharing starts to look like! Each platform has their own entry file and we want to share this initial screen. Okay, let’s jump into the real stuff now. Platform.OS • Let’s leverage a simple piece of the Platform API by showing a tab bar on the bottom of the screen for iOS and the top of the screen for Android. They differentiate more than just where the tab bar is located but this will serve as a good example. • We’ll be using react-native-tabs so first we need to install it: npm install --save react-native-tabs. • Then in app/index.js let’s add a tab bar and basic styles.
Cont.. • You will see this screen. Cont.. • Okay, both of the interfaces look exactly the same now. Let’s bump that tab bar to the top when the platform is Android. Cont.. • Boom! Our toolbar now sits on the top of the screen when a user is on Android.(Press f5 for full screen and see gif. Cont.. • Platform Specific Components Okay, that’s great but what if you need to write a platform specific component? Since this is a tutorial and I want to keep it short I’m going to build some buttons. Extremely simple example but it should illustrate the point!
• Our buttons will work like so. On iOS the button will be sit just below the text stating which “page” we’re on. On Android it will sit at the bottom right of the screen. The common piece of this will be that the button stores in it’s state whether it is “pressed” or not.
Cont.. • First let’s install react-mixin so we can have mixin support while still using ES6. • npm install --save react-mixin@2 • The button.common.js file simply handles the state for this component.
Cont.. • For both iOS and Android we’re going to import react-mixin and our ButtonCommon logic that handles our state - something important to our iOS and Android version of the button. • Then, depending on the pressed state, we’ll either show a colored button or a more neutral button. • //app/components/button.ios.js
Cont.. • //app/components/button.android.js
Cont.. • Lastly we’ll import our button and use it on the main page. You don’t need to specify the extension - React Native will determine which component to pull in depending on the platform. Cont.. • And there you have it! This is obviously an extremely simple example and you could probably write it more succinctly(Press f5 for full screen and see gif) Looking Forward In the next session we will cover the chapter Deployment including following topic: . Deploying to Android Play Store
Thank You By High School Technology Services myhsts.org