Conceal text for a specific User Role within React-Native Router-Flux

I'm facing an issue regarding a text in Router-Flux.

In my App.js page, I have set up all the routes for the App. Specifically, I have added the text "Logout" for the homepageUtente.js.

Below is the code snippet from App.js

export default class App extends Component {
  static redirectLogout() {
    Alert.alert("Logout", "Logout successful");
    Actions.authentication();
  }
  static logout() {
    Utente.clearUtenteLoggato();
    App.redirectLogout();
  }

  // This method that I tried does not work.
  static checkUser() {
    Utente.getUtenteLoggato();
    const Roles = global.utente.data.Roles;
    return Roles;
  }

  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene
            key="authentication"
            component={Authentication}
            navigationBarStyle={{ backgroundColor: "#64c7c0" }}
            type="reset"
          />

          <Scene
            key="homepageutente"
            component={HomepageUtente}
            type="reset"
            leftTitle="Home"
            leftButtonTextStyle={{ color: "#ffffff" }}
            onLeft={() => Actions.authentication()}
            rightButtonTextStyle={{ color: "#ffffff" }}

            rightTitle={App.checkUser !== "ROLE_PLUS" ? "Logout" : ""}
            onRight={App.checkUser !== "ROLE_PLUS" ? () => App.logout() : () => {}}

             // This is how to log out (but it does not differentiate between roles)
            //rightTitle="Logout"
            //onRight={() => App.logout()}
            navigationBarStyle={{ backgroundColor: "#64c7c0" }}
          />

Now, let's take a look at the HomepageUser.js file

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

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

           <View>

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

Finally, here is the function I used for handling UserLoggedIn

static async getUtenteLoggato() {
    try {
      return await AsyncStorage.getItem("@UtenteLoggato");
    } catch (error) {
      console.log(error.message);
      return null;
    }
  }

My issue lies in ensuring that if the user has the role "ROLE_PLUS," they should not be able to logout. But I am unsure of how to hide the text for this particular role.

Answer №1

Is there a way to pass a variable from one component to another in Router Page? It seems like using two Scene tags might be a simple solution (though not the most efficient one).

Here's an example of how it could be implemented:

LoginProcess() {
    // LoginProcess
    var pass = true; // User is authenticated
    if (pass) {
        ToastAndroid.show('clicked!', ToastAndroid.SHORT)
        Actions.homepageutente();
    } else {
        Actions.homepageutente2();
    }
}

And in the Router:

<Router>
    <Scene key="root" hideNavBar>
        <Scene key="auth">
            <Scene key="login"
                component={Authentication}
                title="Please Login"
                initial
            />
        </Scene>

        <Scene key="homepageutente" hideNavBar ={false}
            component={HomepageUtente}
            title="Home Page"
            rightTitle={"Log Out"}
            onRight={() => Actions.auth()}
          />
         <Scene key="homepageutente2" hideNavBar ={false}
             component={HomepageUtente}
             title="Home Page"
           />

