How can i remove container when page is equal to profile? i want to say that if my page is === to profile than that view gets removes but that settings-sharp should be visible can anyone can tell how to do that? profile is a page

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Instagram_Logo.png';
import { icons1, logo2 } from '../CommonCss/PageCss';
import { Ionicons } from '@expo/vector-icons';

const TopNavbar = ({ navigation, page }) => {
    return (
        <View style={styles.container}>

            {
                page === 'home' ? <Image source={logo} style={logo2} /> :
                    <Image />
            }
            {
                page === 'home' &&
                <Ionicons name="ios-chatbubbles-sharp"
                    size={24}
                    color="black"
                    style={icons1}
                    onPress={() => navigation.navigate('Chats')}
                />
            }
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </View>

    )
}

export default TopNavbar

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        paddingVertical: 10,
        position: 'absolute',
        top: 0,
        zIndex: 100,
        backgroundColor: '#111111',
    },
    icons11: {
        color: 'white',
        fontSize: 30,
        marginRight: '3%'
    }
}) 

CodePudding user response：

Add a ternary condition

    <View style={page === 'profile' ? styles.container : {}}>

CodePudding user response：

is it what you mean?

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Instagram_Logo.png';
import { icons1, logo2 } from '../CommonCss/PageCss';
import { Ionicons } from '@expo/vector-icons';

const TopNavbar = ({ navigation, page }) => {
    return (
        <View style={styles.container}>
            {page === profile ?(
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            ):(
            {
                page === 'home' ? <Image source={logo} style={logo2} /> :
                    <Image />
            }
            {
                page === 'home' &&
                <Ionicons name="ios-chatbubbles-sharp"
                    size={24}
                    color="black"
                    style={icons1}
                    onPress={() => navigation.navigate('Chats')}
                />
            }
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
            )
        </View>

    )
}