React Native: Single View with Dynamic Content

Question

I'm learning to programming in React-Native (and also in Javascript) and I have a question.

Basically, I have created a Login for 2 categories of users: "Regular" and "Plus". After the login they are redirect to an HomeUser page.

My problem is that in this "HomeUser" page I should create dynamic Content depending on the type of user.

This is the HomeUser

class HomeUser extends Component {
   constructor(props){
       super(props);
    }

    render() {
        const FirstName = global.utente.data.Person.FirstName;
        const LastName = global.utente.data.Person.LastName;
        const Username = global.utente.data.Person.FiscalCode;
        const Roles = global.utente.data.Roles
        console.log(Roles) 
        return (

            <View style={style.container}>
            <View style={style.page}>
                <Icon name="user-circle" color="#64c7c0" size={70} onPress={() => Actions.viewprofile()} />
                <Text style={{paddingBottom: 15, textAlign: 'center', fontSize: 15, color: '#64c7c0', fontWeight: 'bold'}}>View Profile</Text>

                 <Text style={{textAlign: 'center', fontSize: 20,}}>{"Welcome"}</Text>
                 <Text style={{textAlign: 'center', fontSize: 20, color: '#64c7c0', fontWeight: 'bold'}}>{FirstName} {LastName}</Text>
                 <Text>{Roles}</Text>

 //Add here "EDIT PROFILE" button to link a the page to edit profile, only for Regular User.

            </View>
            </View>
        )
    }
}
export default HomeUser;

So I should insert content dynamically for the users. Can you explain how can I do for example to the edit profile? I should create a new page and link to this page with a If condition? ( I don't think so xD )

My thought is that if I have to do more checks on the role, the efficiency of the application slows down. Is it possible that this problem occurs?

Answer 1

If i understand your question correctly you want to render a component when the user role is a specific one. In this case you can use conditional rendering using:

{condition && <Component>}

inside you render return function.

In your code something like:

{Roles==="SpecificRole"&&<Button></Button>}

should do the trick