CODEWITHSUNDEEP
react-nativecameraexpo
Mihai Alin
Mihai Alin

Reputation: 55

React Native Expo Camera Preview is not showing

I'm new to React Native and I wanted to implement the camera component from Expo to use it, I followed the tutorial given in the documentation but it didn't work for me. Here is the code I used in my Camera js file:

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

export default class CameraApp extends Component {
    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 <Text>Hello</Text>;
        } else if(hasCameraPermission === false) {
            return <Text>No access to camera</Text>;
        } else {
            return (
                <View style={{flex: 1}}>
                    <Camera type={this.state.type} style={{flex: 1}}/>
                </View>
            );
        }
    }
}

and added it to the render method in App.js like this using native-base:

  render() {
    if(this.state.fontLoaded === true) {
      return (
        <Container>
          <View style={{flex: 1}}>
            <HeaderNoLeft />
            </View>
          <Content>
            <View style={{flex: 1}}>
              <CameraApp />
            </View>
          </Content>
        </Container>
      );
    } else {
      return <Expo.AppLoading />;
    }
  }
}

What could be the problem? I can't seem to understand why is the camera preview not showing in the app and I'm stuck to this. Any help is appreciated.

Upvotes: 3

Views: 3708

Answers (2)

Ulan4eg
Ulan4eg

Reputation: 11

Instead : const { status } = await Permissions.askAsync(Permissions.CAMERA); Try this:

import * as Permissions from "expo-permissions";
...
const { status } = await Permissions.askAsync(Permissions.CAMERA);

Upvotes: 1

Yasin Kilicdere
Yasin Kilicdere

Reputation: 446

Try giving a height parameter instead of flex, flex didn't work for me either.

<Camera type={this.state.type} style={{height: 300}}/>

It's not a good solution but seeing the problem is about styling is something.

Upvotes: 2

Related Questions