React Native Custom Button
🕹 Super simple custom button that overrides default React Native button style
Installation
yarn install react-native-custom-button
Dependencies
Before start using this lib we need to add react-native-vector-icons
dependency:
yarn add react-native-vector-iconsreact-native link react-native-vector-icons
Types of buttons
Button
;// ...<Button title="Button" />
TextButton
;// ...<TextButton title="Button" />
OutlineButton
;// ...<OutlineButton title="Button" />
FullWidthButton
;// ...<FullWidthButton title="Button" />
RoundedButton
;// ...<RoundedButton title="Button" />
RoundedOutlineButton
;// ...<RoundedOutlineButton title="Button" />
UnderlinedButton
;// ...<UnderlinedButton title="Button" />
SquaredCardButton
;// ...<SquaredCardButton title="Button" />
Buttons options
Prop | Type | Required | Description | Support |
---|---|---|---|---|
title | String | true | Button title | * |
buttonTintColor | String | false | Button background color | * |
buttonTextColor | String | false | Button text color | * |
buttonBorderColor | String | false | Border color to be used by some type of buttons | * |
onPress | Function | false | Callback for onPress event | * |
buttonStyle | Object | false | Custom button style object | * |
buttonTextStyle | Object | false | Custom text style object | * |
buttonIcon | String/URL/Image | false | Icon image to render (.svg not supported) . Support icons from react-native-vector-icons. Use this prop in the following format: iconSource/iconName |
SquaredCardButton |
buttonIconSize | Number | false | Icon size | SquaredCardButton |
buttonIconColor | Color | false | Color to be used in icon when using the react-native-vector-icons | SquaredCardButton |
Example
Access the example app on examples/RNCustomButtonPlayground
and:
npm installnpm run startnpm run ios# or npm run android