0.2.0 • Published 6 months ago
react-native-custom-buttons v0.2.0
react-native-custom-buttons
react native custom button based on pure JavaScript with good expansibility.
Installation
npm install react-native-custom-buttonsSetup
If you want to use icons install react-native-vector-icons
npm install react-native-vector-iconsButtons Component
Props
| Prop | Required | Type | Description |
|---|---|---|---|
| onPress | Yes | Function | Callback function to be executed on button press. |
| containerStyles | No | ViewStyle | Custom styles for the button container. |
| type | Yes | "Text", "SVG", or "vector Icon" | Type of button. Choose one |
iconProps
| Prop | Required | Type | Description |
|---|---|---|---|
| fontFamily | Yes | 'AntDesign', 'Entypo', ... | Font family for the icon. |
| iconSize | No | Number | Size of the icon. Default is 20. |
| iconName | Yes | String | Name of the icon. |
| iconColor | Yes | ColorValue | Color of the icon. |
textProps
| Prop | Required | Type | Description |
|---|---|---|---|
| title | No | String | Text content for the button. |
| textStyle | No | TextStyle | Custom styles for the text. |
svgProps
| Prop | Required | Type | Description |
|---|---|---|---|
| children | No | ReactNode | Child components for the SVG button. |
loadingProps
| Prop | Required | Type | Description |
|---|---|---|---|
| isLoading | No | Boolean | Indicates if the button is in a loading state. |
| loaderColor | No | ColorValue | Color of the loading indicator. |
| loaderSize | No | Number or 'small' or 'large' or undefined | Size of the loading indicator. Default is small. |
Example Usage
import Buttons from 'path/to/Buttons';
const IconButton = () => (
<Buttons
onPress={() => console.log('Icon button pressed')}
type="vector Icon"
fontFamily="FontAwesome"
iconSize={30}
iconName="star"
iconColor="yellow"
/>
);
const TextButton = () => (
<Buttons
onPress={() => console.log('Text button pressed')}
type="Text"
title="Click me"
textStyle={{ color: 'white' }}
/>
);
const SVGButton = () => (
<Buttons
onPress={() => console.log('SVG button pressed')}
type="SVG"
>
{/* Your SVG component here */}
</Buttons>
);For a usage example, refer to the example directory in the repository.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT