rn-app-button

A highly customizable React Native button component with solid/outline modes, icon support, disabled states, and full TypeScript types.

Installation

npm install rn-app-button

or

yarn add rn-app-button

Basic Usage

import AppButton from 'rn-app-button';

<AppButton title="Click Me" onPress={() => console.log('pressed')} />

Examples

Solid Button (default)

<AppButton
  title="Submit"
  onPress={() => {}}
/>

Outline Button

<AppButton
  title="Cancel"
  mode="outline"
  borderColor="blue"
  onPress={() => {}}
/>

Custom Colors

<AppButton
  title="Delete"
  primaryBgColor="#e63946"
  primaryTextColor="#ffffff"
  onPress={() => {}}
/>

Disabled State

<AppButton
  title="Unavailable"
  disabled
  onPress={() => {}}
/>

With an Icon

import { Image } from 'react-native';

<AppButton
  title="Upload"
  icon={<Image source={require('./upload-icon.png')} style={{ width: 18, height: 18 }} />}
  iconPosition="left"
  onPress={() => {}}
/>

Custom Font Size & Weight

The type prop accepts a "fontSize-fontWeight" string:

<AppButton
  title="Bold Large"
  type="18-700"
  onPress={() => {}}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | title | string | required | Button label text | | onPress | () => void | required | Called when button is pressed | | mode | 'solid' \| 'outline' | 'solid' | Button style mode | | disabled | boolean | false | Disables the button | | primaryBgColor | string | '#007bff' | Background color (solid mode) | | primaryTextColor | string | '#fff' | Text color (solid mode) | | disabledBgColor | string | '#D1D5DB' | Background color when disabled | | disabledTextColor | string | '#000' | Text color when disabled | | borderColor | string | '#007bff' | Border/outline color | | borderWidth | number | 1 (outline), 0 (solid) | Border thickness | | radius | number | 10 | Border radius | | paddingH | number | 16 | Horizontal padding | | paddingV | number | 10 | Vertical padding | | type | string | '14-400' | Typography as "fontSize-fontWeight" | | icon | ReactNode | undefined | Icon element to render | | iconPosition | 'left' \| 'right' \| 'top' \| 'bottom' | 'left' | Position of the icon | | iconGap | number | 8 | Gap between icon and text | | onPressIn | (event) => void | undefined | Called when press starts | | onPressOut | (event) => void | undefined | Called when press ends | | onLongPress | (event) => void | undefined | Called on long press |

TypeScript

Full TypeScript support is included. You can import the props interface directly:

import AppButton, { AppButtonProps } from 'rn-app-button';

Peer Dependencies

This package requires the following peer dependencies in your project:

"react": ">=18.0.0",
"react-native": ">=0.70.0"

License

MIT © AryanDev