rn-awesome-button

A versatile and customizable button component for React Native, supporting gradients, loading states, icons, and more.

---

✨ Features

• Supports solid or gradient backgrounds
• Configurable loading indicator
• Optional start and end icons
• Outlined or filled styles
• Fully styleable

---

📦 Installation

1npm install rn-awesom-button
2# or
3yarn add rn-awesom-button

Then install the required peer dependencies:

1npm install react-native-linear-gradient

---

🚀 Usage

1import Button from "rn-awesome-button";
2
3export default function App() {
4  return(
5    <Button
6      onPress={() => {
7        console.log("pressed")
8      }}
9    >
10      Click Me
11    </Button>;
12  )
13}

---

⚙️ Props

Prop	Type	Default	Description
children	React.ReactNode	undefined	The label inside the button.
onPress	() => void	undefined	Function to call on press.
isLoading	boolean	false	Shows a loading spinner. Disables the button.
isDisabled	boolean	false	Disables the button without loading indicator.
startIcon	React.ReactNode	undefined	Icon to show before the label.
endIcon	React.ReactNode	undefined	Icon to show after the label.
containerStyle	StyleProp<ViewStyle>	undefined	Style override for the TouchableOpacity container.
textStyle	StyleProp<TextStyle>	undefined	Style override for the button label text.
gradientWrapperStyle	StyleProp<ViewStyle>	undefined	Style for the LinearGradient wrapper when useGradients is true.
activityIndicatorColor	string	"#fff"	Color of the loading spinner.
pendingActionBackgroundColor	string	"#888"	Background when loading or disabled.
useGradients	boolean	false	Whether to use a gradient background.
gradientColors	string[]	["#333", "#999"]	Colors used in the gradient.
gradientStart	{ x: number; y: number; }	{ x: 0, y: 0 }	Gradient start coordinate.
gradientEnd	{ x: number; y: number; }	{ x: 1, y: 0 }	Gradient end coordinate.
isOutlined	boolean	false	Renders button as outlined (transparent with border).

---

📚 Contributing

Issues and pull requests are welcome! Please open an issue first to discuss major changes.

Made with ❤️ by Dhia Ben Hamouda