How to Open React Native Expo Camera On Button Click - reactjs

Question

Here is the code for the camera. I want a button to open the camera. I don't want it to automatically open on app startup. Also is there any way to detect text in the image and save it?
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';
export default class CameraExample extends React.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 <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>
);
}
}
}

Answer 1

You can put your view in a variable and render it on button press. In my camera I've done this for an image preview when the photo is taken:
if (BUTTON PRESS CONDITION) {
imageView = (
<View style={styles.previewContainer}>
<Image style={styles.imagePreview} source={{uri: `data:image/gif;base64,${base64Post}`}} />
<View style={styles.container}>
<TouchableOpacity style={styles.sendButton} onPress={() => Alert.alert("Not implemented!")}>
<Image style={{width: 70, height: 70}} source={require('../assets/Send.png')}/>
</TouchableOpacity>
</View>
<View style={styles.container} key={this.state.uniqueValue}>
<TouchableOpacity style={styles.undoButton} onPress={() => this.setState({ persist64: null})}>
<Image style={{width: 70, height: 70}} source={require('../assets/undoButton.png')}/>
</TouchableOpacity>
</View>
</View>
)
}
You could set up some boolean that when you press the button it is true renders the view of your camera. Then take the name of the view you made and put it somewhere in your render. like so:
{imageView}
If you need further explanation let me know.
Alternatively you could just create a separate page for your camera and have a button that navigates to the camera page.

Answer 2

You can simply connect the button and navigate to the camera on click. It is the very standard of navigating in both react or react native.. So just use whatever navigation library youre using, and use the nav props to redirect to camera onPress().