useToggleButton

import React from "react";
import { useToggleButton } from "@react-native-aria/button";
import { useToggleState } from "@react-stately/toggle";
import { Pressable, Text, View, StyleSheet, SafeAreaView } from "react-native";
import { useRef } from "react";
import { AntDesign } from '@expo/vector-icons'; 

function ToggleButton(props) {
  const ref = useRef(null);
  let state = useToggleState(props);
  let { buttonProps, isPressed } = useToggleButton(props, state, ref);

  return (
      <Pressable
        ref={ref}
        {...buttonProps}
        style={styles.pressable}
        accessibilityLabel={state.isSelected ? "Liked": "Like" }
      >
       {state.isSelected ? 
          <AntDesign name="heart" size={32} color="rgb(224, 36, 94)" /> :
          <AntDesign name="hearto" size={32} color="black" /> 
       }
      </Pressable>
  );
}

export default function App() {
  return <SafeAreaView><ToggleButton /></SafeAreaView>
}

const styles = StyleSheet.create({
  pressable: {
    flexDirection:"row",
    padding: 10, 
    borderWidth: 1,
    borderRadius: 10,
    alignItems:"center",
    justifyContent:"space-around",
    width: "50%",
    marginLeft: "auto",
    marginRight: "auto"
  }
})