I just learned about react native. I use the react-native-camera-kit library and there are obstacles when I finish scanning a barcode. The barcode was scanned successfully but the camera took a while to close. I load data from the API, if only a small amount of data is loaded then the camera will close quickly but if the data is loaded a lot then the camera will close slowly. And this is my code.
import React, {Component} from 'react';import {View, PermissionsAndroid} from 'react-native';import { Container, Content, Card, CardItem, Body, Text, Button, Icon, Left, Footer, Thumbnail, Spinner, Root,} from 'native-base';import {CameraKitCameraScreen} from 'react-native-camera-kit';export default class App extends Component { constructor() { super(); this.state = { movies: [], isLoading: true, opneScanner: false, }; } async getMoviesFromApiAsync() { try { const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=100&offset=200', ); const json = await response.json(); this.setState({ movies: json.results, isLoading: false, }); } catch (error) { console.error(error); } } onBarcodeScan(qrvalue) { //called after te successful scanning of QRCode/Barcode console.log(qrvalue); this.setState({opneScanner: false}); // this.scan(qrvalue); // other method } onOpneScanner() { var that = this; //To Start Scanning if (Platform.OS === 'android') { async function requestCameraPermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: 'CameraExample App Camera Permission', message: 'CameraExample App needs access to your camera ', }, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { //If CAMERA Permission is granted that.setState({opneScanner: true}); } else { alert('CAMERA permission denied'); } } catch (err) { alert('Camera permission err', err); console.warn(err); } } //Calling the camera permission function requestCameraPermission(); } else { that.setState({opneScanner: true}); } } componentDidMount() { this.getMoviesFromApiAsync(); } render() { const {isLoading, opneScanner} = this.state; if (!opneScanner) { return (<Container><Content padder> {isLoading ? (<Spinner /> ) : ( this.state.movies.map((movie, index) => (<Card key={index}><CardItem><Left><Thumbnail source={{ uri:'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/220px-React-icon.svg.png', }} /><Body><Text> {movie.name}</Text><Text note> {movie.url}</Text></Body></Left></CardItem></Card> )) )}</Content><Footer><Button onPress={() => { this.onOpneScanner(); }} vertical success style={{ width: '100%', }}><Icon name="camera" /><Text>Scan</Text></Button></Footer></Container> ); } return (<View style={{flex: 1}}><CameraKitCameraScreen showFrame={true} //Show/hide scan frame scanBarcode={true} //Can restrict for the QR Code only laserColor={'blue'} //Color can be of your choice frameColor={'yellow'} //If frame is visible then frame color colorForScannerFrame={'black'} //Scanner Frame color onReadCode={(event) => { this.onBarcodeScan(event.nativeEvent.codeStringValue); }} /></View> ); }}please help me.....