hectahertz / react-native-material-dialog Goto Github PK

Hey man! Great library. Just wondering if you're interesting in having typescript definitions for this library (for those wanting to use react native with typescript). I already have stubbed them out in a few of my projects. Let me know @hectahertz

@hectahertz :
Hi, I'm using "SinglePickerMaterialDialog",
I realized, if by mistake the user does not press any of the proposed options and then presses on "OK".
The following error is given:
Bug - undefined is not object (evaluating 'result.selectitem.value')

It would be possible to consider the case in which the user does not press anything and press ok.
So not from this mistake.

I was wondering if you were interested in adding customizable styles, should be fairly easy pr, the default elevation of 24 leaves an absurdly huge shadow around the modal for my taste.

The onOk method on MultiPickerMaterialDialog should really take { selectedItems: PickerItem[] } as an argument. You can see it by looking at the code examples.

It display when I add SinglePickerMaterialDialog and MaterialDialog in component.

This is my code:

<SinglePickerMaterialDialog
                        title={'Category'}
                        items={CATEGORIES.map((row, index) => ({ value: index, label: row }))}
                        visible={this.state.visibleCategory}
                        selectedItem={this.state.selectedItem}
                        onCancel={() => this.setState({ visibleCategory: false })}
                        onOk={(result) => {
                            this.setState({
                                selectedItem: result.selectedItem,
                                category: result.selectedItem.label,
                                visibleCategory: false
                            });
                            AsyncStorage.setItem('Category', '' + result.selectedItem.value);
                            this.props.changeSetting(result.selectedItem.value);
                        }} />

If I comment it, this warning disappear.

Is there some way to build a dialog with only one response button?

Hey @hectahertz what do you think about combining your library with https://github.com/beefe/react-native-picker.

Like for iOS show his picker and android show your SingleItemPicker

Code snippet:

<MaterialDialog
	visible={this.state.isVisible}
	okLabel={'OK'}
	onOk={this.closeModal}
	onCancel={this.closeModal}
	scrolled={true}
>
	<ScrollView>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
		<Text style={{padding: 100}}>Lorem ipsum ....</Text>
	</ScrollView>
</MaterialDialog>

The View containing the children should set onStartShouldSetResponder , as detailed in this SO:
https://stackoverflow.com/questions/33060859/react-native-touchable-is-disabling-scrollview

Tested the fix and it works well. I'll submit a PR.

Hi @hectahertz

Is there a way thatI can put the title below the image, currently when I create a custom content for the dialog box the title appears on top of the dialog

If I put a description text below the title this is what I'm getting:

Is there a way how can I do this?

Also te alert dialog seems have a fix height, because if I have a long text content its like getting an overflow: hidden

Hi I am facing problem when using function with return to show Material dialog for loading dynamic values.
This is my code
Please help me I am new in RN

showMaterialDialog(key) {
        this.state.data.filter(obj => {
            return obj.key === key;
        }).map((obj, idx) => {
            return (
                <MaterialDialog
                    title="Use Google's Location Service?"
                    visible={true}
                    onOk={() => this.setState({ visible: false })}
                    onCancel={() => this.setState({ visible: false })}>
                </MaterialDialog>
            )
        })

    }

I am calling this function onPress of Text

Hey this package is awesome! Thanks for the hard work.

I ran into an issue when the scrolled attribute is added to SinglePickerMaterialDialog, and there are enough items to scroll, then the footer is slightly cut off. I can't imagine this is every device, but I tested both on the Galaxy 6S and the Nexus 5X.

OK - Not Enough Items to Scroll	Bug - Enough Items to Scroll

Please let me know if I can provide more details. Thanks again.

Edit: I was also able to reproduce on both devices with the code provided in the example.
Edit: Does work on iOS.

Hey! 👋

This is great! Thank you for working on this. 🙏

I have a use-case where I'd like to control the padding of MaterialDialog and set it to 0.

Negative margins work on iOS, but on Android, I'm not able to get past paddingTop set here: 😭

Possible Solutions

1. Adding a modalContainerStyle prop, and merging it with the styles.modalContainer View.

2. Instead of setting paddingTop in styles.modalContainer, setting it in styles.contentContainer, but then we'll have to set it in all the styles.containers individually.

Any thoughts on this? Thanks for your time! 😃

Summery

ListView is deprecated.
https://facebook.github.io/react-native/docs/listview
So, reimplement single picker dialog and material picker dialog with FlatList.

hi. i think it will be awesome to put "Select All" option in MultiPickerMaterialDialog. Right now its not there.
I was asked by different clients to must put this option so kindly help in this regard.

thanks

with onOk and onCancel defined the buttons in dialog aren't displaying.

