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-icons
react-native link react-native-vector-icons

Types of buttons

Button

import { Button } from 'react-native-custom-button';
// ...
<Button title="Button" />

TextButton

import { TextButton } from 'react-native-custom-button';
// ...
<TextButton title="Button" />

OutlineButton

import { OutlineButton } from 'react-native-custom-button';
// ...
<OutlineButton title="Button" />

FullWidthButton

import { FullWidthButton } from 'react-native-custom-button';
// ...
<FullWidthButton title="Button" />

RoundedButton

import { RoundedButton } from 'react-native-custom-button';
// ...
<RoundedButton title="Button" />

RoundedOutlineButton

import { RoundedOutlineButton } from 'react-native-custom-button';
// ...
<RoundedOutlineButton title="Button" />

UnderlinedButton

import { UnderlinedButton } from 'react-native-custom-button';
// ...
<UnderlinedButton title="Button" />

SquaredCardButton

import { SquaredCardButton } from 'react-native-custom-button';
// ...
<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 install
npm run start
npm run ios
# or
npm run android