Cannot resize RNCamera react-native-camera

Question

I am using React native camera <RNCamera></RNCamera> in my react native project for QR scan . I am facing this problem that I cannot resize the height of the camera viewport.

I tried using flexing down the column into 3 each of 2 and then placed it in the middle, it expands itself to take a certain height size.

Also I tried setting the height in the style but it still expands to a definite size.

Heres what I did.

                <View style={{ flex: 2, }}></View>
            <View style={{ marginHorizontal: 16,flex:2 }}>
     
                    <RNCamera
                        ref={(ref) => {
                            this.camera = ref;
                        }}
                        style={{ height: newWidth }}

                        captureAudio={false}
                        type={RNCamera.Constants.Type.back}
                        flashMode={RNCamera.Constants.FlashMode.on}
                        androidCameraPermissionOptions={{
                            title: 'Permission to use camera',
                            message: 'We need your permission to use your camera',
                            buttonPositive: 'Ok',
                            buttonNegative: 'Cancel',
                        }}

                        onBarCodeRead={(barcodeText) => { this._onBarcodeRead(barcodeText); }}

                    >
                        <View style={{ flex: 2.5 }}>

                        </View>

                    </RNCamera>

             
            </View>
            <View style={{ flex: 2, }}></View>

Each of the flexes if styled with a backgroundcolor attribute, it can be seen that the flexes are working properly. But the scope of RNCamera always expands beyond the set boundaries.

Can someone guide me on how to style the RNCamera Viewport , or is it a fixed height view that cannot be changed?

Answer 1

We had similar scenario camera view was 75% of screen but image clicked from preview was full height image. We've made changes to native camera view to fix this issue. Link for changes as below. Please check if it is working in your scenario.

https://github.com/rajanshahsa/react-native-camera/pull/1/commits/439fcf4dd8c6034224770df5504fa4f1fd8bad78

<RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          captureAudio={false}
          style={Platform.OS === "ios" ? createPostStyle.previewIOS : createPostStyle.previewAndroid}
          type={RNCamera.Constants.Type.back}
          flashMode={this.state.flash}
          ratio={'4:4'}
          androidCameraPermissionOptions={{
            title: string.alert.CameraPermissionTitle,
            message: string.alert.CameraPermissionNote,
            buttonPositive: string.alert.buttonOk,
            buttonNegative: string.alert.buttonDontAllow,
          }}
        />
        
const createPostStyle = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.profileTabSelectedColor
    },
    previewIOS: {
        flexDirection: 'column',
        alignItems: 'center',
        width: Dimensions.get('window').width,
        flex:1,
        backgroundColor: colors.profileTabSelectedColor
    },
     previewAndroid: {
        flex:1 ,
        width:Dimensions.get('window').width,
        backgroundColor: colors.profileTabSelectedColor
    },
})