How do I launch the RN Expo Camera in fullscreen from TouchableOpacity press?

Question

I have a React Native Component that is conditionally rendering a TouchableOpacity "Camera" Icon upon initial screen load, and pressing this TouchableOpacity "Camera" Icon is intended to launch the Expo's React Native Camera which is housed in a separate component. I implemented logging to track my state and confirmed that the state is correctly updating thus launching the Expo Camera component.

The problem I'm having is that NO MATTER WHAT I TRY, I cant get the camera Capture window to render in fullscreen and instead renders somewhere off of the iOS simulator app window. AND when the camera is activated, I cant see the capture window but it's messing up all of my containers once the camera loads.

CameraLauncher.js (conditionally shows either a Camera icon or shows the NativeCamera component view.

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Modal, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Camera } from 'expo';
import { NativeCamera } from './NativeCamera';

export class CameraLauncher extends Component {
    constructor(props) {
      super(props);
      this.setCameraShowing = this.setCameraShowing.bind(this);
      this.state = {
        type: Camera.Constants.Type.back,
        cameraOpen: false
      }
    }
    setCameraShowing(){
      this.setState({cameraOpen: true});
      console.log('hi', this.state.cameraOpen)
    }
      render() {
        const visible = this.state.cameraOpen
        console.log('ho', this.state.cameraOpen)
        if (visible) {
          camera =
            <NativeCamera style={StyleSheet.absoluteFill} />
        } else {
          camera = 
          <TouchableOpacity style={styles.cameraBtn} onPress={() => this.setCameraShowing(true)}>
            <View>
              <Icon
                name="camera"
                size={25}
                color='#2196F3'
              />
            </View>
          </TouchableOpacity>
        }
          return (
            <View>
              {camera}
            </View>
        );
    }
}

    const styles = StyleSheet.create({
        cameraBtn: {
            color: '#2196F3',
            marginTop: -15
        }
    });

NativeCamera.js (the actual camera window)

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';


export class NativeCamera extends Component {
  constructor(props) {
    super(props)
    this.state = {
        hasCameraPermission: null,
        type: Camera.Constants.Type.back,
      };
    }

      async componentWillMount() {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === 'granted' });
      }

      render() {
        const { hasCameraPermission } = this.state;
        if (hasCameraPermission === null) {
          return <View />;
        } else if (hasCameraPermission === false) {
          return <Text>No access to camera</Text>;
        } else {
          return (
            <View style={{ flex: 1 }}>
              <Camera style={{ flex: 1 }} type={this.state.type}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: 'transparent',
                    flexDirection: 'row',
                  }}>
                  <TouchableOpacity
                    style={{
                      flex: 0.1,
                      alignSelf: 'flex-end',
                      alignItems: 'center',
                    }}
                    onPress={() => {
                      this.setState({
                        type: this.state.type === Camera.Constants.Type.back
                          ? Camera.Constants.Type.front
                          : Camera.Constants.Type.back,
                      });
                    }}>
                    <Text
                      style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
                      {' '}Flip{' '}
                    </Text>
                  </TouchableOpacity>
                </View>
              </Camera>
            </View>
          );
        }
      }
    }

How do I make the Expo Camera capture window load over the entire screen? I was able to accomplish this with a <Modal /> by using presentationStyle='overFullScreen, but I don't know how to make that happen with the camera.

Also, yes I have already looked over this a million times and haven't found any examples of others using a button to launch the camera. https://docs.expo.io/versions/latest/sdk/camera/

How do I launch the RN Expo Camera in fullscreen from TouchableOpacity press?

0 Answers0