React Native Expo Camera Preview is not showing - react-native

Question

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.

Answer 1

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.

Answer 2

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