I need to put a Camera ("expo-camera") view inside a horizontal viewPager ("@react-native-community/viewpager").I can't get it to work.
I was able to place other components with no problem, and I was able to show the Camera as a stand alone view.I'm still a beginner.Is this possible?If so, can someone make a simple template of these two components together please?
ViewPager:
import React from "react";import ViewPager from "@react-native-community/viewpager";import Record from "../../components/Record";import { View } from "react-native";const Home: React.FC = () => { return (<ViewPager onPageSelected={(event) => { //Nothing yet }} style={{ flex: 1, backgroundColor: "#000" }} orientation="horizontal" scrollEnabled={true}><View style={{ flex: 1, backgroundColor: "#f54242" }} /><Record isFeed={false} /></ViewPager> );};export default Home;
Camera:
import React, { useEffect } from "react";import { Camera } from "expo-camera";import { View, Text, StatusBar } from "react-native";const Record: React.FC = () => { const [hasPermission, setHasPermission] = useState<boolean | null>(null); useEffect(() => { async function permission(): Promise<void> { const { status } = await Camera.requestPermissionsAsync(); setHasPermission(status === "granted"); StatusBar.setHidden(true); } permission(); }, []); if (hasPermission === null) { return <View />; } if (hasPermission === false) { return <Text>No access to camera</Text>; } return (<Camera type={Camera.Constants.Type.back}/> );};export default Record;
Appreciate all the help I can get.