50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { ThemedText } from "@/components/ThemedText";
|
|
import { ActivityIndicator, StyleSheet, TouchableOpacity } from "react-native";
|
|
|
|
interface Props {
|
|
isLoading?: boolean;
|
|
onPress?: () => void;
|
|
text: string
|
|
bg?: string
|
|
color?: string
|
|
}
|
|
const StepButton = (props: Props) => {
|
|
const { isLoading, onPress, text, bg, color } = props
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.button, isLoading && styles.disabledButton, { backgroundColor: bg ? bg : '#E2793F' }]}
|
|
onPress={onPress}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<ThemedText style={[styles.buttonText, { color: color ? color : '#FFFFFF' }]} size='lg' weight='bold'>
|
|
{text}
|
|
</ThemedText>
|
|
)}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
width: '100%',
|
|
backgroundColor: '#E2793F',
|
|
borderRadius: 32,
|
|
padding: 18,
|
|
alignItems: 'center'
|
|
},
|
|
disabledButton: {
|
|
opacity: 0.7,
|
|
},
|
|
buttonText: {
|
|
color: '#FFFFFF',
|
|
fontWeight: '600',
|
|
fontSize: 18,
|
|
},
|
|
});
|
|
|
|
export default StepButton
|