is there any way to add some customized button when using Camera component

[wangjh7]

I wanna add some button to turn on/off flashlight or pick a image on phone, but don't know how to do Seems like CameraScreen has the corresponding api, but it would be deprecated in v14

[wangjh7]

const ScanQRCode = (props: ScanQRCodePropsType) => {
  const {} = props;

  return (
    <View style={StyleSheet.absoluteFill}>
      <Camera
        // Barcode props
        scanBarcode={true}
        // cameraType={CameraType.Back}
        onReadCode={(event) => Alert.alert('QR code found')} // optional
        showFrame={true} // (default false) optional, show frame with transparent layer (qr code or barcode will be read on this area ONLY), start animation for scanner,that stoped when find any code. Frame always at center of the screen
        laserColor='red' // (default red) optional, color of laser in scanner frame
        frameColor='white' // (default white) optional, color of border of scanner frame
        // style={{ flex: 1 }}
        style={StyleSheet.absoluteFill}
        // actions={}
      >
        <Pressable style={{ position: 'absolute', bottom: 20 }}>
          <Text> this is a button</Text>
        </Pressable>
      </Camera>
    </View>
  );
};

I tried to use position absolute, but every time when I add the Pressable, I got a react navigation error like this:

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?

[jkester1986]

@wangjh7 an older version of this package let you have children inside the camera, but the newer versions do not. Try moving outside the Camera maybe?

This is making things difficult for me as well, though. For example, we have overlays in our app. If I absolute-position them over the camera, then I get them, but I can't tap to focus or pinch to zoom, etc

[wangjh7]

@jkester1986 Thanks for your answer. I've figured it out.

const ScanQRCode = (props: ScanQRCodePropsType) => {
    return (
        <>
         {
           <Camera></Camera>
           <View style={styels.buttonArea}></View> //this view contains buttons
         }
       </>
    )
}

I moved buttons out of Camera component, and it works perfectly!