Any examples

[sce9sc]

I am trying the component but I can't seem to be able to close the camera when using react-native-router-flux .

Is it possible somehow to stop the camera and the capturing ?

I use router as such:

<Router>
            <Scene key="modal" component={Modal} >
                <Scene key="root" hideNavBar={true}>
                    <Scene key="login" direction="vertical" >
                        <Scene key="loginModal" hideNavBar={true} component={Login} schema="modal" title="Login"/>
                    </Scene>
                    <Scene key="barcode" direction="vertical" >
                        <Scene key="barcodeScanner" navBar={MyBar} hideNavBar={false} component={BarcodeScanner} title="BarcodeScanner"/>
                    </Scene>
                    <Scene key="tabbar" component={NavigationDrawer}>
                        <Scene key="main" tabs={true} default="tab2" >
                            <Scene key="tab1" title="test" component={Test} navigationBarStyle={{backgroundColor:"blue"}} titleStyle={{color:"white"}} />
                            <Scene key="tab2" initial={true} navigationBarStyle={{backgroundColor:"blue"}} titleStyle={{color:"white"}}  title="home"  component={Home}   />

                        </Scene>
                    </Scene>
                </Scene>
            </Scene>
        </Router>

For the NavBar i Use

class MyBar extends React.Component {
    render(){
        return (
            <Text onPress={Actions.tabbar} style={{color: this.props.selected ? "red" :"black"}}>Close</Text>
        );
    }
}

and barcode is as your example

import React, {
    Component,
    StyleSheet,
    View
} from 'react-native';
import BarcodeScanner from 'react-native-barcodescanner';

class BarcodeScannerComp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      torchMode: 'off',
      cameraType: 'back',
    };
  }

  barcodeReceived(e) {
    console.log('Barcode: ' + e.data);
    console.log('Type: ' + e.type);
  }

  render() {
    return (

            <BarcodeScanner
                onBarCodeRead={this.barcodeReceived}
                style={{ flex: 1 }}
                torchMode={this.state.torchMode}
                cameraType={this.state.cameraType}
                viewFinderDrawLaser={true}
            />

    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF",
    },
    welcome: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    instructions: {
        textAlign: "center",
        color: "#333333",
        marginBottom: 5,
    },
});

export default BarcodeScannerComp;

[erikelisath]

If your example work on android try the ToolbarAndroid NavBar from this Icon-Set. There you can use a "go back" icon. Works fine for me.

import React, {
  Component,
  View,
  StyleSheet,
  ToolbarAndroid,
} from 'react-native';
var Icon = require('react-native-vector-icons/Ionicons');
import BarcodeScanner from 'react-native-barcodescanner';

class Scan extends Component {
  constructor(props) {
    super(props);

    this.state = {
      torchMode: 'off',
      cameraType: 'back',
    };
  }

  barcodeReceived(e) {
    console.log('Barcode: ' + e.data);
    console.log('Type: ' + e.type);
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Icon.ToolbarAndroid
          style={styles.toolbar}
          titleColor='white'
          title={this.props.title}
          navIconName='android-arrow-back'
          onIconClicked={this.props.navigator.pop}/>
        <BarcodeScanner
          onBarCodeRead={this.barcodeReceived}
          style={{flex: 1}}
          torchMode={this.state.torchMode}
          cameraType={this.state.cameraType}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  toolbar: {
    height: 50,
    backgroundColor: 'grey'
  }
});
export default Scan;