Nonchalant Programming Master
    Wondering what’s next for npm?Check out our public roadmap! »

    @hemantv/react-native-material-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.8 • Public • Published

    React Native Material Dialog

    npm version License: MIT npm downloads

    ORIGINAL HERE: https://github.com/hectahertz/react-native-material-dialog.git

    This module allows to set background color and item text color from original module.

    Material design dialog components for React Native. JavaScript-only, for iOS and Android.

    React Native Material Dialog iOS Showcase React Native Material Dialog Android Showcase

    Getting started

    Step 1

    If you're not using Expo, install react-native-vector-icons

    Step 2

    Install react-native-material-dialog

    npm install react-native-material-dialog --save

    Example

    Included components

    Roadmap

    • Support for stacked action buttons.
    • Dialog that holds a slider.
    • Simple dialog component that accepts a string as content and styles it.

    MaterialDialog

    Basic and customizable dialog that can hold any component.

    Material Design Collection
    import { MaterialDialog } from 'react-native-material-dialog';
     
    <MaterialDialog
      title="Use Google's Location Service?"
      visible={this.state.visible}
      onOk={() => this.setState({ visible: false })}
      onCancel={() => this.setState({ visible: false })}>
      <Text style={styles.dialogText}>
        Let Google help apps determine location. This means sending anonymous
        location data to Google, even when no apps are running.
      </Text>
    </MaterialDialog>;

    Props

    Name Description Default/Required Type
    visible shows or hides the dialog required bool
    children element to be rendered in the content of the dialog required element
    onCancel callback when the dialog is closed or the cancel action is pressed required func
    onOk callback when the ok action is pressed undefined func
    cancelLabel label for the cancel action 'CANCEL' string
    okLabel label for the ok action 'OK' string
    title text for the dialog title undefined string
    titleColor color of the dialog title 'rgba(0, 0, 0, 0.87)' string
    backgroundColor color of the dialog background '#FFFFFF' string
    colorAccent color of the action text '#51BC78' string
    scrolled whether the form is in scrolled mode false bool
    addPadding automatically add paddings to the content true bool

    SinglePickerMaterialDialog

    Ready to use dialog that allows to choose only one option from a list.

    Material Design Collection
    import { SinglePickerMaterialDialog } from 'react-native-material-dialog';
     
    <SinglePickerMaterialDialog
      title={'Pick one element!'}
      items={LIST.map((row, index) => ({ value: index, label: row }))}
      visible={this.state.singlePickerVisible}
      selectedItem={this.state.singlePickerSelectedItem}
      onCancel={() => this.setState({ singlePickerVisible: false })}
      onOk={result => {
        this.setState({ singlePickerVisible: false });
        this.setState({ singlePickerSelectedItem: result.selectedItem });
      }}
    />;

    Props

    Name Description Default/Required Type
    visible shows or hides the dialog required bool
    items list of options to choose from required array of objects with a 'label' and 'value' property
    selectedItem item that will be selected when opening the dialog required object with a 'label' and 'value' property
    onCancel callback when the dialog is closed or the cancel action is pressed required func
    onOk callback when the ok action is pressed undefined func
    cancelLabel label for the cancel action 'CANCEL' string
    okLabel label for the ok action 'OK' string
    title text for the dialog title undefined string
    titleColor color of the dialog title 'rgba(0, 0, 0, 0.87)' string
    backgroundColor color of the dialog background '#FFFFFF' string
    colorAccent color of the action text '#51BC78' string
    scrolled whether the form is in scrolled mode false bool

    MultiPickerMaterialDialog

    Ready to use dialog that allows to choose several options from a list.

    Material Design Collection
    import { MultiPickerMaterialDialog } from 'react-native-material-dialog';
     
    <MultiPickerMaterialDialog
      title={'Pick some elements!'}
      colorAccent={this.props.colorAccent}
      items={LIST.map((row, index) => {
        return { value: index, label: row };
      })}
      visible={this.state.multiPickerVisible}
      selectedItems={this.state.multiPickerSelectedItems}
      onCancel={() => this.setState({ multiPickerVisible: false })}
      onOk={result => {
        this.setState({ multiPickerVisible: false });
        this.setState({ multiPickerSelectedItems: result.selectedItems });
      }}
    />;

    Props

    Name Description Default/Required Type
    visible shows or hides the dialog required bool
    items list of options to choose from required array of objects with a 'label' and 'value' property
    selectedItems items that will be selected when opening the dialog required array of objects with a 'label' and 'value' property
    onCancel callback when the dialog is closed or the cancel action is pressed required func
    onOk callback when the ok action is pressed undefined func
    cancelLabel label for the cancel action 'CANCEL' string
    okLabel label for the ok action 'OK' string
    title text for the dialog title undefined string
    titleColor color of the dialog title 'rgba(0, 0, 0, 0.87)' string
    backgroundColor color of the dialog background '#FFFFFF' string
    colorAccent color of the action text '#51BC78' string
    scrolled whether the form is in scrolled mode false bool

    References

    License

    Contact

    Tweet me @hectahertz

    Install

    npm i @hemantv/react-native-material-dialog

    DownloadsWeekly Downloads

    2

    Version

    0.7.8

    License

    MIT

    Unpacked Size

    38 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar