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 ( <View style={styles.container}></View> ) } } 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() { <RequestsLogger /> } } 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 <project-name> • Change directories into the new project (cd <project-name>) and add the realm dependency: npm install --save realm • Next, link your project to the realm native module. react-native link realm 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<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new RealmReactPackage() // add this line ); } } You’re now ready to go. To see Realm in action, replace the definition of class <project-name> with the following in App.js: 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 () => ( <View style={styles.container}> <MapView style={styles.map} initialRegion={{ // initial region set to Bileto latitude: 50.0517273, longitude: 14.4286503, latitudeDelta: 0.0922, longitudeDelta: 0.0421 } } /> </View>); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#F5FCFF" }, map: { flex: 1, } } ); 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.