react-native-customize-btns

A customizable button component for React Native applications, designed to support both Android and iOS platforms with flexibility in styling, icons, and images.

Installation

To install the package, run:

npm install react-native-customize-btns

Or, if you prefer using yarn:

yarn add react-native-customize-btns

Usage

First, import the Button component from the package:

import React from 'react';
import { Button } from 'react-native-customize-btns';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Image } from 'react-native';
// Make sure to replace './path/to/your/assets' with the actual path
import { images } from './path/to/your/assets';

You can then use the Button component in your application as shown in the following examples:

Basic Button

<Button
  title="Click Me"
  onPress={() => console.log('Button pressed!')}
  style={{ backgroundColor: 'blue', padding: 10 }}
  textStyle={{ color: 'white', fontSize: 24 }}
/>

Button with Left Icon

const LeftIcon = <MaterialIcons name="menu" size={24} color="white" />;

<Button
  title="Menu"
  onPress={() => console.log('Menu button pressed!')}
  style={{ backgroundColor: 'green', padding: 10 }}
  textStyle={{ color: 'white', fontSize: 24 }}
  leftIcon={LeftIcon}
/>

Button with Right Icon

const RightIcon = <MaterialIcons name="home" size={24} color="white" />;

<Button
  title="Home"
  onPress={() => console.log('Home button pressed!')}
  style={{ backgroundColor: 'orange', padding: 10 }}
  textStyle={{ color: 'white', fontSize: 24 }}
  rightIcon={RightIcon}
/>

Button with Both Icons

<Button
  title="Both Sides"
  onPress={() => console.log('Button with icons on both sides pressed!')}
  style={{ backgroundColor: 'purple', padding: 10 }}
  textStyle={{ color: 'white', fontSize: 24 }}
  leftIcon={LeftIcon}
  rightIcon={RightIcon}
/>

Button with Left Image

<Button
  title="LinkedIn"
  onPress={() => console.log('LinkedIn button pressed!')}
  style={{ backgroundColor: 'purple', padding: 10 }}
  textStyle={{ color: 'white', fontSize: 24 }}
  leftImage={<Image source={images.linkedin} style={{ resizeMode: 'contain', height: 30, width: 60 }} />}
/>

Button with Right Image

<Button
  title="Twitter"
  onPress={() => console.log('Twitter button pressed!')}
  style={{ backgroundColor: 'purple', padding: 10 }}
  textStyle={{ color: 'white', fontSize: 24 }}
  rightImage={<Image source={images.twitter} style={{ resizeMode: 'contain', height: 30, width: 60 }} />}
/>

Props

The Button component accepts the following props to customize its appearance and behavior:

• title: The text to display on the button.
• onPress: Function to call when the button is pressed.
• style: Custom styles for the button's container.
• textStyle: Custom styles for the button's title text.
• activeOpacity: Opacity of the button when pressed.
• leftIcon, rightIcon: Custom icon components to display on the left or right side of the button title.
• leftImage, rightImage: Custom image components to display on the left or right side of the button title.
• iconStyle: Custom styles for the icon's container.

Contributing

Contributions are welcome! Please submit a pull request or create an issue for any features or fixes.