@react-native-ui-design/button

@react-native-ui-design/button have lot of predefined customizations

Installation

npm install @react-native-ui-design/button

Required dependencies

npm i react-native-paper react-native-safe-area-context react-native-vector-icons

Usage

Wrap your root component in PaperProvider from react-native-paper. This will usually be in the index.js file. If you have an Expo project, you can do this inside the exported component in the App.js file.

Example:

import * as React from 'react';
import { AppRegistry } from 'react-native';
import { PaperProvider } from 'react-native-paper';
import { name as appName } from './app.json';
import App from './src/App';

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

Import Button component and use

Example:

import { Button } from '@react-native-ui-design/button';

return (
    <Button mode="contained">
        Contained Button
    </Button>
)

User Guide

Props

Props

| Prop name | Description | type | Default value | | ------------------------- | --------------------------------------------- | --------------------------------- | ------------------------- | | mode | Button mode | text | contained |
| | | | outlined | |
| | | | contained | |
| | | | elevated | |
| | | | contained-tonal | | | style | Button style | ViewStyle | N/A | | onPress | Function call for on button press | Function | N/A | | textColor | Button title color | string | #3075bb | | loading | Button loading state | boolean | false | | disabled | Button disable state | boolean | false | | leftIcon | Left side icon of Button | IconSource | N/A | | rightIcon | Right side icon of Button | IconSource | N/A | | labelStyle | Button title style | TextStyle | N/A | | testID | Test id for testing purpose | string | N/A | | appColors | Button theme | {primary: string;} | {primary: '#3075bb',} | | children | Children of the Button | ReactNode | N/A |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

The MIT License.

Author

Thank you

Sponsors

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.