deavial/react-native-dialogbox

is it possible to modify position of dialog box?

Harryki opened this issue · 2 comments

dialog box

Since my component is nested inside the page, it doesn't overlay the headers and don't get position at the center.

<DialogBox style={{ position: 'absolute', right: 0, top: 0 }} /> seemed not working

Hi @Harryki

In the current version, the style property breaks convention and has children. The popupContainer, overlay, and tipBoxView is what you would most likely be interested in styling. Defaults here

For example, to change the layout of the white tipBoxView you may do something like this:

<DialogBox style={{ tipBoxView: { backgroundColor: 'yellow' } }} />

However, in React Native, position: absolute will only render you absolute within the bounds of the component's parent. So if the dialog is declared inside a view it will only be absolute within that view. The dialog would need to be declared at the root of your app and you would either need to bubble up an event to show it or use something like redux to control the display. It doesn't work the way HTML would treat an absolute positioned element.

Awesome! Thanks for the reply