Camera goes all black when switching application

[aeperea]

Hey, first of all, thanks for doing this.

I found that when I open the camera, navigate to another view and then I switch to another app and come back and try to open the camera the screen is all black. But if I open the camera view and then switch and come back the camera still works.

I'm not sure if this is a navigation issue, something regarding not unmounting the component when switching apps, or the plugin itself.

index.android.js

var React              = require('react-native');
var Home               = require('./app/android-components/home');
var CameraHandler      = require('./app/android-components/camera_handler');
var helpers            = require('./app/utils/helpers');

var {
  AppRegistry,
  StyleSheet,
  BackAndroid,
  Navigator
} = React;

var _navigator;

BackAndroid.addEventListener('hardwareBackPress', () => {
    console.log("Pressing back");
    if (_navigator.getCurrentRoutes().length === 1 ) {
        return false;
    }
    _navigator.pop();
    return true;
});

class MyApp extends React.Component {
    _renderScene(route, navigator) {
        _navigator = navigator;
        switch (route.name) {
            case 'Home':
                return (
                    <View style={{flex:1}}>
                        <Home navigator={navigator} />
                    </View>
                )
            case 'Camera':
                return (
                    <View style={{flex:1}}>
                        <CameraHandler navigator={navigator} helpers={helpers} />
                    </View>
                )
        }
    }
    render() {
        return (
            <Navigator
                style={styles.container}
                initialRoute={{
                    name : 'Home',
                    component : Home
                }}
                configureScene={() => Navigator.SceneConfigs.FadeAndroid}
                renderScene={this._renderScene}
            />
        )
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

home.js

var React  = require('react-native');

var {
    Text,
    View,
    ScrollView,
    TouchableHighlight,
    StyleSheet,
} = React;

class Home extends React.Component{
    openCamera(event){
        this.props.navigator.push({
            name: 'Camera'
        });
    }
    render() {
        return (
            <ScrollView style={{flex:1}}>
                <View style={styles.container}>
                    <View style={styles.header}>
                      <Text style={styles.headerText}>Welcome back!</Text>
                    </View>
                    <View style={styles.subheader}>
                      <Text style={styles.subheaderText}>Click on the button to start the camera</Text>
                    </View>
                    <View style={styles.buttonWrap}>
                        <TouchableHighlight
                            style={styles.button}
                            onPress={this.openCamera.bind(this)}
                            underlayColor="white"
                        >
                        <Text style={styles.buttonText}>SCAN CODE</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </ScrollView>
        )
    }
};

var styles = StyleSheet.create({
    container: {
        padding: 30,
        alignItems: 'center',
        marginTop: 30
    },
    header:{
        margin:20,
        width:400,
        height:80,
    },
    headerText:{
        fontSize: 28,
        textAlign: 'center',
    },
    subheader:{
        width:200,
        marginBottom:40
    },
    subheaderText:{
        fontSize:20,
        textAlign: 'center'
    },
    buttonWrap: {
        margin:30,
        width:300,
        //width:400,
        height:80,
        borderWidth: 1,
        borderColor: '#999999',
        borderRadius: 2,
        backgroundColor: '#9D9D9D'
    },
    button: {
        textAlign: 'center',
        color: '#ffffff',
        height:80,
    },
    buttonText: {
        fontSize: 16,
        textAlign: 'center',
        marginTop:28,
        marginBottom:28,
    }
});

module.exports = Home;

camera_handler.js

var React          = require('react-native');
var BarcodeScanner = require('react-native-barcodescanner');

class CameraHandler extends React.Component{
  barcodeReceived(e) {
    console.log(`Code is: ${e.data} and the type is ${e.type}`);
  }
  render() {
    return (
      <BarcodeScanner
        onBarCodeRead={this.barcodeReceived.bind(this)}
        style={{ flex: 1 }}
        torchMode='off'
        cameraType='back'
      />
    );
  }
}

module.exports = CameraHandler;

Thanks! :)

[andreaskeller]

Hi, should be fixed with the newest release which I just published.

[aeperea]

It works! Thanks!