CODEWITHSUNDEEP
react-native
Pierre Charpentier
Pierre Charpentier

Reputation: 270

Take a picture with react-native-camera

I use the react-native-camera module in my app. All is ok with the example. My problem is for display my image on another page. This is my code :

'use strict';

var React = require('react-native');
var styles = require('./common/styles.js');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  TouchableOpacity,
  Navigator,
} = React;

var Camera = require('react-native-camera'); //require the camera component
var capturedBase64='';
var PageCamera = React.createClass({
    getInitialState: function() {
        return ({
            capturedBase64: '',
            type: Camera.constants.Type.back
        });
    },

    switchCamera: function() {
        this.setState({ type: this.state.type === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back });
    },

    render(){
      var component = this;
      return (
    <View style={styles.parent}>
        <View style={styles.container}>
          <Camera style={styles.camera} ref="cam" type={this.state.type} captureTarget={Camera.constants.CaptureTarget.memory}></Camera>
          <TouchableHighlight style={styles.captureButton} onPress={() => {component.refs.cam.capture({ sampleSize: 10 }).then(function(capturedBase64) {
                component.setState({ capturedBase64 })});}}>
            <Text style={{textAlign: 'center'}}>Capture</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.switchButton} onPress={this.switchCamera}>
            <Text style={{textAlign: 'center'}}>Switch</Text>
          </TouchableHighlight>
        </View>
        <View style={styles.navigation_bar_bas}>
        <TouchableHighlight style={styles.buttonNavigation} onPress={ () => this.props.navigator.push({id: 'PersonPage', sceneConfig: Navigator.SceneConfigs.FloatFromLeft, img:capturedBase64, page:'camera'})}>
          <Text style={styles.item_text}>Précédent</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.buttonNavigation}>
          <Text style={styles.item_text}></Text>
        </TouchableHighlight>
        </View>
    </View>
    );
    }
});

module.exports = PageCamera;

I can display my image if I add

 <Image>

, as the example, or if I change the target to the cameraRoll, I can find my image on my gallery. I want to send my image to another page (PersonPage). Do you now if it's possible with 'memory' ? Can I use 'cameraRoll' (the cameraRoll module isn't open source for Android..) ?

Thanks for your help.

Upvotes: 1

Views: 8334

Answers (1)

neciu
neciu

Reputation: 4485

According to documentation memory target is deprecated.

If you use disk target instead cameraRoll you will be given link like: /Users/user/Library/Developer/CoreSimulator/Devices/XXXXXXX-09F8-4DC2-XXXA-69E79B6XXX45/data/Containers/Data/Application/41424B58-XXXX-40AF-989C-3E877116XXXX/Documents/XXXXC461-6870-4B73-XXXX-D875E8985533.jpg

Use this link as normal uri parameter in your image tag:

<Image source={{uri: this.props.linkFromPreviousScene}}/>

Upvotes: 5

Related Questions