How to display modal on the basis of Access token

I am not able to display a Modal on Post a review button if user is logged in successfully. I am receiving access token in API but my modal is not opening.

Review Screen

import { useNavigation } from '@react-navigation/native';
import React, { useState } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    ScrollView,
    TouchableOpacity,
    Modal,
} from 'react-native';
import { Button, Paragraph, Wrapper } from '../components';
import { baseStyle, images, theme, routes } from '../config';
import axios from 'axios';
import { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';


export const Reviews = ({ route }) => {
    const {userInfo} = useContext(AuthContext);
    const navigation = useNavigation();


    const [isModalVisible, setisModalVisible] = useState(false);
    const { item } = route.params;
    const [responseData, setResponseData] = React.useState();



    React.useEffect(() => {
        axios.get(`https://6895-202-47-60-211.ngrok-free.app/listing/${item.id}/feedback`)
            .then(response => {
                setResponseData(response.data.data);
            })
            .catch(error => {
                console.log(error);
            });
    }, [item]);


    return (
        <Wrapper>
            <View style={styles.header} >
                <TouchableOpacity onPress={() => navigation.goBack()}>
                    <Image source={images.back} style={styles.backIcon} />
                </TouchableOpacity>
                < Text style={styles.headerText} > Reviews </Text>
            </View>
            <ScrollView showsVerticalScrollIndicator={false} style={styles.review} >
                {responseData &&
                    responseData.length > 0 &&
                    responseData.map((item) => (
                        <View style={styles.reviewContainer}>
                            <View style={styles.flex} >
                                <Paragraph style={styles.reviewer} > {item.name} </Paragraph>
                            </View>
                            <Paragraph>
                                {item.feedback_desc}
                            </Paragraph>
                        </View>
                    ))
                }
            </ScrollView>
            <View style={styles.footer} >
                <TouchableOpacity>
                    <Button onPress={userInfo.data ?  (
                    <Modal
                      transparent={true}
                      animationType='fade'
                      visible={isModalVisible}
                    > Text </Modal>) :
                    navigation.navigate(routes.LOGIN, {item:item})}> Post a review </Button>
                </TouchableOpacity>
            </View>
        </Wrapper>
    );
};

const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: baseStyle.marginBottom(32),
        paddingHorizontal: baseStyle.paddingHorizontal(15),
    },
    backIcon: {
        width: baseStyle.width(36),
        height: baseStyle.height(36),
    },
    headerText: {
        fontFamily: theme.font.bold,
        fontSize: baseStyle.fontSize(16),
        lineHeight: baseStyle.lineHeight(19),
        color: theme.colors.black,
        marginLeft: baseStyle.marginLeft(75),
    },
    review: {
        paddingHorizontal: baseStyle.paddingHorizontal(15),
    },
    reviewContainer: {
        backgroundColor: theme.colors.lightGrey,
        paddingVertical: baseStyle.paddingVertical(15),
        paddingHorizontal: baseStyle.paddingHorizontal(15),
        borderRadius: baseStyle.borderRadius(16),
        marginBottom: baseStyle.marginBottom(15),
    },
    flex: { flexDirection: 'row', justifyContent: 'space-between' },
    reviewer: {
        opacity: 1,
        fontFamily: theme.font.bold,
        marginBottom: baseStyle.marginBottom(10),
    },
    starIcon: {
        width: baseStyle.width(15),
        height: baseStyle.height(15),
        resizeMode: 'contain',
    },
    date: { marginTop: baseStyle.marginTop(10) },
    footer: {
        borderTopLeftRadius: baseStyle.borderTopLeftRadius(32),
        borderTopRightRadius: baseStyle.borderTopRightRadius(32),
        paddingVertical: baseStyle.paddingVertical(18),
        paddingHorizontal: baseStyle.paddingHorizontal(18),
        backgroundColor: theme.colors.white,
        shadowOffset: {
            width: 0,
            height: -5,
        },
        shadowOpacity: 1,
        elevation: 5,
        shadowColor: theme.colors.silver,
        shadowRadius: 6,
    },
});

API Logs

LOG {"success": true, "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2ODY1NjIwODQsImV4cCI6MTY4NjY0ODQ4NH0.7uiji6h1ziMlYHcXUXJJ3TiQFXf8NB65sfRIXCT9sxI"}
LOG {"data": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InRlc3RAY28uY28iLCJpYXQiOjE2ODY1NjIxMDgsImV4cCI6MTY4NjY0ODUwOH0._gX321NMJq1c4HctL8fkESrV8qvOQfVYzaftz9Sxbys", "message": "Account logged in", "success": true}

Probably the error is because you're trying to render the <Modal/>component in the wrong place. Try to render the modal like this:

//...rest of your code
    <View style={styles.footer} >
                <TouchableOpacity>
                    <Button onPress={userInfo.data ? setisModalVisible(true) :
                    navigation.navigate(routes.LOGIN, {item:item})}> Post a review </Button>
                </TouchableOpacity>
            </View>
                <Modal
                      transparent={true}
                      animationType='fade'
                      visible={isModalVisible}
                    > Text </Modal>
     </Wrapper>

You have to set the state isModalVisible to true, you can't render an JSX element inside an onPress function.

Test and see if it's correct, if it isn't please report an we can try to find another answer.