86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
|
import { StyleSheet, Pressable } from "react-native";
|
||
|
|
import { ThemedText } from "@/components/ThemedText";
|
||
|
|
import { ThemedView } from "@/components/ThemedView";
|
||
|
|
import { Colors } from '@/constants/Colors';
|
||
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
||
|
|
import FontAwesome from "@expo/vector-icons/FontAwesome";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
label: string;
|
||
|
|
theme?: 'primary';
|
||
|
|
onPress?: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const Button = ({ label, theme, onPress }: Props) => {
|
||
|
|
const scheme = useColorScheme() ?? 'light';
|
||
|
|
if (theme === 'primary') {
|
||
|
|
return (
|
||
|
|
<ThemedView style={styles.buttonContainer}>
|
||
|
|
<Pressable
|
||
|
|
style={[
|
||
|
|
styles.button,
|
||
|
|
{backgroundColor: Colors[scheme].text}
|
||
|
|
]}
|
||
|
|
onPress={() => alert('You pressed a button.')}
|
||
|
|
>
|
||
|
|
<ThemedText
|
||
|
|
style={[
|
||
|
|
styles.buttonLabel,
|
||
|
|
{color: Colors[scheme].background}
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</ThemedText>
|
||
|
|
</Pressable>
|
||
|
|
</ThemedView>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<ThemedView style={styles.buttonContainer}>
|
||
|
|
<Pressable
|
||
|
|
style={[
|
||
|
|
styles.button,
|
||
|
|
{backgroundColor: Colors[scheme].text}
|
||
|
|
]}
|
||
|
|
onPress={() => alert('You pressed a button.')}
|
||
|
|
>
|
||
|
|
<ThemedText
|
||
|
|
style={[
|
||
|
|
styles.buttonLabel,
|
||
|
|
{color: Colors[scheme].background}
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</ThemedText>
|
||
|
|
</Pressable>
|
||
|
|
</ThemedView>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
export default Button;
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
buttonContainer: {
|
||
|
|
width: 320,
|
||
|
|
height: 68,
|
||
|
|
marginHorizontal: 20,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
padding: 3,
|
||
|
|
},
|
||
|
|
button: {
|
||
|
|
borderRadius: 10,
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
buttonIcon: {
|
||
|
|
paddingRight: 8,
|
||
|
|
},
|
||
|
|
buttonLabel: {
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
});
|