Button.tsx•1.16 kB
import React from 'react';
import {
TouchableOpacity,
Text,
StyleSheet,
ViewStyle,
TextStyle,
ActivityIndicator,
} from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
style?: ViewStyle;
textStyle?: TextStyle;
loading?: boolean;
disabled?: boolean;
}
export const Button: React.FC<ButtonProps> = ({
title,
onPress,
style,
textStyle,
loading = false,
disabled = false,
}) => {
return (
<TouchableOpacity
style={[
styles.button,
style,
disabled && styles.disabledButton,
]}
onPress={onPress}
disabled={disabled || loading}
>
{loading ? (
<ActivityIndicator color="#fff" />
) : (
<Text style={[styles.text, textStyle]}>{title}</Text>
)}
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: '#007AFF',
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 8,
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
disabledButton: {
opacity: 0.6,
},
});