Simple button components for common screen and action include CTA, forms, screen buttons, etc
There are 2 variants for the button base component and you can wrap it with Pressable, TouchableOpacity or TouchableHighlight.
Simple Button Component
Preview
Code
import React from 'react';
import { Pressable, Text, View } from 'react-native';
export type ButtonProps = {
children: React.ReactNode;
onPress?: () => void;
};
const Button = ({ children, onPress }: ButtonProps): React.JSX.Element => (
<Pressable onPress={onPress}>
{({ pressed }: { pressed: boolean }) => (
<View
className={
'items-center justify-center gap-x-4 p-4 rounded-xl bg-sky-500 dark:bg-teal-500'
}
style={{ opacity: pressed ? 0.5 : 1 }}
>
<Text className={'text-white text-base font-medium uppercase'}>
{children}
</Text>
</View>
)}
</Pressable>
);Usage
import { Button } from '@/components/common/Buttons';
export default function Screen() {
return (
<Button onPress={() => {}}>Button</Button>
)
}