1.0.12 • Published 2 years ago
my-pressable-component1 v1.0.12
MyButton Component
Installation
To use the MyButton component in your React Native project, follow these steps:
Install React Native if you haven't already:
java
Copy code npm install -g react-native-cli Create a new React Native project:
csharp
Copy code react-native init MyProject Copy the MyButton.js file into your project's component directory.
Usage To use the MyButton component, import it into your desired file and render it with the desired props. Here's an example:
javascript
Copy code
import React from 'react';
import { View } from 'react-native';
import MyButton from './components/MyButton';
const App = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<MyButton
title="Click Me"
onPress={() => {
console.log('Button pressed!');
}}
// Customize the button's appearance by passing additional props
height={50}
width={150}
bgColor="#3498db"
margin={10}
borderRadius={5}
justify="center"
align="center"
textColor="#fff"
textSize={18}
textAlign="center"
textWeight="bold"
/>
</View>
);
};
export default App;
Props
The MyButton component accepts the following props:
title (string, required): The text displayed on the button.
onPress (function, required): The callback function to be executed when the button is pressed.
height (number): The height of the button (default: 40).
width (number): The width of the button (default: 120).
bgColor (string): The background color of the button (default: '#e0e0e0').
margin (number): The margin around the button (default: 0).
borderRadius (number): The border radius of the button (default: 5).
justify (string): The justify content property of the button (default: 'center').
align (string): The align items property of the button (default: 'center').
textColor (string): The color of the button text (default: '#000').
textSize (number): The font size of the button text (default: 16).
textAlign (string): The text alignment of the button text (default: 'center').
textWeight (string): The font weight of the button text (default: 'normal').
Feel free to customize the component's props to suit your specific needs.
You can include this README file in your project's repository or any other appropriate location to provide documentation and usage instructions for the MyButton component.