I might be missing something small here but I can't seem to get my <Modal> ponent to center in my React Native app. Here is the code for the modal:

...
            <Portal>
                <Modal
                    visible={modalVisible}
                    onDismiss={hideModal}
                    contentContainerStyle={{
                        backgroundColor:'white',
                        padding:20,
                        width:'90%'
                    }}
                >
                    <ScrollView>
                        <Text>A long chunk of text</Text>
                        <Button
                            onPress={hideModal}
                            color='#5F9DA5'
                            mode='contained'
                            dark={true}
                        >
                            Cool!
                        </Button>
                    </ScrollView>
                </Modal>
            </Portal>
...

I tried doing this as well:

                <Modal
                    visible={modalVisible}
                    onDismiss={hideModal}
                    contentContainerStyle={{
                        backgroundColor:'white',
                        padding:20,
                        width:'90%',
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >

Unsure what I'm missing here.

I might be missing something small here but I can't seem to get my <Modal> ponent to center in my React Native app. Here is the code for the modal:

...
            <Portal>
                <Modal
                    visible={modalVisible}
                    onDismiss={hideModal}
                    contentContainerStyle={{
                        backgroundColor:'white',
                        padding:20,
                        width:'90%'
                    }}
                >
                    <ScrollView>
                        <Text>A long chunk of text</Text>
                        <Button
                            onPress={hideModal}
                            color='#5F9DA5'
                            mode='contained'
                            dark={true}
                        >
                            Cool!
                        </Button>
                    </ScrollView>
                </Modal>
            </Portal>
...

I tried doing this as well:

                <Modal
                    visible={modalVisible}
                    onDismiss={hideModal}
                    contentContainerStyle={{
                        backgroundColor:'white',
                        padding:20,
                        width:'90%',
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >

Unsure what I'm missing here.

• javascript
• react-native
• react-native-paper

1 Answer 1

Try adding alignSelf:"center" to contentContainerStyle