Content and Title are displaying correctly.

                    < SinglePickerMaterialDialog
                        title={this.props.translate("TEMPLATE.TITLE")}
                        items={this.props.options.map((row, index) => ({value: index, label: row.cost}))}
                        visible={this.state.singlePickerVisible}
                        selectedItem={this.state.selectedTraining}
                        colorAccent={Colors.colors.ui.primaryDark}
                        backgroundColor={Colors.colors.ui.primary}
                        onCancel={() => this.setState({singlePickerVisible: false})}
                        onOk={(result) => {
                            this._select(result)
                        }}
                        />

![image](https://user-images.githubusercontent.com/143454/38277289-e7ddc926-3765-11e8-92b9-7145a02d3148.png)

If no item is selected, then press the ok key, the app restarts every time.
One possible solution could be that in:

   OnOk = {() => this.props.onOk ({
           SelectedItem: this
           .state
           .Rows [this.state.selectedIndex]
         })}

You must check the value of this.state.selectedIndex
guy:

  onOk={() =>
if(this.state.selectedIndex ) != undefined) 
 this.props.onOk({
          selectedItem: this
          .state
          .rows[this.state.selectedIndex],
        }))}

He could not try it again.

After selecting an Item in SinglePickerMaterialDialog and pressing "OK" the dialog box disappears. If we open the SinglePickerMaterialDialog again, it shows the first item selected by default instead of last selected item.

Tried changing the same through state as well but it's not working.

In below example, we have passed hardcoded object as "selectedItem". Still it is picking up
the 1st object (with key=0) as default selected item.

SinglePickerMaterialDialog
colorAccent = '#FD8000'
title = {
'Choose Filter Option'
}
scrolled
items = {
[{
key: 0,
label: 'Assigned to me123'
},
{
key: 1,
label: 'Priority'
},
{
key: 2,
label: 'Unassigned'
},
{
key: 3,
label: 'Everything'
},
]
}
visible = {
this.state.scrolledSinglePickerVisible
}
selectedItem = {
{
key: 3,
label: 'Everything'
}
}

onCancel = {
() => this.setState({
scrolledSinglePickerVisible: false
})
}
onOk = {
result => {
this.setState({
scrolledSinglePickerVisible: false
}, () => {});
}
}
/>

Summery

When using combination single and double byte character sentence as Picker dialog label, double byte characters are shifted up a little compared to single byte character in iOS.
On Android work fine and perfect!

Reporoduce example

Exmample snack is here

In snack, this year is 2017 is correctly displayed.
The other hand 今年は2018年です and 올해는 2016 년입니다 are displaced.
Double-byte characters 今年は are shifted up a little compared to single-byte characters 2018.

Is there a solution to fix it?

P.S.
react-native-material-dialog is awesome and very useful! Thanks! 👍

I define state={ seleted:false,selectitems:[] }
<MultiPickerMaterialDialog title={'選擇要顯示的數據'} titleColor={'#555555'} items={LIST.map((row, index) => { return {value: index, label: row} })} visible={this.state.select} selectedItems={this.state.selectitems} okLabel={'確定'} scrolled={true} cancelLabel={'取消'} onCancel={() => this.setState({ select: false })} onOk={(result) => { this.setState({ select: false }); this.setState({ selectitems: result.selectedItems }); console.log(this.state.selectitems) }}/>
,and const array LIST
just the same as the example doc
But selectitems are still empty after I press OK button
Is there anything wrong?? Hope someone could help me,thanks :'((

Hi, attached is the screenshot of the Cancel/ OK buttons not appearing on the iPhone SE. However, it appears on the iPhones with bigger screen sizes.

My code is:
<MultiPickerMaterialDialog
title={"Select days"}
colorAccent={GLOBAL.COLOR.BUTTON_ICON}
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 });
}} />

Am I missing something here? Please assist.

Having trouble using this module with RN-0.44.0.

To Reproduce:

updated examples/package.json modules to:

"react": "^16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-vector-icons": "^4.1.1"

rm -rf node_modules && npm install
react-native run-android

Error:

error: bundling: UnableToResolveError: Unable to resolve module `react/lib/ReactPropTypes`

for new we support the font text color/size etc, but could we add to support diff fonts?

how to change the font size of ok and cancel button?
how to hide cancel button that has only one ok button show?

Please provide onOk and onCancel as optional and developer will select any one of them. Because sometimes we need an option to close dialog when user clicks only OK button

It is not working in react native version 0.6

I really don't understand what's wrong with this code, can you please have a quick look?

Currently if user click outside the dialog or pressed the back button on Android, the dialog will dismiss.
Is there a way to prevent this and make sure the user click OK/Cancel button to dismiss it?

Hi,

there seems to be a bug in the SinglePickerMaterialDialog component (scroll-mode): it does not wrap long items correctly.
Please see this screenshot:

@hectahertz :
Hi, I would need to set a default list value.
I talk about the first start, without the user doing anything.
How can I do?

Is there anyway to move the entire modal upwards when the keyboard opens?

For example I have a text input in the dialog, when the keyboard opens the dialog actions get covered.