Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React Native Expo: Placing a Camera inside a ViewPager

$
0
0

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.


Viewing all articles
Browse latest Browse all 16552

Trending Articles