Can I use stack react navigation v5 like modal from bottom ?

Ask a question+
0

Can I use stack react navigation v5 like modal fade from bottom ?

add comment

1 Answer

0

Yes you can,
First add new screen with props like this:

import { createStackNavigator, StackNavigationOptions, TransitionPresets } from '@react-navigation/stack';
const RootStack = createStackNavigator()
<RootStack.Screen options={{
                    ...TransitionPresets.ModalTransition,
                    cardStyle: { backgroundColor: 'transparent' }
                }} name="ShareToDirect" component={Modal} />`

Componet(Screen) Modal code:

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'

const Modal = ({ navigation, route }) => {
    return (
        <TouchableOpacity
            onPress={navigation.goBack}
            activeOpacity={1}
            style={styles.container}>
            <View style={styles.modal}>

            </View>
        </TouchableOpacity>
    )
}

export default Modal

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    modal: {
        width: '90%',
        height: 500,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#ddd'
    }
})
add comment

Your Answer