[React-Native Tutorial 10] Camera Roll / Gallery / Camera / Native Modules by Making Selfies...

Lecture 10: Native Library, Camera Roll

by Making Selfies Scoreboard App

Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited.

kobkrit@gmail.com http://www.kobkrit.com

Important Links• Source Codes

https://github.com/kobkrit/learn-react-native

• Course Materials http://www.kobkrit.com/category/programming/react-native/

• Score Announcementhttp://bit.ly/its484quizscore

• Facebook Grouphttps://web.facebook.com/groups/ReactNativeThai/

Final App: Selfies Scoreboard

Two types of React Libraries• React Libraries have two types

• Pure JavaScript, and you only need to require it to use.

• Non-pure JavaScript (Native Library), the JavaScript library that rely on some native code.

• You have to include those native codes into the app.

• Otherwise, the app will throw an error as soon as you try to use the library.

Linking with Native Library

• Why?

• Not every app uses all the native capabilities

• Including the code to support all those features would impact the binary size.

• It is easy to add these features whenever you need them.

Two approaches in Native Library Linking

• Automatic Linking

• Use the react-native link command to link the library automatically

• Manual Linking

• Open Xcode project and/or Android Studio project to add the native library by your self.

Automatic Linking #1• Like in the previous lecture “Map”, react-native-

map is a native library and we use the automatic linking approach.

• Step 1. Install a library

• $|> npm install <native-library> —save

• —save or —save-dev is important! It will save the <native-library> into package.json file. React Native will link your lib based on dependencies and and devDependencies in your package.json file.

Automatic Linking #2

• Step 2. Link your native dependencies.

• $|> react-native link

• Done!

• All libraries with a native dependencies should be successfully linked to your iOS/Android project.

Manual Linkings

• We will do it today with the native library comes with the react-native for opening the Camera Roll. It is called the RCTCameraRoll Library.

• RCT is stand for ReaCT.

Simple Camera Roll App

Initialize Project

• $|> react-native init L10_CameraRollPicker

• $|> cd L10_CameraRollPicker

Project Setup

• To use camera roll, we need to do these two steps.

1. Declare photo library usage

2. Link the RCTCameraRoll Library

Photo Library / Camera Usage Declaration

• In order to access user’s private data on iOS, like location, camera roll, contacts, etc, the application has to get the user’s permission.

• To use the camera roll, Privacy - Photo Library Usage Description, or NSPhotoLibraryUsageDescription and Privacy Camera Usage Description or NSCameraUsageDecscription, should be set.

• Open the Xcode project $|> open ios/L10_CameraRollPicker.xcodeproj

1. Click Project Name 2. Click Info

3. Click (+) button anywhere in Custom iOS Target Properties

4. Choose Privacy - Photo Library Usage Description

5. Write down the reason of accessing CameraRoll at the Value box (If you don’t see enlarge the Xcode windows),

e.g., “We need to access your photos”.

6. Click (+) button anywhere in Custom iOS Target Properties

7. Choose Privacy - Camera Usage Description

8. Write down the reason of accessing Camera at the Value box (If you don’t see enlarge the Xcode windows),

e.g., “We need to access your camera”.

Done. But don’t close the Xcode yet.

Link the RCTCameraRoll Manually

• React Native, by default, not included the RCTCameraRoll into the project.

• We need to include it by yourself.

• React native provides the ImagePickerIOS UI interface for picking image in iOS, which we are going to use it, it needs RCTCameraRoll.

• React native haven’t give the ImagePicker UI for Android yet. We need to use the external library, which we will use it soon.

Linking the RCTCameraRoll #1 • Open finder for the

location of the RCTCameraRoll

• $|> open node_modules/react-native/Libraries/CameraRoll

• In Xcode windows, in L10_CameraRollPicker project, expand the icon at Libraries.

Linking the RCTCameraRoll #2Drag the RCTCameraRoll.xcodeproj to Libraries in Xcode

Linking the RCTCameraRoll #3

< What we should see

Linking the RCTCameraRoll #41. Click Project Name 2. Click Build Phases

