Fully Animated, Production-Ready
UI Library for React Native

import type { ReactNode } from 'react';
import { forwardRef, isValidElement, useCallback, useEffect, useMemo } from 'react';
import {
	ActivityIndicator,
	type GestureResponderEvent,
	Pressable,
	Text,
	View,
} from 'react-native';
import Animated, {
	useAnimatedStyle,
	useSharedValue,
	withSpring,
} from 'react-native-reanimated';
import { StyleSheet } from 'react-native-unistyles';
import { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';
import type { ButtonProps, ButtonSize } from './Button.types';

export const buttonStyles = StyleSheet.create((theme, _rt) => {
	const containerCompoundVariants = theme.utils
		.getColorSchemePaletteEntries(theme)
		.flatMap(([scheme, palette]) => {
			const hasSolidColor = theme.utils.paletteHasSolid(palette);

			return [
				{
					colorScheme: scheme,
					variant: 'filled' as const,
					styles: {
						backgroundColor: hasSolidColor
							? palette.solid
							: palette.content_inversed,
						_web: {
							_hover: {
								backgroundColor: palette.hover,
							},
						},
					},
				},
        // ... more variants
			];
		});

  // ... styles implementation
	return {
		container: {
			flexDirection: 'row',
			alignItems: 'center',
			justifyContent: 'center',
			borderRadius: theme.rounded.md,
      // ... more styles
		},
    // ...
	};
});

// Animation Constants
const SPRING_CONFIG = {
	stiffness: 1600,
	damping: 65,
	mass: 2.5,
};

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export const Button = forwardRef<View, ButtonProps>((props, ref) => {
	const {
		colorScheme = 'primary',
		variant = 'filled',
		size = 'md',
		loading = false,
		children,
		onPress,
    // ... other props
		...rest
	} = props;

	const scale = useSharedValue(1);
	const opacity = useSharedValue(1);

	buttonStyles.useVariants({
		colorScheme,
		size,
		variant,
    // ...
	});

	const animatedStyle = useAnimatedStyle(() => ({
		transform: [{ scale: scale.value }],
		opacity: opacity.value,
	}));

	const handlePressIn = useCallback(
		(event: GestureResponderEvent) => {
			scale.value = withSpring(0.94, SPRING_CONFIG);
			opacity.value = withSpring(0.86, SPRING_CONFIG);
		},
		[scale, opacity]
	);
  
  // ... more event handlers

	return (
		<AnimatedPressable
			ref={ref}
			style={[
				buttonStyles.container,
				animatedStyle,
			]}
			onPress={handlePress}
			onPressIn={handlePressIn}
			{...rest}
		>
			{resolvedChildren}
		</AnimatedPressable>
	);
});

Button.displayName = 'Button';