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

  • View

  • Download

Embed Size (px)

Text of [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


    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


    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 save

    save or save-dev is important! It will save the 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


    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 users private data on iOS, like location, camera roll, contacts, etc, the application has to get the users 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 dont 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 dont see enlarge the Xcode windows),

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

    Done. But dont 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 havent 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/


    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 dont 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-

  • Run on iPhone Demo

  • Practical CameraRoll / Gallery Lib for both iOS & Android.


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

    Video Supports

    Support Automatic Linking :)


    Support Choosing Multi images in both iOS and Android

    Automatic Linking as well :)


  • Using 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


  • 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


  • 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.



  • 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.





  • 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