Linking the RCTCameraRoll #53. Click at little triangle at “Link Binary with Libraries”

4. Click +

Linking the RCTCameraRoll #65. Choose libRCTCameraRoll.a and Click “Add”

Done. Close the Xcode.

App Programming• We are going to use ImagePickerIOS to choose a image,

either from.

• Using openSelectDialog() to choose the image from Gallery.

• Using openCameraDialog() to open a camera and make a new photo.

• And display the chosen picture on the app!

• Open atom or your favorite IDE

• $|> atom index.ios.js

ImagePickerIOShttps://facebook.github.io/react-native/docs/

imagepickerios.html

This is a very great documentation Facebook. Very great documentations

L10_CameraRollPicker/1.js

L10_CameraRollPicker/1.js

ImagePickerIOS

Simulator vs Real iPhone

• In simulator, they don’t have camera, thus when we tapped “Open from Camera”, it will have the red screen of death.

• “Open from Gallery” works fine.

For those, who have iPhone.

• Want to run on the real iPhone? Here is the how?

• Connect iPhone into Computer via USB cable.

• Open Xcode

• $|> open ios/L10_CameraRollPicker.xcodeproj/

Change Run Scheme to Production

• Press Command-Shift-< or Menu Bar Product > Scheme > Edit Scheme

• Change Run Building Configuration to “Release”

Run on iPhone• Select devices to run to your iphone.

• Press Play Button

When move back to Simulator• Only when in “Debug” Scheme, React-Native can

re-build their app.

• Open Edit Scheme Again (Command-Shift-<) and change back to Debug.

Run on iPhone Demo

Practical CameraRoll / Gallery Lib for both iOS & Android.

• https://github.com/marcshilling/react-native-image-picker

• Very similar to ImagePickIOS, but can open Camera Roll / Gallery (Android) / Camera (iOS+Android)

• Video Supports

• Support Automatic Linking :)

• https://github.com/ivpusic/react-native-image-crop-picker

• Support Choosing Multi images in both iOS and Android

• Automatic Linking as well :)

Using React-Native-Image-Picker

• https://github.com/marcshilling/react-native-image-picker

• Installation (Automatic Linking) :)

• $|> npm install react-native-image-picker --save

• $|> react-native link

Add Permission for Android• You need to add the following permission in

android/app/src/main/AndroidManifest.xml

React-Native-Image-PickerL10_CameraRollPicker/2.js

L10_CameraRollPicker/2.js

Callback ResponseL10_CameraRollPicker/2.js

Platform

• Return Platform information

• Can check running mobile OS by using Platform.OS

• “ios” for Apple iOS

• “android” ofr Google Android

L10_CameraRollPicker/2.js

iOSL10_CameraRollPicker/2.js

AndroidL10_CameraRollPicker/2.js

Without Image PickerL10_CameraRollPicker/3.js

• We want to launch either Gallery or Camera directly without Image Picker.

• We use the following method instead.

https://github.com/marcshilling/react-native-image-picker

L10_CameraRollPicker/3.js

L10_CameraRollPicker/3.js

L10_CameraRollPicker/3.js

Selfies Scoreboard

Modal

• A simple way to present content above an enclosing view.

• Can set its visibility via visible props.

Slider• A component used to

select a single value from a range of values.

• Props

• maximumValue

• minimumValue

• step

L10_CameraRollPicker/4.js

We create 3 arrays of image file name in the state.

L10_CameraRollPicker/4.js

After user select image, make the modal visible.

L10_CameraRollPicker/4.js

Modal + Slider User Interface

L10_CameraRollPicker/4.js

• Push image file name into the specific chosen-star array.

• Make modal invisible

• Reset the value of slider back to 3 by default.

L10_CameraRollPicker/4.js

Image displaying part.

Selfies ScoreboardL10_CameraRollPicker/4.js

Homework• Make the picture in the list as the button, tap to

view it in fullscreen.

• If we push a lot of image, some of images will placed outer the phone screen. How can we scroll it to see all of images? Scroll View?

• When the app is killed, all data is gone. How to save them permanently? AsyncStorage?

Q/A