Fully customisable button component built in React Native.
Implementation:
The implementation is simple, allowing you to tailor it to your specific requirements.
Customization
text: The text displayed on the button. Default is "Press".
style: Additional styles for the button.
textStyle: Additional styles for the text.
onPress: Function to be called when the button is pressed.
variant: The type of button. Options are "default", "dark", "red", "teal", "primary", "outline", or "rounded".
hide: Boolean to hide the button. Default is false.
hideText: Boolean to hide the text. Default is false.
hideGap: Boolean to hide the gap between the icon and text. Default is false.
icon: Icon component to be displayed.
iconPosition: Position of the icon. Options are "left" or "right".
onIconPress: Function to be called when the icon is pressed.
iconStyle: Additional styles for the icon.
gap: The space between the icon and text. Default is 5.
Example Scenarios
Primary Actions: Use the primary button for main actions, like form submissions.
Secondary Actions: The outline button can be used for less prominent actions.
Icon Buttons: Include icons to enhance the user experience, such as a search or close icon.
Rounded Buttons: Ideal for actions requiring a distinct visual style, like a floating action button.
Footer
📚By incorporating the UiButton component, you can create dynamic, visually appealing, and user-friendly interfaces that enhance the usability of your applications.