99 AppState ,
1010 TouchableOpacity
1111} from 'react-native' ;
12+ import Slider from '@react-native-community/slider' ;
1213import _ from 'underscore' ;
1314import { Container , Button , Text , Icon , Footer , FooterTab , Spinner , H2 , connectStyle , Toast } from 'native-base' ;
1415import { RNCamera } from 'react-native-camera' ;
@@ -50,9 +51,18 @@ const WB_OPTIONS_MAP = {
5051 2 : "CL" ,
5152 3 : "SH" ,
5253 4 : "IN" ,
53- 5 : "FL"
54+ 5 : "FL" ,
55+ 6 : "CW"
5456}
5557
58+ const CUSTOM_WB_OPTIONS_MAP = {
59+ temperature : { label : "Temp." , min : 1000 , max : 10000 , steps : 500 } ,
60+ tint : { label : "Tint" , min : - 20 , max : 20 , steps : 0.5 } ,
61+ redGainOffset : { label : "Red" , min : - 1.0 , max : 1.0 , steps : 0.05 } ,
62+ greenGainOffset : { label : "Green" , min : - 1.0 , max : 1.0 , steps : 0.05 } ,
63+ blueGainOffset : { label : "Blue" , min : - 1.0 , max : 1.0 , steps : 0.05 } ,
64+ } ;
65+
5666const getCameraType = ( type ) => {
5767
5868 if ( type == 'AVCaptureDeviceTypeBuiltInTelephotoCamera' ) {
@@ -95,6 +105,7 @@ const styles = StyleSheet.create({
95105
96106 buttonsView : {
97107 flex : 1 ,
108+ backgroundColor : 'black' ,
98109 width : '100%' ,
99110 flexDirection : 'row' ,
100111 alignItems : 'center' ,
@@ -111,6 +122,31 @@ const styles = StyleSheet.create({
111122 ratioButton : {
112123 width : 100 * conf . theme . variables . sizeScaling
113124 } ,
125+
126+ customWBView : {
127+ backgroundColor : '#00000080' ,
128+ flex : 1 ,
129+ width : '100%' ,
130+ height : 50 ,
131+ flexDirection : 'row' ,
132+ alignItems : 'center' ,
133+ paddingHorizontal : 8 ,
134+ } ,
135+
136+ customWBViewButton : {
137+ backgroundColor : 'transparent' ,
138+ alignSelf : 'center' ,
139+ width : '25%' ,
140+ } ,
141+
142+ customWBViewText : {
143+ color : 'white' ,
144+ } ,
145+
146+ customWBViewSlider : {
147+ flex : 2 ,
148+ marginRight : 6 ,
149+ } ,
114150} )
115151
116152
@@ -120,8 +156,16 @@ const defaultCameraOptions = {
120156 flashMode : 'off' , // on, auto, off, torch
121157 wb : 0 ,
122158 zoom : 0 , // 0-1
123- focusCoords : undefined
124- }
159+ focusCoords : undefined ,
160+ currentCustomWBOption : "temperature" ,
161+ customWhiteBalance : {
162+ temperature : 6000 ,
163+ tint : 0.0 ,
164+ redGainOffset : 0.0 ,
165+ greenGainOffset : 0.0 ,
166+ blueGainOffset : 0.0 ,
167+ } ,
168+ } ;
125169
126170function parseRatio ( str ) {
127171 let [ p1 , p2 ] = str . split ( ":" ) ;
@@ -601,6 +645,35 @@ class Camera extends Component{
601645
602646 this . cameraStyle = cameraStyle ;
603647
648+ let whiteBalance ;
649+ let customWBView ;
650+ if ( wb >= WB_OPTIONS . length ) {
651+ let currentOption = this . state . currentCustomWBOption ;
652+ let currentValue = this . state . customWhiteBalance [ currentOption ] ;
653+ let options = CUSTOM_WB_OPTIONS_MAP [ currentOption ]
654+ customWBView = (
655+ < View style = { styles . customWBView } >
656+ < Button style = { styles . customWBViewButton } onPress = { this . changeCustomWBOption } >
657+ < Text style = { styles . customWBViewText } > { options . label } </ Text >
658+ </ Button >
659+ < Slider
660+ style = { styles . customWBViewSlider }
661+ value = { currentValue }
662+ step = { options . steps }
663+ minimumValue = { options . min }
664+ maximumValue = { options . max }
665+ minimumTrackTintColor = "#FFFFFF"
666+ maximumTrackTintColor = "#000000"
667+ onValueChange = { this . changeCustomWBOptionValue }
668+ />
669+ < Text style = { [ styles . customWBViewText , { minWidth : '15%' } ] } > { currentValue . toFixed ( 1 ) } </ Text >
670+ </ View >
671+ ) ;
672+ whiteBalance = this . state . customWhiteBalance ;
673+ } else {
674+ whiteBalance = WB_OPTIONS [ wb ] ;
675+ }
676+
604677 return (
605678
606679 < Container fullBlack >
@@ -638,7 +711,7 @@ class Camera extends Component{
638711 maxZoom = { MAX_ZOOM }
639712 useNativeZoom = { true }
640713 onTap = { this . onTapToFocus }
641- whiteBalance = { WB_OPTIONS [ wb ] }
714+ whiteBalance = { whiteBalance }
642715 autoFocusPointOfInterest = { this . state . focusCoords }
643716 androidCameraPermissionOptions = { {
644717 title : 'Permission to use camera' ,
@@ -701,6 +774,7 @@ class Camera extends Component{
701774 />
702775 </ View >
703776 : null }
777+ { customWBView }
704778 < View style = { styles . buttonsView } >
705779 < Button
706780 transparent
@@ -877,9 +951,28 @@ class Camera extends Component{
877951
878952
879953 changeWB = ( ) => {
954+ // The custom white balance feature is only available on iOS (#2774)
955+ const numberOfOptions = IS_IOS ? Object . keys ( WB_OPTIONS_MAP ) . length : WB_OPTIONS . length ;
956+ this . setState ( {
957+ wb : ( this . state . wb + 1 ) % numberOfOptions
958+ } ) ;
959+ }
960+
961+ changeCustomWBOption = ( ) => {
962+ const optionKeys = Object . keys ( CUSTOM_WB_OPTIONS_MAP ) ;
963+ let currentOptionIndex = optionKeys . indexOf ( this . state . currentCustomWBOption ) ;
964+ let nextOptionIndex = ( currentOptionIndex + 1 ) % optionKeys . length ;
880965 this . setState ( {
881- wb : ( this . state . wb + 1 ) % WB_OPTIONS . length
882- } )
966+ currentCustomWBOption : optionKeys [ nextOptionIndex ]
967+ } ) ;
968+ }
969+
970+ changeCustomWBOptionValue = ( value ) => {
971+ let customWhiteBalance = { ...this . state . customWhiteBalance } ;
972+ customWhiteBalance [ this . state . currentCustomWBOption ] = value ;
973+ this . setState ( {
974+ customWhiteBalance : customWhiteBalance
975+ } ) ;
883976 }
884977
885978 toggleRatio = ( ) => {
@@ -945,4 +1038,4 @@ Camera.navigationOptions = ({ navigation }) => {
9451038Camera = connectStyle ( "Branding" ) ( Camera ) ;
9461039
9471040
948- export default Camera ;
1041+ export default Camera ;
0 commit comments