ez-button

A customisable react-native button component.

Installation

npm

npm install ez-button

yarn

yarn add ez-button

Adding Icons

This button component supports icons but does not include any icon packages by default. To use icons:

Install an icon package from react-native-vector-icons:

Follow the installation instructions for the icon package: https://www.npmjs.com/package/react-native-vector-icons

Adding Images(svg,png,etc)

This button component supports custom svg and png images as props in place of react-native-vector-icons. Make sure your svg image setup is ready before using it. Png images work out of the box.

EzButton Sample Usage

Primary Buttons

Primary and secondary buttons for key app flows

import { View } from 'react-native';
import EzButton from 'ez-button';

const App = () => {
  return (
    <View>
 <EzButton
    backgroundColor="#00AEEF"
    color="#fff"
    width={90}
    height={50}
    alignSelf="center"
    fontWeight="600"
    fontSize={20}
    borderRadius={10}
    marginTop={150}
    onPress={() => navigation.navigate('Home')}
  >
    Log In
  </EzButton>

  <EzButton
    backgroundColor="#FFF"
    color="#00AEEF"
    width={90}
    height={50}
    alignSelf="center"
    borderColor="#00AEEF"
    borderWidth={1}
    marginTop={20}
    fontSize={20}
    fontWeight="600"
    borderRadius={10}
    onPress={() => navigation.navigate('Home')}
  >
    Sign Up
  </EzButton>
  </View>
   );
};
export default App;

Button with icons

Buttons styled with icons with react-native-vector-icons and custom images(svg or png)

import GoogleLogo from '../../assets/icons/Google.svg'
import Ion from 'react-native-vector-icons/Ionicons'
import Mat from 'react-native-vector-icons/MaterialCommunityIcons'

    <EzButton
    width={40}
    alignSelf="center"
    fontSize={17}
    fontFamily="Poppins-Medium"
    fontWeight="600"
    color="#0A1723"
    height={50}
    borderColor="#00AEEF"
    backgroundColor="#ffffff"
    borderRadius={10}
    borderWidth={1}
    buttonIcon={<Ion name="logo-apple" size={25} color="#000" />}
  >
    Apple
  </EzButton>

  <EzButton
    width={40}
    alignSelf="center"
    fontSize={17}
    fontWeight="600"
    color="#0A1723"
    height={50}
    borderColor="#00AEEF"
    backgroundColor="#ffffff"
    borderRadius={10}
    borderWidth={1}
    imagePath={GoogleLogo}
    imageWidth={20}
    imageHeight={20}
  >
    Google
  </EzButton>

  <EzButton
  width={dimensions.width * 0.9}
  alignSelf="center"
  fontSize={17}
  fontFamily="Poppins-Medium"
  fontWeight="600"
  height={50}
  backgroundColor="#F8DE7E"
  borderRadius={10}
  color="#000"
  buttonIcon="crown"
  iconComponent={Mat}
  buttonIconColor="#000"
  buttonIconSize={24}
>
  Premium
</EzButton>

//icon will appear after text on the button
<EzButton
  backgroundColor={'#00AEEF'}
  color={'#fff'}
  width={dimensions.width * 0.4}
  height={50}
  alignSelf='center'
  fontWeight={'600'}
  fontSize={20}
  borderRadius={10}
  endButtonIcon='person'
  iconComponent={Ion}
  endButtonIconColor="#000"
  endButtonIconSize={24}
>
  Sign In
</EzButton>

//icons will appear on both sides of text on the button
<EzButton
  backgroundColor={'#00AEEF'}
  color={'#fff'}
  width={dimensions.width * 0.4}
  height={50}
  alignSelf='center'
  fontWeight={'600'}
  fontSize={20}
  borderRadius={10}
  endButtonIcon='chevron-forward-outline'
  iconComponent={Ion}
  endButtonIconColor="#000"
  endButtonIconSize={24}
  buttonIcon='settings-sharp'
  buttonIconSize={24}
>
  Settings
</EzButton>

props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onPress | () => void | Required | Function to call when button is pressed | | backgroundColor | string | - | Background color of the button | | marginHorizontal | number | - | Horizontal margin on both sides | | width | number | string | - | Width of the button | | marginTop | number | - | Top margin of the button | | marginBottom | number | - | Bottom margin of the button | | marginLeft | number | - | Left margin of the button | | marginRight | number | - | Right margin of the button | | color | string | - | Text color of the button | | position | string | - | Position style ('absolute', 'relative') | | fontWeight | number | string | - | Font weight of the text | | fontFamily | string | - | Font family of the text | | borderRadius | number | - | Border radius of the button | | fontSize | number | - | Font size of the button text | | disabled | boolean | false | Whether the button is disabled | | height | number | string | - | Height of the button | | borderWidth | number | - | Width of the button border | | borderColor | string | - | Color of the button border | | left | number | - | Left position when using absolute positioning | | right | number | - | Right position when using absolute positioning | | buttonIconColor | string | - | Color of the icon (if using buttonIcon) | | alignSelf | string | - | Alignment of button within parent ('flex-start', 'center', 'flex-end', etc.) | | bottom | number | - | Bottom position when using absolute positioning | | top | number | - | Top position when using absolute positioning | | marginVertical | number | - | Vertical margin on both top and bottom | | buttonIcon | string | - | Name of the icon (if using an icon library) | | imageWidth | number | - | Width of the image when using imagePath | | imageHeight | number | - | Height of the image when using imagePath | | iconComponent | ComponentType<{ name: string; size?: number; color?: string }> | - | Icon component library to use | | imagePath | ComponentType<{ width?: number; height?: number }> | - | Custom image component to display | | disabledbackGroundColor | string | - | Background color when button is disabled | | buttonIconSize | number | - | Size of the vector icon on the button | | endButtonIcon | string | - | Name of the icon after the text (if using an icon library) | | endButtonIconSize | number | - | Size of the vector icon after the text on the button | | endButtonIconColor | string | - | Color of the icon after the text on the button (if using buttonIcon) | | endImageWidth | number | - | Width of the image after the text when using imagePath | | endImageHeight | number | - | Height of the image after the text when using imagePath | | endImagePath | ComponentType<{ width?: number; height?: number }> | - | Custom image component to display after the text | | disabledTextColor | string | - | Text color when button is disabled | | children | ReactNode | Required | Text on the button |

Dependencies

react react-native react-native-vector-icons typescript

License

MIT