Customizable button component for react-native.
npm install ez-buttonbash
npm install ez-button
`$3
bash
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
js
import { View } from 'react-native';
import EzButton from 'ez-button';const App = () => {
return (
color="#fff"
width={90}
height={50}
alignSelf="center"
fontWeight="600"
fontSize={20}
borderRadius={10}
marginTop={150}
onPress={() => navigation.navigate('Home')}
>
Log In
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
);
};
export default App;
`Button with icons
Buttons styled with icons with react-native-vector-icons and custom images(svg or png)
js
import GoogleLogo from '../../assets/icons/Google.svg'
import Ion from 'react-native-vector-icons/Ionicons'
import Mat from 'react-native-vector-icons/MaterialCommunityIcons'
alignSelf="center"
fontSize={17}
fontFamily="Poppins-Medium"
fontWeight="600"
color="#0A1723"
height={50}
borderColor="#00AEEF"
backgroundColor="#ffffff"
borderRadius={10}
borderWidth={1}
buttonIcon={
>
Apple
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
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
//icon will appear after text on the button
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
//icons will appear on both sides of text on the button
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
`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