feat(ios): enhanced advanced example project

- added the custom white balance feature (#2774) to the advanced example project

examples/advanced/advanced/ios/Podfile.lock

@@ -182,13 +182,15 @@ PODS:
     - React-cxxreact (= 0.61.4)
     - React-jsi (= 0.61.4)
   - React-jsinspector (0.61.4)
-  - react-native-camera (3.9.0):
+  - react-native-camera (3.28.0):
     - React
-    - react-native-camera/RCT (= 3.9.0)
-    - react-native-camera/RN (= 3.9.0)
-  - react-native-camera/RCT (3.9.0):
+    - react-native-camera/RCT (= 3.28.0)
+    - react-native-camera/RN (= 3.28.0)
+  - react-native-camera/RCT (3.28.0):
     - React
-  - react-native-camera/RN (3.9.0):
+  - react-native-camera/RN (3.28.0):
+    - React
+  - react-native-slider (3.0.0):
     - React
   - React-RCTActionSheet (0.61.4):
     - React-Core/RCTActionSheetHeaders (= 0.61.4)
@@ -247,6 +249,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-camera (from `../node_modules/react-native-camera`)
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -262,7 +265,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -296,6 +299,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-camera:
     :path: "../node_modules/react-native-camera"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -337,7 +342,8 @@ SPEC CHECKSUMS:
   React-jsi: ca921f4041505f9d5197139b2d09eeb020bb12e8
   React-jsiexecutor: 8dfb73b987afa9324e4009bdce62a18ce23d983c
   React-jsinspector: d15478d0a8ada19864aa4d1cc1c697b41b3fa92f
-  react-native-camera: 8ad12cae113fd60b07236983532acc8e595c0fc3
+  react-native-camera: 17d755c4334e77dad0ec6337faaded5274f18464
+  react-native-slider: 05f11678260cb27c3d00a2dd1558b623be3ec8d2
   React-RCTActionSheet: 7369b7c85f99b6299491333affd9f01f5a130c22
   React-RCTAnimation: d07be15b2bd1d06d89417eb0343f98ffd2b099a7
   React-RCTBlob: 8e0b23d95c9baa98f6b0e127e07666aaafd96c34
@@ -353,4 +359,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 27b3847fe4d98bb58146c377f86ebed45b40a77d
 
-COCOAPODS: 1.7.5
+COCOAPODS: 1.9.1

examples/advanced/advanced/package.json

@@ -10,14 +10,15 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/slider": "^3.0.0",
+    "native-base": "2.13.8",
     "react": "16.11.0",
     "react-native": "0.61.4",
+    "react-native-camera": "^3.28.0",
+    "react-native-gesture-handler": "1.5.0",
     "react-navigation": "4.0.10",
     "react-navigation-stack": "1.10.3",
-    "native-base": "2.13.8",
-    "react-native-gesture-handler": "1.5.0",
-    "underscore": "1.9.1",
-    "react-native-camera": "*"
+    "underscore": "1.9.1"
   },
   "devDependencies": {
     "@babel/core": "7.7.2",

examples/advanced/advanced/src/screens/Camera.js

@@ -9,6 +9,7 @@ import {
   AppState,
   TouchableOpacity
 } from 'react-native';
+import Slider from '@react-native-community/slider';
 import _ from 'underscore';
 import { Container, Button, Text, Icon, Footer, FooterTab, Spinner, H2, connectStyle, Toast } from 'native-base';
 import { RNCamera } from 'react-native-camera';
@@ -50,9 +51,18 @@ const WB_OPTIONS_MAP = {
   2: "CL",
   3: "SH",
   4: "IN",
-  5: "FL"
+  5: "FL",
+  6: "CW"
 }
 
+const CUSTOM_WB_OPTIONS_MAP = {
+  temperature:      {label: "Temp.", min: 1000, max: 10000, steps: 500},
+  tint:             {label: "Tint", min: -20, max: 20, steps: 0.5},
+  redGainOffset:    {label: "Red", min: -1.0, max: 1.0, steps: 0.05},
+  greenGainOffset:  {label: "Green", min: -1.0, max: 1.0, steps: 0.05},
+  blueGainOffset:   {label: "Blue", min: -1.0, max: 1.0, steps: 0.05},
+};
+
 const getCameraType = (type) => {
 
   if(type == 'AVCaptureDeviceTypeBuiltInTelephotoCamera'){
@@ -95,6 +105,7 @@ const styles = StyleSheet.create({
 
   buttonsView: {
     flex: 1,
+    backgroundColor: 'black',
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
@@ -111,6 +122,31 @@ const styles = StyleSheet.create({
   ratioButton: {
     width: 100 * conf.theme.variables.sizeScaling
   },
+
+  customWBView: {
+    backgroundColor: '#00000080',
+    flex: 1,
+    width: '100%',
+    height: 50,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+
+  customWBViewButton: {
+    backgroundColor: 'transparent',
+    alignSelf: 'center',
+    width: '25%',
+  },
+
+  customWBViewText: {
+    color: 'white',
+  },
+
+  customWBViewSlider: {
+    flex: 2,
+    marginRight: 6,
+  },
 })
 
 
@@ -120,8 +156,16 @@ const defaultCameraOptions = {
   flashMode: 'off', // on, auto, off, torch
   wb: 0,
   zoom: 0, // 0-1
-  focusCoords: undefined
-}
+  focusCoords: undefined,
+  currentCustomWBOption: "temperature",
+  customWhiteBalance: {
+    temperature: 6000,
+    tint: 0.0,
+    redGainOffset: 0.0,
+    greenGainOffset: 0.0,
+    blueGainOffset: 0.0,
+  },
+};
 
 function parseRatio(str){
   let [p1, p2] = str.split(":");
@@ -601,6 +645,35 @@ class Camera extends Component{
 
     this.cameraStyle = cameraStyle;
 
+    let whiteBalance;
+    let customWBView;
+    if (wb >= WB_OPTIONS.length) {
+      let currentOption = this.state.currentCustomWBOption;
+      let currentValue = this.state.customWhiteBalance[currentOption];
+      let options = CUSTOM_WB_OPTIONS_MAP[currentOption]
+      customWBView = (
+        <View style={styles.customWBView}>
+          <Button style={styles.customWBViewButton} onPress={this.changeCustomWBOption}>
+            <Text style={styles.customWBViewText}>{options.label}</Text>
+          </Button>
+          <Slider
+            style={styles.customWBViewSlider}
+            value={currentValue}
+            step={options.steps}
+            minimumValue={options.min}
+            maximumValue={options.max}
+            minimumTrackTintColor="#FFFFFF"
+            maximumTrackTintColor="#000000"
+            onValueChange={this.changeCustomWBOptionValue}
+          />
+          <Text style={[styles.customWBViewText, {minWidth: '15%'}]}>{currentValue.toFixed(1)}</Text>
+        </View>
+      );
+      whiteBalance = this.state.customWhiteBalance;
+    } else {
+      whiteBalance = WB_OPTIONS[wb];
+    }
+
     return (
 
       <Container fullBlack>
@@ -638,7 +711,7 @@ class Camera extends Component{
               maxZoom={MAX_ZOOM}
               useNativeZoom={true}
               onTap={this.onTapToFocus}
-              whiteBalance={WB_OPTIONS[wb]}
+              whiteBalance={whiteBalance}
               autoFocusPointOfInterest={this.state.focusCoords}
               androidCameraPermissionOptions={{
                 title: 'Permission to use camera',
@@ -701,6 +774,7 @@ class Camera extends Component{
                       />
                     </View>
                   : null}
+                  {customWBView}
                   <View style={styles.buttonsView}>
                     <Button
                       transparent
@@ -877,9 +951,28 @@ class Camera extends Component{
 
 
   changeWB = () => {
+    // The custom white balance feature is only available on iOS (#2774)
+    const numberOfOptions = IS_IOS ? Object.keys(WB_OPTIONS_MAP).length : WB_OPTIONS.length;
+    this.setState({
+      wb: (this.state.wb + 1) % numberOfOptions
+    });
+  }
+
+  changeCustomWBOption = () => {
+    const optionKeys = Object.keys(CUSTOM_WB_OPTIONS_MAP);
+    let currentOptionIndex = optionKeys.indexOf(this.state.currentCustomWBOption);
+    let nextOptionIndex = (currentOptionIndex + 1) % optionKeys.length;
     this.setState({
-      wb: (this.state.wb + 1) % WB_OPTIONS.length
-    })
+      currentCustomWBOption: optionKeys[nextOptionIndex]
+    });
+  }
+
+  changeCustomWBOptionValue = (value) => {
+    let customWhiteBalance = {...this.state.customWhiteBalance};
+    customWhiteBalance[this.state.currentCustomWBOption] = value;
+    this.setState({
+      customWhiteBalance: customWhiteBalance
+    });
   }
 
   toggleRatio = () => {
@@ -945,4 +1038,4 @@ Camera.navigationOptions = ({ navigation }) => {
 Camera = connectStyle("Branding")(Camera);
 
 
-export default Camera;
+export default Camera;