react-native-custom-buttons
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

react-native-custom-buttons

react native custom button based on pure JavaScript with good expansibility.

Installation

npm install react-native-custom-buttons

Setup

If you want to use icons install react-native-vector-icons

npm install react-native-vector-icons

Buttons Component

Props

Prop Required Type Description
onPress Yes Function Callback function to be executed on button press.
containerStyles No ViewStyle Custom styles for the button container.
type Yes "Text", "SVG", or "vector Icon" Type of button. Choose one

iconProps

Prop Required Type Description
fontFamily Yes 'AntDesign', 'Entypo', ... Font family for the icon.
iconSize No Number Size of the icon. Default is 20.
iconName Yes String Name of the icon.
iconColor Yes ColorValue Color of the icon.

textProps

Prop Required Type Description
title No String Text content for the button.
textStyle No TextStyle Custom styles for the text.

svgProps

Prop Required Type Description
children No ReactNode Child components for the SVG button.

loadingProps

Prop Required Type Description
isLoading No Boolean Indicates if the button is in a loading state.
loaderColor No ColorValue Color of the loading indicator.
loaderSize No Number or 'small' or 'large' or undefined Size of the loading indicator. Default is small.

Example Usage

import Buttons from 'path/to/Buttons';

const IconButton = () => (
  <Buttons
    onPress={() => console.log('Icon button pressed')}
    type="vector Icon"
    fontFamily="FontAwesome"
    iconSize={30}
    iconName="star"
    iconColor="yellow"
  />
);

const TextButton = () => (
  <Buttons
    onPress={() => console.log('Text button pressed')}
    type="Text"
    title="Click me"
    textStyle={{ color: 'white' }}
  />
);

const SVGButton = () => (
  <Buttons
    onPress={() => console.log('SVG button pressed')}
    type="SVG"
  >
    {/* Your SVG component here */}
  </Buttons>
);

For a usage example, refer to the example directory in the repository.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Package Sidebar

Install

npm i react-native-custom-buttons

Weekly Downloads

17

Version

0.2.2

License

MIT

Unpacked Size

987 kB

Total Files

203

Last publish

Collaborators

  • abhinandvk41
  • akshay_k