page-view-example

phase.js

import {
  ImageBackground,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from "react-native";
import React, { forwardRef, useRef, useState } from "react";

import PagerView from "react-native-pager-view";
import { useNavigation } from "@react-navigation/native";

const Mypager = forwardRef((props, ref) => {
  const handlePageChange = (e) => {
    const currentPageIndex = e.nativeEvent.position;
    props.onPageChange(currentPageIndex);
  };

  return (
    <PagerView
      style={Styles.PagerView}
      initialPage={0}
      scrollEnabled={false}
      ref={ref}
      onPageSelected={handlePageChange}
    >
      <View key={"1"}>
        <Text>Sign in</Text>
      </View>

      <View key={"2"}>
        <Text>Sign up</Text>
      </View>
    </PagerView>
  );
});

const Phase = () => {
  const [currentPage, setCurrentPage] = useState(0);
  const navigation = useNavigation();
  const pager = useRef();

  const handlePageChange = (pageIndex) => {
    setCurrentPage(pageIndex);
  };

  console.log(`currentPage: ${currentPage}`);

  return (
    <SafeAreaView style={{ flex: 1, top: 20 }}>
      <View style={{ flex: 1, justifyContent: "flex-start" }}>
        <ImageBackground
          source={require("../assets/tabBG.png")}
          style={{ flex: 1 }}
        >
          <Text
            style={{
              marginTop: 100,
              fontSize: 20,
              fontWeight: "700",
              color: "white",
              alignSelf: "center",
            }}
          >
            Welcome
          </Text>
          <Text style={{ color: "white", alignSelf: "center" }}>
            New here? Sign Up
          </Text>

          <View
            style={{
              flex: 0.85,
              backgroundColor: "white",
              borderRadius: 5,
              marginTop: 40,
              margin: 5,
            }}
          >
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                margin: 20,
              }}
            >
              <TouchableOpacity
                onPress={() => {
                  pager.current.setPage(0);
                }}
              >
                <Text
                  style={{ fontSize: 20, fontWeight: "600", color: "gray" }}
                >
                  Sign In
                </Text>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => {
                  pager.current.setPage(1);
                }}
              >
                <Text
                  style={{ fontSize: 20, fontWeight: "600", color: "gray" }}
                >
                  Sign Up
                </Text>
              </TouchableOpacity>
            </View>
            <View
              style={{
                borderWidth: 1,
                height: 1,
                borderColor: "gray",
                flex: 1,
              }}
            >
              <Mypager ref={pager} onPageChange={handlePageChange} />
            </View>
          </View>
        </ImageBackground>
      </View>
    </SafeAreaView>
  );
};

export default Phase;

const Styles = StyleSheet.create({
  PagerView: {
    flex: 1,
  },
});