import { ActivityIndicator, StyleSheet, TouchableOpacity, TouchableOpacityProps, } from 'react-native'; import React from 'react'; import {COLOURS} from '../../constants/colour'; import LinearGradient, { LinearGradientProps, } from 'react-native-linear-gradient'; interface CustomButtonProps extends TouchableOpacityProps { loading?: boolean; linearGradientColours?: any; linearGradientStart?: any; linearGradientEnd?: any; } const CustomButton: React.FC<CustomButtonProps> = ({ loading = false, activeOpacity = 0.5, style, disabled, children, ...props }) => { return ( <TouchableOpacity disabled={disabled} {...props} style={[ styles.container, { backgroundColor: disabled ? COLOURS.DARK_GREY : 'transparent', }, style, ]}> {props.linearGradientColours ? ( <LinearGradient colors={ disabled ? [COLOURS.DARK_GREY, COLOURS.LIGHT_GREY] : props.linearGradientColours } start={props.linearGradientStart} end={props.linearGradientEnd} style={[styles.container, styles.linearGradientStyle]}> {loading ? <ActivityIndicator color={COLOURS.WHITE} /> : children} </LinearGradient> ) : loading ? ( <ActivityIndicator color={COLOURS.WHITE} /> ) : ( children )} </TouchableOpacity> ); }; export default CustomButton; const styles = StyleSheet.create({ container: { height: 50, width: 100, justifyContent: 'center', alignItems: 'center', borderRadius: 5, }, linearGradientStyle: { flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center', }, });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter