CODEWITHSUNDEEP
reactjsreact-nativereact-native-popup-dialog
stud91
stud91

Reputation: 1854

Position react native popup at the bottom of the screen

I am trying to display a popup in my react native app using the module found here:

https://github.com/jacklam718/react-native-popup-dialog

However, I would want the popup to appear only at the bottom of the screen. I have tried various things in popupStyle but the position of the popup always remain at the center. Is it possible to change its position to show only at the bottom of the screen.

index.js

import PopupDialog, { SlideAnimation, DialogTitle } from 'react-native-popup-dialog';
import { styles } from './styles';

....
<PopupDialog
  ref={(popupDialog) => { this.popupDialog = popupDialog; }}
  style={styles.popupDialogStyle}
  dialogAnimation={slideAnimation}
  height={150}
  dialogTitle={<DialogTitle title="Select options" />}
>

styles.js

export const styles = StyleSheet.create({
    popupDialogStyle: {
        backgroundColor: 'lightgray',
        marginTop: 100,
    },
});

Upvotes: 1

Views: 10616

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

According to Issue #89: How to position absolute you need to use either

<PopupDialog 
  containerStyle={{ justifyContent: 'flex-end' }}
/>

or 

<PopupDialog 
  dialogStyle={{ position: 'absolute', bottom: 0 }}
/>

Upvotes: 9

Related Questions