React Native: Single View with Dynamic Content

user_11604252 0
Viewed 4653

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?

react-native javascript
2 Answers

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

user_104101260

First Edit profile when you login success you can save user fix information on local storage then you can open new page name UserEditProfile it's a good way for efficiency.

If wanna show 1 page 2 different role stuff component you must create 2 component like that 

//it's different .jsx file
<RegularUserComponent /*you can add props here*/ /> 
<SpecificRoleUserComponent />

then you can call like that 

import RegularUserComponent  from './components/RegularUserComponent.js'
import SpecificRoleUserComponent from './components/RegularUserComponent.js';

and use like that 

// in render 
 {Roles==="Reqular" ? <RegularUserComponent/> :<SpecificRoleUserComponent/> }

localstorage about the information you must check this link

and An Example for a compornt 

    import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Image} from 'react-native';
export default class NameOfYouComponent extends Component {
constructor(props) {
  super(props);
  this.state = {
  }
}

  render() {
    const {RequestResponse} = this.state;
    return (
      <View style={styles.container}>
      {/*Here is Component include*/}
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

you can call like that 

import NameOfYouComponent from './../afolder/Component/NameOfYouComponent'
user_60524270
Related