react native flux router with react-native-camera

Question

I'm trying to preview the image I get in the next scene but the transition doesn't happen when I click on the camera button.

import { Actions } from 'react-native-router-flux';
import Camera from 'react-native-camera';

export default class PageTwo extends Component {
  render() {
    return (
      <View style={styles.container} >
         <Camera ref={(cam) => { this.camera = cam; }}
            style={styles.preview}
            aspect={Camera.constants.Aspect.fill}>
                <Text style={styles.capture} 
                      onPress={this.takePicture.bind(this)}> 
                         <Icon name="ios-camera"/>
                </Text>
         </Camera>
      </View>
    )
 }

 takePicture() {
     this.camera.capture()
       .then((data) => {Actions.previewimg});
 }
}

How do you define Scenes ? – Ahmed Ali Dec 16 '16 at 19:56 — Ahmed Ali, Dec 16 '16 at 19:56
@AhmedAli what do you mean? – bakelite Dec 19 '16 at 03:50 — bakelite, Dec 19 '16 at 03:50

score 0 · Answer 1 · answered Dec 17 '16 at 09:19

I think that the problem is that you are not calling the router transition properly. Actions holds a function that makes a transition to a certain screen, with the same name given in the key prop of each <Scene>. These are functions, and so you have to call them. Change your code to do:

takePicture() {
     this.camera.capture()
       .then((data) => {Actions.previewimg()});
}

Also, the data will not be passed to the next screen unless you explicitely do so. So your code should look like this:

takePicture() {
     this.camera.capture()
       .then((data) => {Actions.previewimg({data: data}});
}

And then your previewimg scene will have an extra prop called data that will hold your image.

no didn't get anything on the log it just crashes now when I click the button :/ — bakelite, Dec 22 '16 at 03:24
It looks like the native code of the component has not been properly included on the code. You might want to check that. Also, have you checked the native app logs (adb logcat, for example)? — martinarroyo, Dec 22 '16 at 06:28

score 0 · Answer 2 · answered Jun 13 '17 at 17:03

The answer by martinarroyo is the correct way to do it. You have to call it properly and to pass the data you have to pass it as parameters.

App crashes mostly on Android devices. You have to check your native java code and insert it properly along with the permissions (many people forget the permissions). And sometimes due to crashing too often your camera in general stops working. So, give it some time and open your default camera app of your device then open your app again. It will work.

react native flux router with react-native-camera

2 Answers2