1import * as React from 'react'; 2import { 3 ActivityIndicator, 4 Platform, 5 StyleSheet, 6 Text, 7 TouchableNativeFeedback, 8 TouchableOpacity, 9 View, 10} from 'react-native'; 11 12import Colors from '../constants/Colors'; 13 14type TouchableNativeFeedbackProps = React.ComponentProps<typeof TouchableNativeFeedback>; 15export default function PrimaryButton({ 16 children, 17 isLoading, 18 plain, 19 style, 20 ...props 21}: TouchableNativeFeedbackProps & { 22 children: any; 23 isLoading?: boolean; 24 plain?: boolean; 25}) { 26 return Platform.OS === 'android' ? ( 27 <TouchableNativeFeedback {...props}> 28 <View style={[plain ? styles.plainButton : styles.button, style]}> 29 <Text style={plain ? styles.plainButtonText : styles.buttonText}>{children}</Text> 30 {isLoading && ( 31 <View style={styles.activityIndicatorContainer}> 32 <ActivityIndicator color="#fff" /> 33 </View> 34 )} 35 </View> 36 </TouchableNativeFeedback> 37 ) : ( 38 <TouchableOpacity {...props} style={[plain ? styles.plainButton : styles.button, style]}> 39 <Text style={plain ? styles.plainButtonText : styles.buttonText}>{children}</Text> 40 {isLoading && ( 41 <View style={styles.activityIndicatorContainer}> 42 <ActivityIndicator color="#fff" /> 43 </View> 44 )} 45 </TouchableOpacity> 46 ); 47} 48 49const styles = StyleSheet.create({ 50 activityIndicatorContainer: { 51 position: 'absolute', 52 top: 0, 53 right: 15, 54 bottom: 0, 55 justifyContent: 'center', 56 }, 57 button: { 58 backgroundColor: Colors.light.tintColor, 59 paddingHorizontal: 30, 60 paddingVertical: 15, 61 borderRadius: 4, 62 }, 63 buttonText: { 64 color: '#fff', 65 textAlign: 'center', 66 lineHeight: 20, 67 ...Platform.select({ 68 android: { 69 fontSize: 16, 70 }, 71 ios: { 72 fontSize: 15, 73 fontWeight: '600', 74 }, 75 }), 76 }, 77 plainButton: {}, 78 plainButtonText: { 79 color: Colors.light.tintColor, 80 textAlign: 'center', 81 ...Platform.select({ 82 android: { 83 fontSize: 16, 84 }, 85 ios: { 86 fontSize: 15, 87 }, 88 }), 89 }, 90}); 91