Skip to content

Instantly share code, notes, and snippets.

@knowbody
Last active December 28, 2020 06:23
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save knowbody/84ae45217f6d7a60c2abbd9b702596f0 to your computer and use it in GitHub Desktop.
Save knowbody/84ae45217f6d7a60c2abbd9b702596f0 to your computer and use it in GitHub Desktop.
Example CameraApp component, allows to take a photo and upload it to Amazon S3 bucket - blog post (https://medium.com/@knowbody/react-native-image-upload-to-s3-bucket-5220941bfea2#.9l2o8nmyf)
import React, { Component } from 'react';
import { AppRegistry, CameraRoll, Dimensions, View, StyleSheet } from 'react-native';
import Camera from 'react-native-camera';
import { Button } from 'react-native-vector-icons/Ionicons';
import { RNS3 } from 'react-native-aws3';
class CameraApp extends Component {
constructor() {
super();
this.takePicture = this.takePicture.bind(this);
}
takePicture() {
this.camera.capture()
.then((data) => {
const file = {
uri: data.path,
name: 'photo.jpg',
type: 'image/jpeg'
};
const options = {
keyPrefix: 'photos/',
bucket: '<bucket_name>',
region: 'eu-west-1',
accessKey: '<your_access_key>',
secretKey: '<your_secret_key>',
successActionStatus: 201
};
RNS3.put(file, options).then(response => {
if (response.status !== 201) {
throw new Error('Failed to upload image to S3', response);
}
console.log('*** BODY ***', response.body);
});
})
.catch(err => console.error(err));
}
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.cameraContainer}
aspect={Camera.constants.Aspect.fill}
captureAudio={false}
/>
<Button
name="ios-camera-outline"
size={60}
backgroundColor="transparent"
style={{ justifyContent: 'center' }}
onPress={this.takePicture}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black'
},
preview: {
justifyContent: 'center',
alignItems: 'center',
height: Dimensions.get('window').width,
width: Dimensions.get('window').width
},
cameraContainer: {
height: Dimensions.get('window').width,
width: Dimensions.get('window').width,
backgroundColor: 'salmon'
}
});
AppRegistry.registerComponent('CameraApp', () => CameraApp);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment