Button Component

A versatile and customizable button component for React Native applications with multiple variants and styling options.

Features

🎨 Multiple Variants - Primary, Secondary, Outline, and Transparent button styles
🎯 Flexible Styling - Extensive customization options for colors, borders, and dimensions
🔗 Icon Support - Left and right icon placement capabilities
♿ Accessibility Ready - Built-in accessibility features
🎨 Theme Integration - Seamlessly integrates with the design system
🎮 Touch Feedback - Configurable opacity and press animations

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { Button } from 'rn-base-component'

export default function App() {
  return 
}

Button Variants

Primary Button

⚛️TSX

import { ButtonPrimary } from 'rn-base-component'
Primary Action

Secondary Button

⚛️TSX

import { ButtonSecondary } from 'rn-base-component'
Secondary Action

Outline Button

⚛️TSX

import { ButtonOutline } from 'rn-base-component'
Outline Button

Transparent Button

⚛️TSX

import { ButtonTransparent } from 'rn-base-component'
Transparent Button

Advanced Usage

With Icons

⚛️TSX

import { Button } from 'rn-base-component'
import { Icon } from 'react-native-vector-icons/MaterialIcons'

Custom Styling

⚛️TSX



const styles = StyleSheet.create({
  customButton: {
    marginVertical: 10,
  },
  customButtonText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
})

Outline Variant

⚛️TSX

Disabled State

⚛️TSX

API Reference

ButtonProps

Prop	Type	Default	Description
`textColor`	`string`	`theme.textColor`	Color of the button text
`backgroundColor`	`string`	`theme.backgroundColor`	Background color of the button
`disabled`	`boolean`	`false`	Disable interactions for the component
`disabledColor`	`string`	`theme.disabledColor`	Background color when disabled
`outline`	`boolean`	`false`	Enable outline style
`outlineColor`	`string`	`theme.primaryBorder`	Color of the outline border
`outlineWidth`	`number`	`1`	Width of the outline border
`borderRadius`	`number`	`theme.borderRadius`	Custom border radius
`textSize`	`number`	`theme.fontSize`	Size of the button text
`leftIcon`	`ReactNode`	`undefined`	Icon to display on the left side
`rightIcon`	`ReactNode`	`undefined`	Icon to display on the right side
`textProps`	`TextProps`	`undefined`	Additional props for the text component
`textStyle`	`StyleProp<TextStyle>`	`undefined`	Custom style for the text
`style`	`StyleProp<ViewStyle>`	`undefined`	Custom style for the container

Inherited Props

The Button component also accepts all props from React Native's TouchableOpacityProps.

Common Use Cases

Form Actions

⚛️TSX


  Submit
  Cancel


const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 12,
  },
})

⚛️TSX

Loading States

⚛️TSX

Best Practices

Consistent Sizing - Use theme values for consistent button heights
Clear Labels - Use descriptive text that clearly indicates the action
Icon Placement - Place icons logically (e.g., arrow-right for "Next")
Loading States - Provide visual feedback during async operations
Accessibility - Ensure sufficient color contrast and touch targets
Disabled States - Clearly indicate when buttons are not interactive

Performance Note

Avoid complex operations in the onPress handler. Use loading states for async operations.