rn-custom-button

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