How to make background black of react native camera? - react-native

Question

Problem:
I have created react native camera but it is looked like this.
But the problem is the background color of camera action icons are transparent.
This is my code.
import React, {useState, useEffect} from 'react';
import {
AppRegistry,
StyleSheet,
TouchableOpacity,
View,
Image,
CameraRoll,
Platform,
} from 'react-native';
import IoniconsIcon from 'react-native-vector-icons/Ionicons';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import AppText from '_components/appText';
import {RNCamera} from 'react-native-camera';
import normalize from '_utils/fontsize';
let countRecordTime;
const PendingView = () => (
<View
style={{
flex: 1,
backgroundColor: 'lightgreen',
justifyContent: 'center',
alignItems: 'center',
}}>
<AppText>Waiting</AppText>
</View>
);
const takePicture = async (camera) => {
const options = {quality: 1};
const data = await camera.takePictureAsync(options);
console.log(data.uri);
};
const recordVideo = async (
camera,
recording,
seconds,
setRecording,
setSeconds,
) => {
if (camera) {
if (!recording) {
startRecording(recording, setRecording, seconds, setSeconds, camera);
} else {
stopRecording(camera, setSeconds);
}
}
};
const startRecording = async (
recording,
setRecording,
seconds,
setSeconds,
camera,
) => {
setRecording(true);
console.log('>>>>>> start recording seconds', seconds);
const cameraConfig = {maxDuration: 20};
const data = await camera.recordAsync(cameraConfig);
console.log('>>>>>> data', data);
setRecording(false);
};
const stopRecording = (camera, setSeconds) => {
camera.stopRecording();
setSeconds(0);
};
const secondsToMMSS = (seconds) => {
console.log('>>>>>> seconds', seconds);
let m = Math.floor(seconds / 60);
let s = Math.floor(seconds % 60);
let mDisplay = m < 10 ? `0${m}` : `${m}`;
let sDisplay = s < 10 ? `0${s}` : `${s}`;
return `${mDisplay}:${sDisplay}`;
};
const VideoRecording = (props) => {
const [type, setType] = useState(RNCamera.Constants.Type.back);
const [flashMode, setFlashMode] = useState(RNCamera.Constants.FlashMode.off);
const [recording, setRecording] = useState(false);
const [seconds, setSeconds] = useState(0);
useEffect(() => {
if (recording) {
countRecordTime = setInterval(() => setSeconds(seconds + 1), 1000);
}
if (!recording && countRecordTime) {
clearInterval(countRecordTime);
}
if (seconds === 20 && countRecordTime) {
clearInterval(countRecordTime);
setRecording(false);
}
return () => {
if (countRecordTime) {
clearInterval(countRecordTime);
}
};
}, [recording, seconds]);
return (
<View style={styles.container}>
<RNCamera
style={styles.preview}
autoFocus={RNCamera.Constants.AutoFocus.on}
type={type}
flashMode={flashMode}
faceDetectionMode={RNCamera.Constants.FaceDetection.Mode.fast}
ratio="4:3"
whiteBalance={RNCamera.Constants.WhiteBalance.auto}
captureAudio={true}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}>
{({camera, status, recordAudioPermissionStatus}) => {
if (status !== 'READY') {
return <PendingView />;
}
return (
<>
<View
style={{
flex: 0,
flexDirection: 'row',
justifyContent: 'center',
}}>
<TouchableOpacity
style={styles.capture}
onPress={(_) => {
switch (flashMode) {
case RNCamera.Constants.FlashMode.off:
setFlashMode(RNCamera.Constants.FlashMode.auto);
break;
case RNCamera.Constants.FlashMode.auto:
setFlashMode(RNCamera.Constants.FlashMode.on);
break;
case RNCamera.Constants.FlashMode.on:
setFlashMode(RNCamera.Constants.FlashMode.off);
break;
}
}}>
<Image
source={
flashMode === RNCamera.Constants.FlashMode.auto
? require('../../assets/img/flashAuto.png')
: flashMode === RNCamera.Constants.FlashMode.on
? require('../../assets/img/flashOn.png')
: require('../../assets/img/flashOff.png')
}
style={{width: 30, height: 30}}
resizeMode={'contain'}
/>
</TouchableOpacity>
{/* <TouchableOpacity
onPress={() => takePicture(camera)}
style={styles.capture}>
<Image
source={require('../../assets/img/cameraButton.png')}
style={{width: 50, height: 50}}
resizeMode={'contain'}
/>
</TouchableOpacity> */}
<TouchableOpacity
style={styles.iconContainer}
onPress={() =>
recordVideo(
camera,
recording,
seconds,
setRecording,
setSeconds,
)
}>
<EntypoIcon
style={styles.icon}
size={40}
color={recording ? 'red' : 'white'}
name="video-camera"
/>
{recording ? (
<AppText styles={styles.recordingTime}>
{secondsToMMSS(seconds)}
</AppText>
) : null}
</TouchableOpacity>
<TouchableOpacity
style={styles.capture}
onPress={(_) => {
if (type === RNCamera.Constants.Type.back) {
setType(RNCamera.Constants.Type.front);
} else {
setType(RNCamera.Constants.Type.back);
}
}}>
<Image
source={require('../../assets/img/cameraFlipIcon.png')}
style={{width: 40, height: 40}}
resizeMode={'contain'}
/>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.closeButton} onPress={() => {}}>
<IoniconsIcon
name={'ios-close'}
style={styles.closeButtonIcon}
/>
</TouchableOpacity>
</>
);
}}
</RNCamera>
</View>
);
};
export default VideoRecording;
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: 'black',
},
capture: {
flex: 0,
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20,
},
cptureView: {
backgroundColor: '#ffffff',
width: 100,
height: 100,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
marginBottom: '20%',
marginTop: '5%',
},
camIcon: {
color: '#858181',
},
iconContainer: {
justifyContent: 'center',
alignItems: 'center',
},
icon: {
marginHorizontal: 15,
// paddingVertical: 10,
},
recordingTime: {
color: 'red',
},
closeButton: {
position: 'absolute',
backgroundColor: '#aaaaaab0',
width: 50,
height: 50,
borderRadius: 25,
justifyContent: 'center',
top: Platform.OS === 'ios' ? 45 : 10,
left: 10,
},
closeButtonIcon: {
fontSize: Platform.OS === 'ios' ? 40 : 40,
fontWeight: 'bold',
alignSelf: 'center',
lineHeight: Platform.OS === 'ios' ? 58 : 40,
},
});
Can someone help me to make it black? I tried a lot to find out way to do so that. But I could not so if someone can help me it would be grateful. Thank you very much.

Answer 1

Have you try this?
...
<View
style={{
flex: 0,
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: "#000000", //-----------------Here?
}}>
<TouchableOpacity
style={styles.capture}
onPress={(_) => {
switch (flashMode) {
case RNCamera.Constants.FlashMode.off:
setFlashMode(RNCamera.Constants.FlashMode.auto);
...