Displaying a custom button on camera view using React Native

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.