itsramiel

const style2 = useAnimatedStyle(() => {
    const SHORTENED_HEIGHT = VIEW_HEIGHT * 0.3;
    const width = interpolate(
      progress.value,
      [0, 1],
      [VIEW_HEIGHT, SHORTENED_HEIGHT]
    );
    const deg = interpolate(progress.value, [0, 1], [0, 50]);
    const translateY = interpolate(
      progress.value,

itsramiel

const style1 = useAnimatedStyle(() => {
    const degress = interpolate(progress.value, [0, 1], [0, 50]);
    return {
      width: VIEW_WIDTH,
      height: VIEW_HEIGHT,
      backgroundColor: "white",
      position: "absolute",
      top: FAB_SIZE / 2 - VIEW_HEIGHT / 2,
      left: FAB_SIZE / 2 - VIEW_WIDTH / 2,
      transform: [{ rotate: `${degress}deg` }],

itsramiel

const style2 = useAnimatedStyle(() => {
    return {
      width: VIEW_HEIGHT,
      height: VIEW_WIDTH,
      backgroundColor: "white",
      position: "absolute",
      top: FAB_SIZE / 2 - VIEW_HEIGHT / 2,
      left: FAB_SIZE / 2 - VIEW_WIDTH / 2
    };
  }, []);

itsramiel

const style1 = useAnimatedStyle(() => {
    return {
      width: VIEW_WIDTH,
      height: VIEW_HEIGHT,
      backgroundColor: "white",
      position: "absolute",
      top: FAB_SIZE / 2 - VIEW_HEIGHT / 2,
      left: FAB_SIZE / 2 - VIEW_WIDTH / 2,
    };
  }, []);

itsramiel

const FAB_SIZE = 70;
const INITIAL_COLOR = "#d00000";
const FINAL_COLOR = "#4BB543";

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export default function App() {
  const progress = useSharedValue<0 | 1>(0);

  const FabStyle = useAnimatedStyle(() => {

itsramiel

const FabStyle = useAnimatedStyle(() => {
    return { backgroundColor: interpolateColor(progress.value, [0, 1], [INITIAL_COLOR, FINAL_COLOR])}
  }, [])

itsramiel

<Pressable
        style={styles.fabContainer}
        onPress={() => (progress.value = 1)}
        onLongPress={() => (progress.value = 0)}
      ></Pressable>

itsramiel

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Pressable, View } from "react-native";

const FAB_SIZE = 70;
const INITIAL_COLOR = "#d00000";
const FINAL_COLOR = "#4BB543";

export default function App() {
  return (
    <View style={styles.container}>

itsramiel

import { Alert, Button, View } from "react-native";
import React, { useEffect } from "react";
import { HomeProps } from "../navigation/types";
import { useEvent } from "../event/EventProvider";

const Home = ({ navigation }: HomeProps) => {
  const event = useEvent();

  const congratulateUser = () => {
    Alert.alert("Here is a congratulations for following this tutorial and this function is written in Home");

itsramiel

import React from "react";
import { event } from ".";
import EventEmitter from "eventemitter3";

const EventContext = React.createContext<EventEmitter>(event);

const EventProvider: React.FC = ({ children }) => {
  return <EventContext.Provider value={event}>{children}</EventContext.Provider>;
};