React Native API’S By High School Technology Services myhsts.org

Recap from Previous Session In the previous session we covered Styling including

following topic:

Issues with CSS

Inline Styles

Create Immutable style objects with Stylesheet.create

Pass styles as props

Positioning components with flexbox

Using fetch to retrieve data Using Fetch • React Native provides the Fetch API for your networking

needs. Fetch will seem familiar if you have used XMLHttpRequest or other networking APIs before. You may refer to MDN's guide on Using Fetch for additional information.

Making requests • In order to fetch content from an arbitrary URL, just pass

the URL to fetch: • fetch('https://mywebsite.com/mydata.json');

Cont.. • Fetch also takes an optional second argument that allows you to customize the

HTTP request. You may want to specify additional headers, or make a POST request: Here is the Example

Getting a user’s location and handling permissions Setup npm install --save react-native-permissions

Additional iOS setup • Using cocoaPods • Update the following line with your path to node_modules/ and add it to your podfile: • pod 'ReactNativePermissions', :path => '../node_modules/react-native-permissions‘

Using react-native link • react-native link react-native-permissions

Using manual linking • In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> • Go to node_modules ➜ react-native-permissions ➜ select ReactNativePermissions.xcodeproj • Add libReactNativePermissions.a to Build Phases -> Link Binary With Libraries

Cont..

• Using

Cont..

Accessing stored photos with CameraRoll CameraRoll

• CameraRoll provides access to the local camera roll or photo library. • On iOS, the CameraRoll API requires the RCTCameraRoll library to be linked. You can refer to Linking Libraries

(iOS) to learn more.

Permissions • The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add

the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description in Xcode.

• If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescription key in your Info.plist. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

Methods • saveToCameraRoll • getPhotos()

Adding Animation Animations • Animations are very important to create a great user experience. Stationary objects must overcome

inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

• React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

Animated API • The Animated API is designed to make it very easy to concisely express a wide variety of interesting

animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

• Animated exports four animatable component types: View, Text, Image, and ScrollView, but you can also create your own using Animated.createAnimatedComponent().

Cont.. • For example, a container view that fades in when it is mounted may look like

this:

import React from 'react'; • import { Animated, Text, View } from 'react-native';

• class FadeInView extends React.Component { • state = { • fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 • }

• componentDidMount() { • Animated.timing( // Animate over time • this.state.fadeAnim, // The animated value to drive • { • toValue: 1, // Animate to opacity: 1 (opaque) • duration: 10000, // Make it take a while • } • ).start(); // Starts the animation • }

• render() { • let { fadeAnim } = this.state;

• return ( • <Animated.View // Special animatable View • style={{ • ...this.props.style,

• opacity: fadeAnim, // Bind opacity to animated value • }} • > • {this.props.children} • </Animated.View> • ); • } • }

• // You can then use your `FadeInView` in place of a `View` in your

components: • export default class App extends React.Component { • render() { • return ( • <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> • <FadeInView style={{width: 250, height: 50, backgroundColor:

'powderblue'}}> • <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading

in</Text> • </FadeInView> • </View> • ) • } • }

Cont.. • Let's break down what's happening in the previous slide examaple • In the FadeInView constructor, a new Animated.Value called fadeAnim is

initialized as part of state. The opacity property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.

• When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnimanimated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.

• This is done in an optimized way that is faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.

Looking Forward

In the next session we will cover the chapter Deployment including following topic:

• Deploying to Apple App Store

Thank You By High School Technology Services myhsts.org