rn-flexible-button 🚀

📖 Overview

rn-flexible-button is a flexible and reusable button component for React Native (CLI).
It helps you maintain a consistent button UI across your app with support for icons, images, loading states, and fully customizable styles — all through a single component.

🛠️ Installation

Install the package using npm:

npm install rn-flexible-button

✨ Key Features

• 🎨 Fully customizable styles
• 🧩 Icon support (vector / image / svg)
• ↔️ Left & right icon positioning
• ⏳ Loading state handling
• 🚫 Disabled state with custom color
• 🎯 Multiple variants (primary, outline, ghost)
• 📱 Works on Android & iOS
• 🧼 Clean and reusable API

🧩 Use Directly

import FlexButton from 'rn-flexible-button';

<FlexButton
  title="Item"
  onPress={() => console.log('Pressed')}
  iconPosition="left"
  variant="primary"
  disabledColor="#DC2626"
  style={{
    backgroundColor: '#DC2626',
    borderRadius: 24,
    paddingHorizontal: 28,
    marginVertical: 12,
    marginHorizontal: 20,
    width: 200,
    alignSelf: 'center'
  }}
  textStyle={{
    fontSize: 16,
    letterSpacing: 0.5,
  }}
/>

✨ Props Can Be Used

| Prop | Description | Default | |------|------------|---------| | title | Text displayed inside the button | null | | onPress | Function triggered when button is pressed | null | | icon | Custom icon element (vector / image / svg) | null | | iconPosition | Position of icon as: left or right | 'left' | | variant | Button style as: primary, outline, ghost | 'primary' | | loading | Shows loading indicator and disables button | false | | disabled | Disables button interaction | false | | disabledColor | Background color when button is disabled | '#9CA3AF' | | style | Custom style for button container | null | | textStyle | Custom style for button text | null |

📸 Preview

🚀 Use Case