How to add a frame border to the camera?

Question

I need to add a square frame in the middle of the viewfinder to adjust my own camera view. The repository also has no information about this. Questions are also not answered.

Answer 1

Which module are you using? react-native-camera or react-native-camera-kit ?

If you use react-native-camera , just place the View (or Image ) inside the Camera component, then add styles to vertically and horizontally align this view.

Like this:

 const styles = { container: { flex: 1, }, camera: { flex: 1, // These below are most important, they center your border view in container // ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ alignItems: "center", justifyContent: "center" }, borderImage: { // Your styles for image, or custom borders }, } class Component extends React.Component { ... render(){ return <View style={styles.container}> <Camera style={styles.camera}> <Image style={styles.borderImage} source={require("./img/qrBorder.png")} /> </Camera> </View>; } }