       </Scene>
   </Router>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing this code to continuously loop without end?

I've been scratching my head trying to understand why this code isn't working. var refP = []; var calculateDistance = function (p1, p2) { return dist(p1.x, p1.y, p2.x, p2.y); } while (refP.length < 24) { var point = { x: -1, ...

Showing elements of an array with personalized spacing in angularjs

Looking to show a string[], here's the setup: JS Code var result = ["Fish","Mutton","Shrimp","Chicken"]; $scope.res = result; All array values are retrieved in $scope.res and displayed in HTML using ng-bind, HTML code <span ng-bind="res">&l ...

Acquiring the markers, however the latitude and longitude are both null - vue.js

I have been working on displaying markers on a map. When I fetched the data, everything seemed fine in Vue DevTools. The `this.markers` property also contains the data. However, to my surprise, the values for `lat` and `lng` inside the markers are showing ...

The React Native android build encountered an error and failed to run successfully

Upon attempting to run this command in my Mac terminal: react-native run-android I encountered the following error: FAILURE: Build failed with an exception. * Where: Build file '/Users/web2/AwesomeProject/android/app/build.gradle' line: 1 * ...

I am experiencing a 404 error when attempting to import a local JS file in Angular

After creating a new project with "ng new xxx", all you need to do is add one line of code in index.html: <!doctype html> <html lang="en> <head> <meta charset="utf-8> <title>Bbb</title> <base href="/&g ...

Generate a nested array of objects by recursively looping through an array of objects

Imagine I have an array of objects structured like this: myArr = [ { "id": "aaa.bbb" }, { "id": "aaa.ccc" }, { "id": "111.222" }, { "id": "111.333" }, ] I aim t ...

The class java.util.Arrays$ArrayList is unable to be converted into java.util.ArrayList within a Parcelable object

These are the classes that I have written: public class Company implements Parcelable { private int uid; @SerializedName("field_user_org_name_value") private String name; @SerializedName("field_user_org_address_value") private String address; @Serialized ...

What is the method for socket.emit() data that originates from a function?

Using Socket.io with Node.js Sending data from the server to the client is straightforward when using a string or hard-coded variable: var greeting = 'hello'; socket.emit('greeting', greeting); However, things get tricky when trying ...

Double execution of JavaScript function when Enter key is pressed

In my HTML page, I have a button that looks like this: <input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" /> I've set up a jQuery click event for this button: $('#btnLogin').click(function () { Vali ...

Tips for handling form submissions within an Electron application on your desktop

I came across this question, but I'm still struggling to understand the best approach to handling forms in Electron. I am currently using the code snippet below and aiming to utilize dexie.js to store the form data upon submission. However, I'm ...

The error TS2339 is indicating that there is no property called myProperty on the type SetStateAction<User>

I'm encountering a TypeScript error while working with React that's leaving me puzzled: <html>TS2339: Property 'subEnd' does not exist on type 'SetStateAction&lt;User&gt;'.<br/>Property 'subEnd' d ...

Reset IntersectionObserverAPI to its initial state when none of the elements are in view

Currently, I am utilizing a React Hook that enables me to observe when an element becomes visible in the viewport. The functionality works smoothly until I encounter the need to 'reset' the state once all elements are hidden (such as when reachin ...

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Currently, I am working with material-ui autocomplete and passing an array of states to its options property. However, I have encountered an issue with the getOptionLabel method: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined ...

What is the process of utilizing jQuery to hover over a relevant cell?

I'm interested in learning how to implement jQuery to highlight related tables. Initially, I explored this JS fiddle and discovered a method for highlighting both vertically and horizontally. I conducted several searches to find a similar approach, ...

The NodeJS module 'request' is producing symbols instead of expected HTML content

Currently, I am delving into the world of Nodejs and experimenting with web scraping using node.js. My tools of choice are the node modules request and cheerio. However, when I attempt to request a URL, instead of receiving the HTML body, I get strange s ...

Utilize the HTML webpack plugin to include the rendered file within the router

Hey there! I'm currently dealing with a frustrating issue. I can't seem to locate the index.html file generated by html-webpack-plugin for rendering. Even though I can access it at localhost:8080/index.html, I'm struggling to figure out how ...

Adjusting BackstopJS - Each scenario file is interpreted as an individual scenario rather than a group of scenarios in the configuration file

As I strive to scale BackstopJS by breaking down the original backstop.json file into a directory of structured scenario JSON files, I'm encountering an issue where the function in my config file interprets each JSON file as a single scenario instead ...

Facing compatibility problems with JavaScript and Cascading Style Sheets in Google Chrome?

Welcome to the site . Let's address a couple of issues with JavaScript and CSS: Firstly, the JS code seems to be malfunctioning only in Chrome, throwing an error that reads: 'Uncaught TypeError: Object [object Object] has no method 'on prij ...

Utilizing Google Caja for JavaScript sanitization is the only way to ensure

Looking to safeguard the inputs provided to a nodejs server with the assistance of the google-caja sanitizer. However, it's somewhat overzealous and cleanses away the > and < symbols too. My project requires me to retain html characters in the ...

What is the best way to include id="" in a textarea generated using javascript?

Having an issue with my textarea var tex = document.createElement("TEXTAREA"); document.body.appendChild(tex); Does anyone know how I can add a class and id to the textarea or areas? ...