How to use react-native-camera - 10 common examples

To help you get started, we’ve selected a few react-native-camera examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github squatsandsciencelabs / OpenBarbellApp / app / shared_features / camera / VideoRecorder.js View on Github external
_record() {
        this.camera.capture({
            mode: Camera.constants.CaptureMode.video,
            audio: true
        }).then((data) => {
            if (this.props.setID) {
                this.props.saveVideo(this.props.setID, data.path, this.props.videoType);
            }
            // TODO: share options can be here, but for now just finish
        }).catch((err) => {
            console.tron.log("ERROR " + err);
            this.props.saveVideoError(this.props.setID, err);
            Alert.alert('There was an issue saving your video. Please try again');
        });
    }
github shoutem / extensions / shoutem.camera / app / components / QRCodeScanner.js View on Github external
constructor(props) {
    super(props);

    this.updateIsAuthorized = this.updateIsAuthorized.bind(this);

    let isAuthorized = true;
    if (Platform.OS === 'ios') {
      // Asks for permissions if not defined, returns choice otherwise
      isAuthorized = undefined;
      Camera.checkDeviceAuthorizationStatus().then(this.updateIsAuthorized);
    }

    this.state = { isAuthorized };

    this.onQRCodeScanned = _.debounce(props.onQRCodeScanned, 1000, { leading: true, trailing: false });
  }
github soliury / noder-react-native / src / layouts / QRCode.js View on Github external
return (
        <View style={styles.cameraWrapper}>
          <BarcodeScanner
            onBarCodeRead={this._onBarCodeRead.bind(this)}
            style={styles.camera} />
          { closeIcon }
        </View>
      )
    }

		// for ios
    return (
      <Camera
        ref='camera'
        style={styles.camera}
        aspect={Camera.constants.Aspect.Fill}
        onBarCodeRead={this._onBarCodeRead.bind(this)}>
        <View style={styles.container}>
          <View style={styles.cameraView}>
            <View key='1' style={[styles.borderLeftTop, styles.borderBox]} />
            <View key='2' style={[styles.borderRightTop, styles.borderBox]} />
            <View key='3' style={[styles.borderLeftBottom, styles.borderBox]} />
            <View key='4' style={[styles.borderRightBottom, styles.borderBox]} />
          </View>
          <Text style={styles.infoText}>
						请将二维码放到框内
					</Text>
        </View>
        { closeIcon }
      </Camera>
    )
  }
github keybase / client / shared / login / register / code-page / qr / index.ios.js View on Github external
async _requestCameraPermission() {
    try {
      const permissionGranted = await Camera.checkVideoAuthorizationStatus()
      this.setState({permissionGranted})
    } catch (err) {
      console.warn("Can't get camera permissions", err)
      this.setState({permissionGranted: false})
    }
  }
github l3wi / iotaMobile / app / routes / qrcode.js View on Github external
componentDidMount() {
    Camera.checkVideoAuthorizationStatus().then(data => {
      console.log(data);
      this.setState({ allowed: data });
    });
  }
github MiEcosystem / miot-plugin-sdk / projects / com.xiaomi.demo / Main / ThirdPartDemo / ReactNativeCameraDemo.js View on Github external
takePicture = async function () {
        if (Host.isIOS) {
            if (!await Camera.checkDeviceAuthorizationStatus()) {
                alert('相机权限未开启')
                return
            }
        }

        if (Host.isAndroid) {
            if (!await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA)) {
                alert('相机权限未开启')
                return
            } else {
                console.log('相机权限已开启');
            }
        }
        if (this.camera) {
            const options = { quality: 0.5, base64: true };
            const data = await this.camera.takePictureAsync(options);
github Rocketseat / blog-adonis-reactjs-react-native-airbnb-app / src / pages / main / index.js View on Github external
renderCameraModal = () => (
    <Modal
      visible={this.state.cameraModalOpened}
      transparent={false}
      animationType="slide"
      onRequestClose={this.handleCameraModalClose}
    >
      <ModalContainer>
        <ModalContainer>
          <RNCamera
            ref={camera => {
              this.camera = camera;
            }}
            style={{ flex: 1 }}
            type={RNCamera.Constants.Type.back}
            autoFocus={RNCamera.Constants.AutoFocus.on}
            flashMode={RNCamera.Constants.FlashMode.off}
            permissionDialogTitle={"Permission to use camera"}
            permissionDialogMessage={
              "We need your permission to use your camera phone"
            }
          />
          <TakePictureButtonContainer onPress={this.handleTakePicture}>
            <TakePictureButtonLabel />
          </TakePictureButtonContainer>
        </ModalContainer>
        { this.renderImagesList() }
        <ModalButtons>
          <CameraButtonContainer onPress={this.handleCameraModalClose}>
            <CancelButtonText>Cancelar</CancelButtonText>
          </CameraButtonContainer>
          <CameraButtonContainer onPress={this.handleDataModalClose}>
github thinger-io / Mobile-App / src / components / screens / QRScanner.js View on Github external
renderCamera() {
    const { scanning } = this.state;
    return (
      <RNCamera
        style={{
          flex: 1,
          backgroundColor: 'transparent',
        }}
        type={RNCamera.Constants.Type.back}
        permissionDialogTitle="Permission to use camera"
        permissionDialogMessage="We need your permission to use your camera phone"
        barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
        onBarCodeRead={(data) => {
          if (!scanning) this.handleOnBarCodeRead(data);
        }}
      />
    );
  }
github gaoxiaosong / react-native-full-image-picker / src / CameraView.js View on Github external
_clickTakePicture = async () => {
        if (this.camera) {
            const item = await this.camera.takePictureAsync({
                mirrorImage: this.state.sideType === RNCamera.Constants.Type.front,
                fixOrientation: true,
                forceUpOrientation: true,
                ...this.props.pictureOptions
            });
            if (Platform.OS === 'ios') {
                if (item.uri.startsWith('file://')) {
                    item.uri = item.uri.substring(7);
                }
            }
            if (this.props.maxSize > 1) {
                if (this.state.data.length >= this.props.maxSize) {
                    Alert.alert('', this.props.maxSizeTakeAlert(this.props.maxSize));
                } else {
                    this.setState({
                        data: [...this.state.data, item],
                    });
github Doha26 / Instagram-clone / src / screens / Root / index.tsx View on Github external
switchFlash = () => {
        let newFlashMode;
        const {auto, on, off} = RNCamera.Constants.FlashMode;

        if (this.state.camera.flashMode === auto) {
            newFlashMode = on;
        } else if (this.state.camera.flashMode === on) {
            newFlashMode = off;
        } else if (this.state.camera.flashMode === off) {
            newFlashMode = auto;
        }

        this.setState({
            camera: {
                ...this.state.camera,
                flashMode: newFlashMode,
            },
        });
    };