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.

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.