Se creó una página completa para hacer el rating de una actividad

import { useEffect, useRef, useState } from "react";

import { StyleSheet, View, Animated, Text } from "react-native";

import { StarRatingForm } from "./star_rating_form";

import AntDesign from "@expo/vector-icons/AntDesign";

import { FloatingEndActionButton } from "../floating_end_action_button";

interface FullPageRatingProps {

  onClose: () => void;

  onSubmitted: (rating: number) => void;

}

export const FullPageRating = ({ onClose, onSubmitted }: FullPageRatingProps) => {

  const [rating, setRating] = useState(0);

  const opacityRef = useRef(new Animated.Value(0)).current;

  useEffect(() => {

    Animated.timing(opacityRef, {

      toValue: 0.7,

      duration: 300,

      useNativeDriver: false,

    }).start();

  }, []);

  const handleOnClose = (callback: () => void) => {

    Animated.timing(opacityRef, {

      toValue: 0,

      duration: 300,

      useNativeDriver: false,

    }).start(() => {

      callback();

    });

  };

  return (

    <View style={styles.mainContainer}>

      <Animated.View

        style={[styles.opacityContainer, { opacity: opacityRef }]}

      ></Animated.View>

      <Animated.View

        style={[

          styles.ratingContainer,

          {

            width: opacityRef.interpolate({

              inputRange: [0, 0.7], // Valores de entrada, de 0 a 1

              outputRange: ["0%", "70%"],

            }),

            opacity: opacityRef.interpolate({

              inputRange: [0.3, 0.7], // Valores de entrada, de 0 a 1

              outputRange: [0, 1],

            }),

          },

        ]}

      >

        <Text style={styles.messageText}>

          ¿Te gustó esta actividad? Califícala

        </Text>

        <AntDesign

          name="close"

          style={styles.closeButton}

          size={32}

          color="red"

          onPress={() => handleOnClose(onClose)}

        />

        <StarRatingForm maxRating={5} onRatingChange={(rating: number) => {setRating(rating)}} />

        <FloatingEndActionButton title="Enviar" onPress={() => handleOnClose(() => onSubmitted(rating))} />

      </Animated.View>

    </View>

  );

};

const styles = StyleSheet.create({

  mainContainer: {

    position: "absolute",

    justifyContent: "center",

    alignItems: "center",

    width: "100%",

    height: "100%",

  },

  opacityContainer: {

    width: "100%",

    height: "100%",

    position: "absolute",

    backgroundColor: "rgb(0,0,0)",

  },

  ratingContainer: {

    aspectRatio: "1/1",

    backgroundColor: "white",

    zIndex: 2,

    paddingTop: 30,

    borderRadius: 10,

  },

  closeButton: {

    position: "absolute",

    top: 10,

    right: 10,

    zIndex: 3,

  },

  messageText: {

    fontSize: 18,

    fontWeight: "700",

    textAlign: "center",

    margin: 20,

  },

});