CustomButton Component

The CustomButton is a highly customizable React Native button component that supports text, icons, and various styling options. It is designed to be flexible and easy to integrate into your React Native projects.

Installation

To use the CustomButton component in your project, you can install it via npm:

npm install 'react-native-mybuttonlibrary'

Usage

To use the CustomButton component, simply import it into your React Native project and include it in your JSX:

import React from 'react';

import { View } from 'react-native';

import CustomButton from 'custom-button';

const App = () => {

const handlePress = () => { console.log('Button Pressed!');

};

return (

<View>

  <CustomButton
    buttonText="Click Me"
    onPress={handlePress}
    buttonStyle={{ backgroundColor: 'green' }}
    textStyle={{ color: 'white' }}
  />

</View>

); };

export default App;

Props

| Prop Name | Type | Description | Default Value | |-----------------------|-------------------------------|------------------------------------------------------------|---------------| | onPress | () => void | Function to be called when the button is pressed. | Required | | buttonText | string | The text to be displayed inside the button. | Required | | iconSource | ImageSourcePropType | The source of the icon to be displayed alongside the text. | undefined | | buttonStyle | StyleProp<ViewStyle> | Custom styles for the button container. | undefined | | iconStyle | StyleProp<ImageStyle> | Custom styles for the icon. | undefined | | textStyle | StyleProp<TextStyle> | Custom styles for the button text. | undefined | | isButtonDisabled | boolean | If true, the button will be disabled and styled accordingly. | false |

Styles

const styles = StyleSheet.create({

disabledButton:

{ backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', alignSelf: 'center', width: '85%', marginTop: 44, borderRadius: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.8, shadowRadius: 3, elevation: 5, paddingVertical: 15, },

submitButton: { flexDirection: 'row', backgroundColor: '#5698D3', alignItems: 'center', justifyContent: 'center', alignSelf: 'center', width: '85%', marginTop: 44, borderRadius: 10, paddingVertical: 15, },

submitButtonText: { color: 'white', fontSize: 16, fontWeight: 'bold', },

disabledButtonText: { color: '#ccc', fontSize: 16, fontWeight: 'bold', },

icon: { width: 28, height: 28, resizeMode: 'contain', },

});

Example

Here’s an example of how you can use the CustomButton with an icon and custom styles:

import React from 'react'; import { View } from 'react-native'; import CustomButton from 'custom-button'; import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => { const handlePress = () => { console.log('Button with Icon Pressed!'); };

return (

<View>

  <CustomButton
    buttonText="Click Me"
    onPress={handlePress}
    iconSource={Icon}
    buttonStyle={{ backgroundColor: 'purple', paddingHorizontal: 20 }}
    textStyle={{ color: 'white', fontSize: 18 }}
    iconStyle={{ tintColor: 'white', marginRight: 10 }}
  />

</View>

); };

export default App;

Contributing

If you'd like to contribute to this project, please fork the repository and submit a pull request. We welcome contributions of all kinds, including bug fixes, feature additions, and documentation improvements.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have any questions, please open an issue on the GitHub repository.

This version has been structured using appropriate headers, code blocks, tables for props, and sections for installation, usage, styling, and contribution in the standard README.md format.