@react-native-ui-design/dialog

@react-native-ui-design/dialog have lots of predefined customizations & features

Installation

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

Required dependencies

npm i @react-native-ui-design/button react-native-paper react-native-responsive-helper 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 Dialog component and use

Example:

import Dialog from '@react-native-ui-design/dialog';

return (
    // ...
    <Dialog
        visible={true}
        title="@react-native-ui-design/dialog"
        message="@react-native-ui-design/dialog have lots of predefined customizations & features"
        onPressClose={() => void}
        acceptText="Accept"
        rejectText="Reject"
        onAccept={() => void}
        onReject={() => void}
        shouldReverseActionButton={true}
        isDismissable={true}
        onDismiss={() => void}
    />
    // ...
)

User Guide

Props

Prop name	Description	Default Value	Example Value	Required
visible	Show or hide Dialog	N/A	true	✅
title	Title of the dialog	N/A	"Dialog Title"	❌
message	Content of the dialog	N/A	"Dialog description"	❌
messageStyle	Dialog message style (ViewStyle)	N/A	{height: 100}	❌
acceptText	Accept action button title	N/A	"Accept"	❌
onAccept	Function call on press Accept	N/A	() => void	❌
rejectText	Reject action button title	N/A	"Dialog Title"	❌
onReject	Function call on press Reject	N/A	() => void	❌
isDismissable	Determines whether clicking outside the dialog dismiss it	false	true	❌
onDismiss	Function call on clicking outside the dialog dismiss it	N/A	() => void	❌
acceptButtonProps	Accept button props	N/A	mode="contained"	❌
rejectButtonProps	Reject button props	N/A	mode="contained"	❌
contentStyle	Dialog message content style (ViewStyle)	N/A	{height: 100}	❌
actionContainerStyle	Dialog action button container style (ViewStyle)	N/A	{height: 100}	❌
actionContentStyle	Dialog action button content style (ViewStyle)	N/A	{height: 100}	❌
onPressClose	Function call on press dialog close button	N/A	() => void	❌
testID	Test id for testing purpose	N/A	"dialogID"	❌
children	Dialog childen (ReactNode)	N/A	<Text>Dialog children</Text>	❌
shouldReverseActionButton	Reverse the action button position	false	true	❌

---

Notes

• For more details about Button props please refer here: @react-native-ui-design/button

Contributing

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

License

The MIT License.

Author

Abiraman K

Thank you

Sponsors

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

---