Skip to content

Instantly share code, notes, and snippets.

@suprith-s-reddy
Last active Jun 27, 2021
Embed
What would you like to do?
Button Atom Component
import * as React from 'react';
import {
TouchableOpacity,
TouchableOpacityProps,
View,
ViewStyle,
StyleProp,
ActivityIndicator,
} from 'react-native';
import styles from './styles';
interface ButtonProps extends TouchableOpacityProps {
children: React.ReactNode;
backgroundColor?: string;
icon?: React.ReactElement;
isTransparent?: boolean;
isFullWidth?: boolean;
isChildrenCentered?: boolean;
isLoading?: boolean;
childrenContainerStyle?: StyleProp<ViewStyle>;
}
const Button: React.FC<ButtonProps> = ({
children,
icon,
backgroundColor,
isTransparent,
isFullWidth,
isChildrenCentered = true,
isLoading,
style,
childrenContainerStyle,
...rest
}) => {
const baseBackgroundColor = '#1650c0';
let buttonBackgroundColor = backgroundColor || baseBackgroundColor;
let buttonBorderColor = backgroundColor || baseBackgroundColor;
let buttonBorderWidth = 1;
let padding = 15;
let width = 'auto';
let align:
| 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly'
| undefined = 'flex-start';
if (isTransparent) {
buttonBackgroundColor = 'transparent';
buttonBorderWidth = 0;
padding = 0;
}
if (isFullWidth) {
width = '100%';
}
if (isChildrenCentered) {
align = 'center';
}
return (
<TouchableOpacity
style={[
styles.button,
{
backgroundColor: buttonBackgroundColor,
borderColor: buttonBorderColor,
borderWidth: buttonBorderWidth,
padding: padding,
width,
},
style,
]}
{...rest}
>
{icon && <View style={styles.iconContainer}>{icon}</View>}
<View
style={[
styles.buttonChildrenContainer,
{
width,
justifyContent: align,
},
childrenContainerStyle,
]}
>
{isLoading ? (
<ActivityIndicator size="small" color="white" />
) : (
children
)}
</View>
</TouchableOpacity>
);
};
export default Button;
import Button from './Button';
export default Button;
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
button: {
paddingTop: 10,
paddingBottom: 10,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
buttonChildrenContainer: {
flexDirection: 'row',
},
iconContainer: {
marginRight: 5,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment