Displaying a custom button on camera view using React Native - camera

Question

Is there any way to stick a custom button on the camera view to allow a user to perform some action?
Note:- i am using react-native-image-picker library to pick an image.

Answer 1

You can position an absolute View over the RNCamera view, and put all of your content into that absolute view. For example:
import { RNCamera } from 'react-native-camera';
class TakePicture extends Component {
takePicture = async () => {
try {
const data = await this.camera.takePictureAsync();
console.log('Path to image: ' + data.uri);
} catch (err) {
// console.log('err: ', err);
}
};
render() {
return (
<View style={styles.container}>
<RNCamera
ref={cam => {
this.camera = cam;
}}
style={styles.preview}
>
<View style={styles.captureContainer}>
<TouchableOpacity style={styles.captureBtn} onPress={this.takePicture}>
<Icon style={styles.iconCamera}>camera</Icon>
<Text>Take Photo</Text>
</TouchableOpacity>
</View>
</RNCamera>
<View style={styles.space} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'relative'
},
captueContainer: {
position: 'absolute'
bottom: 0,
},
captureBtn: {
backgroundColor: 'red'
}
});
This is just an example. You will have to play with css properties to reach the desired layout.

Answer 2

simply add this to your code, remember it should be placed inside, it will make a stylish button with shadow.
<RNCamera> </RNCamera>
<RNCamera>
<View style={{position: 'absolute',
bottom: "50%",
right: "30%",}}>
<TouchableOpacity
style={{
borderWidth:1,
borderColor:'#4f83cc',
alignItems:'center',
justifyContent:'center',
width:"180%",
height:"180%",
backgroundColor:'#fff',
borderRadius:100,
shadowOpacity:1,
shadowRadius:1,
shadowColor:"#414685",
shadowOffset: {
width: 1,
height: 5.5,
},
elevation: 6,
}}
onPress={()=>{Alert.alert('hellowworld')}}
>
<Text>hello World</Text>
</TouchableOpacity>
</View>
</RNCamera>
here you can see the output, it will be on the top of the camera.