React-native-camera: barcode scanner with typescript

Created on 24 Feb 2018  路  3Comments  路  Source: react-native-camera/react-native-camera

RNCamera

hey guys
I'm trying to use RNCamera to do a barcode scanner. could anyone help me build. I need the scanner to read the barcode and return a string to read the code.
I put my code here

I copied the documentation code to test,
but returns the error message: TypeError: undefined is not an object (evaluating 'react_native_camera_1.default.constants.Type')

I do not know what to do anymore

Thank you for help

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Environment

  • Node.js version: v8.9.1
  • React Native version: 0.53.2
  • react-native-cli: 2.0.1
  • React Native platform + platform version: IOS and android

react-native-camera

Version: npm install react-native-camera

Love react-native-camera? Please consider supporting our collective: 馃憠 https://opencollective.com/react-native-camera/donate

Most helpful comment

It seems that you're using the deprecated component RCTCamera, and not the RNCamera.
You should import like this:

import { RNCamera } from 'react-native-camera';

Not like this

import Camera from 'react-native-camera';

Anyway, this is not the main issue. Even if you're using RCTCamera, constants shouldn't be undefined in your case.
Please, share more of your code (and your tsconfig.json).
Are you using a tool transform TS files? Or just plain tsc?
What's the version of your TypeScript?

# On your project folder
$ npm list typescript

All 3 comments

It seems that you're using the deprecated component RCTCamera, and not the RNCamera.
You should import like this:

import { RNCamera } from 'react-native-camera';

Not like this

import Camera from 'react-native-camera';

Anyway, this is not the main issue. Even if you're using RCTCamera, constants shouldn't be undefined in your case.
Please, share more of your code (and your tsconfig.json).
Are you using a tool transform TS files? Or just plain tsc?
What's the version of your TypeScript?

# On your project folder
$ npm list typescript

hello.
I'm doing this:
import * as React from 'react';
import {
StyleSheet, Text, TouchableNativeFeedback, View, Dimensions, TouchableOpacity,
} from 'react-native';
// import { mkdir, writeFile, readFile, exists, ExternalStorageDirectoryPath, } from "react-native-fs";
import { SincronizarDto, CapaPedidoDto } from '../dto/SincronizarDto';
import ListaDto from '../dto/ListaDto';
import { Ba_UsuarioDto } from '../dto/BA_UsuarioDto';
import { criarDadosRetornoDto, codigoBarras } from '../App';
import { navigatorStyle } from '../NavigatorStyle';

import RNCamera from 'react-native-camera';

interface CameraScreenProps {
navigator: Navigator;
};

export default class CameraScreen extends React.Component {
private takePicture = () => {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = (this.camera as any).takePictureAsync(options)
console.log(data.uri);
}
};

render() {
return (
ref={ref => {
this.camera = ref;
}}
style = {styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
// permissionDialogTitle={'Permission to use camera'}
// permissionDialogMessage={'We need your permission to use your camera phone'}
/>
onPress={this.takePicture.bind(this)}
style = {styles.capture}
>




);
}
};

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'black'
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20
}
});

but it's not compiling
I ran the command but returned the following: `-- (empty)
I just plain in files, tsx, ts and execute de comands npm install --save @types/name of packages

tsconfig.txt

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rmnrajan picture rmnrajan  路  3Comments

aiibe picture aiibe  路  3Comments

nonameolsson picture nonameolsson  路  3Comments

grkemtneri picture grkemtneri  路  3Comments

ghost picture ghost  路  3Comments