Button Component

The Button component is a customizable, reusable React Native button that supports various styles, sizes, and states. It's designed to be flexible and can be used across different parts of the application.

Key Features

• Customizable appearance (filled or outline)
• Multiple size options (sm, lg, xl, default)
• Loading state with activity indicator
• Disabled state
• Custom colors for button and text
• Custom font type support
• Accessibility support via testId

Props

Prop	Type	Description
title	string	The text displayed on the button
onPress	() => void	Function called when the button is pressed
buttonStyle	ViewStyle	Custom styles for the button container
textStyle	TextStyle	Custom styles for the button text
isLoading	boolean	Whether to show a loading indicator
isOutline	boolean	Whether to use an outline style
activityIndicatorColor	string	Color of the loading indicator
size	'sm' | 'lg' | 'xl' | 'default'	Size of the button
color	string | undefined	Background color of the button
textColor	string	Color of the button text
fontType	string	Font family for the button text
testId	string	Test ID for accessibility
disabled	boolean	Whether the button is disabled

Usage

import { Button } from "@appmaker-xyz/ui";

<Button
  title="Press Me"
  onPress={() => console.log("Button pressed")}
  size="lg"
  color="#007AFF"
  isOutline={false}
  isLoading={false}
/>;