Material design dialog components for React Native. JavaScript-only, for iOS and Android.react-native-material-dialog
If you’re not using Expo, install
react-native-vector-icons
Install react-native-material-dialog
npm install react-native-material-dialog --save
Basic and customizable dialog that can hold any component.
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>;
Ready to use dialog that allows to choose only one option from a list.
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 });
}}
/>;
Ready to use dialog that allows to choose several options from a list.
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 });
}}
/>;
Author: hectahertz
GitHub: https://github.com/hectahertz/react-native-material-dialog
#react-native #reactjs