/Javascript/React/React native qr code scanner

React native qr code scanner

'use strict';

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Linking
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

class ScanScreen extends Component {
  onSuccess = e => {
    Linking.openURL(e.data).catch(err =>
      console.error('An error occured', err)
    );
  };

  render() {
    return (
      <QRCodeScanner
        onRead={this.onSuccess}
        flashMode={RNCamera.Constants.FlashMode.torch}
        topContent={
          <Text style={styles.centerText}>
            Go to{' '}
            <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on
            your computer and scan the QR code.
          </Text>
        }
        bottomContent={
          <TouchableOpacity style={styles.buttonTouchable}>
            <Text style={styles.buttonText}>OK. Got it!</Text>
          </TouchableOpacity>
        }
      />
    );
  }
}

const styles = StyleSheet.create({
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#777'
  },
  textBold: {
    fontWeight: '500',
    color: '#000'
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)'
  },
  buttonTouchable: {
    padding: 16
  }
});

AppRegistry.registerComponent('default', () => ScanScreen);

Source: npmjs.com

Similar codes

9 votes305 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote330 views1 answer
Show and hide div based on radio button click react
Javascript React
0 vote310 views1 answer
React should write method in a functional component or outside functional component
Javascript React
0 vote320 views1 answer
Decrease touchableopacity in react native
Javascript React
0 vote290 views2 answers
Hide header title in react navigation Drawer navigation
Javascript React
2 votes341 views1 answer
How to import lodash in react
Javascript React
1 vote326 views3 answers
Bash: react-scripts: command not found
Javascript React
0 vote334 views1 answer
Prevent double tap in react native
Javascript React
0 vote325 views2 answers
Capitalize each word from string in react
Javascript React
8 votes322 views1 answer
React-fragment
Javascript React