React Native Expo: Camera in ViewPager

Question

I am creating a ViewPager with a Camera inside in a View, when the ViewPager renders the Views everything is ok but then when the ViewPager change the page and get back to the Camera Page the Camera is not appearing again. How to solve this? There is a way to render the camera asynchronously?

This is my ViewPager:

import React from 'react';
import ViewPager from '@react-native-community/viewpager';
import { View } from 'react-native';

const Pager = ({
    pages,
    initalPage,
    onPageSelected,
    onPageScrollStateChanged,
    onPageScroll
}) => {
    return (
        <ViewPager 
            style={{flex: 1}} 
            initialPage={initalPage} 
            onPageSelected={(e)=>onPageSelected && onPageSelected(e.nativeEvent)}
            onPageScrollStateChanged={(e)=>onPageScrollStateChanged && onPageScrollStateChanged(e.nativeEvent)}
            onPageScroll={(e)=>onPageScroll && onPageScroll(e.nativeEvent)}
        >
            {
                pages.map((page,i)=>
                    <View key={i} style={{flex: 1}}>
                        {
                            page
                        }
                    </View>
                )
            }
        </ViewPager>
    )
}
export default Pager;

This is my Camera Page:

import React, { useEffect, Suspense, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Camera } from 'expo-camera';
import { LinearGradient } from 'expo-linear-gradient';
import { color } from '../../utils';

const ScannerView = ({
    isInView,
}) => {

    let camera = null;

    const [hasPermission, setHasPermission] = useState(null);
    const [cameraRatio, setCameraRatio] = useState('1:1');

    useEffect(()=>{
        (async () => {
            const { status } = await Camera.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    const handleCameraReady = () => {
        camera.getSupportedRatiosAsync().then((data)=>{
            setCameraRatio(data[data.length-1]);
        });
    }

    const handleBarcodeScanned = (data) => {
        console.log(data);
    }

    const handleThis = (err) => {
        console.log("EVENT",err.nativeEvent)
    }


    const renderCamera = (
        <Camera
            ref={ref=>{
                camera=ref;
            }}
            style={styles.camera}
            type={Camera.Constants.Type.back}
            focusable={true}
            ratio={cameraRatio}
            onCameraReady={handleCameraReady}
            onBarCodeScanned={handleBarcodeScanned}
            onMountError={handleThis}
        />
    )

    return (
        <View style={styles.container}>
            {
                (hasPermission) &&
                <Suspense>
                    {renderCamera}
                </Suspense>
                
            }
            <LinearGradient
                colors={['transparent', color.neutral80]}
                style={styles.gradient}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'black',
        alignItems: 'stretch'
    },
    camera: {
        flex: 1,
        backgroundColor: 'red',
    },
    gradient: {
        flex: 1,
        height: 220,
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0
    }
})

export default ScannerView;

React Native Expo: Camera in ViewPager

0 Answers0