Lecture 10: Native Library, Camera Roll by Making Selfies Scoreboard App

1. Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com
http://www.kobkrit.com

2. Final App: Selfies
Scoreboard

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

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

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

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

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

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

9. Simple Camera Roll App

10. Initialize Project
• $|> react-native init --version="0.36.0"
L10_CameraRollPicker
• $|> cd L10_CameraRollPicker

11. Project Setup
• To use camera roll, we need to do these two steps.
1. Declare photo library usage
2. Link the RCTCameraRoll Library

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

13. 1. Click Project Name 2. Click Info

14. 3. Click (+) button anywhere in
Custom iOS Target Properties
4. Choose
Privacy - Photo Library Usage
Description

15. 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”.

16. 6. Click (+) button anywhere in
Custom iOS Target Properties
7. Choose
Privacy - Camera Usage
Description

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

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

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

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

21. Linking the RCTCameraRoll #3
< What we should see

22. Linking the RCTCameraRoll #4
1. Click Project Name 2. Click Build Phases

23. Linking the RCTCameraRoll #5
3. Click at little triangle at “Link Binary with Libraries”
4. Click +

24. Linking the RCTCameraRoll #6
5. Choose libRCTCameraRoll.a and Click “Add”
Done. Close the Xcode.

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

26. ImagePickerIOS
https://facebook.github.io/react-native/docs/
imagepickerios.html
This is a very great
documentation Facebook.
Very great documentations

27. L10_CameraRollPicker/1.js

28. L10_CameraRollPicker/1.js

29. ImagePickerIOS

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

31. 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/

32. Change Run Scheme to
Production
• Press Command-Shift-< or Menu Bar Product >
Scheme > Edit Scheme
• Change Run Building Configuration to “Release”

33. Run on iPhone
• Select devices to run to your iphone.
• Press Play Button

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

35. Run on iPhone Demo

36. 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 :)

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

38. Add Permission for Android
• You need to add the following permission in
android/app/src/main/AndroidManifest.xml

39. React-Native-Image-Picker
L10_CameraRollPicker/2.js

40. L10_CameraRollPicker/2.js

41. Callback Response
L10_CameraRollPicker/2.js

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

43. iOS
L10_CameraRollPicker/2.js

44. Android
L10_CameraRollPicker/2.js

45. Without Image Picker
L10_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

46. L10_CameraRollPicker/3.js

47. L10_CameraRollPicker/3.js

48. L10_CameraRollPicker/3.js

49. Selfies Scoreboard

50. Modal
• A simple way to
present content above
an enclosing view.
• Can set its visibility via
visible props.

51. Slider
• A component used to
select a single value
from a range of values.
• Props
• maximumValue
• minimumValue
• step

52. L10_CameraRollPicker/4.js
We create 3 arrays of image file name in the state.

53. L10_CameraRollPicker/4.js
After user select image, make the modal visible.

54. L10_CameraRollPicker/4.js
Modal + Slider User Interface

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

56. L10_CameraRollPicker/4.js
Image displaying part.

57. Selfies Scoreboard
L10_CameraRollPicker/4.js

58. 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?