Video Camera with custom text

Question

I am new to react-native. Now, I would like to show the text while recording. For example, if I open the camera then show the text 1234 until I finished the recording. Can anyone please help to develop this UI? I am really worried about fixing this one. I have spent more than a week. but I couldn't able to fix this issue.

I have tried different libraries for camera react-native-image-picker and react-native-image-crop-picker. So I can able to access the camera. but I couldn't able to show the text. So can anyone please help me sort out this issue? enter image description here

Answer 1

If you use expo-camera package you can easily customize you camera view.

checkout this document

Answer 2

@Sarathi, this should be relatively straight forward as long as your not expecting the text to play back in the video.

react-native-vision-camera would be the best for this.

You'll need to review the docs here to fully instantiate the camera module. However, once set you can use the following as a sample.

    <View>
      <Camera
        style={{
                 height: Dimensions.get('window').height * 0.5,
                 width: Dimensions.get('window').width * 0.8
              }}
        device={camera}
        ref={cameraRef}
        isActive={true}
        audio={true}
        focusable={true}
        video={true}
     />
     <Text style={{marginTop: Dimensions.get('window').height * -0.25}}>1234</Text>
   </View>

The negative margin will pull the text over your camera view.

Hope this helps.