Lecture 10: Native Library, Camera Roll
by Making Selfies Scoreboard App
Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited.
Important Links Source Codes
Course Materials http://www.kobkrit.com/category/programming/react-native/
Final App: Selfies Scoreboard
Two types of React Libraries React Libraries have two types
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
Use the react-native link command to link the library automatically
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.
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
$|> react-native init L10_CameraRollPicker
$|> cd L10_CameraRollPicker
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,
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
This is a very great documentation Facebook. Very great documentations
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 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)
Support Automatic Linking :)
Support Choosing Multi images in both iOS and Android
Automatic Linking as well :)
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
Return Platform information
Can check running mobile OS by using Platform.OS
ios for Apple iOS
android ofr Google Android
Without Image PickerL10_CameraRollPicker/3.js
We want to launch either Gallery or Camera directly without Image Picker.
We use the following method instead.
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.
We create 3 arrays of image file name in the state.
After user select image, make the modal visible.
Modal + Slider User Interface
Push image file name into the specific chosen-star array.
Make modal invisible
Reset the value of slider back to 3 by default.
Image displaying part.
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