Loading

React Native

How to check which tab is active using Material UI ?. The Complete React Native Developer Course 2022 [Videos].

Material-UI is one of the most popular React UI libraries. Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display. They dont rely on any global style-sheets such as normalize.css.

Some examples of Material UI components are Dialog, Tabs, Text Field, Menu, Chip, Card, Stepper, Paper. To use Material-UI in React we need to install it manually in our project.

Prerequisites:

  • Basic knowledge of React
  • Any Code Editor (sublime text editor, VS Code, etc.)

Route Map to Solution

  • Create a Sample Project
  • Install Material — UI into Project
  • Implement Tabs Example
  • Applying Final Solution

Approach:

A) Create a Sample project:

  • Create a sample React Project by running the following command in your terminal
    npx create-react-app react-material-ui
    
  • The above command will create a React app boilerplate within the path the command had run in and ensures that you always use the latest version of a generator or build tool without having to upgrade each time youre about to use it.
  • Enter into the project folder by typing the following command
    cd react-material-ui/
    
  • Run the Project by using the command
    npm start
    
  • You should be able to see the following in your browser

B) Install Material — UI into Project:

  • Install Material-UI by using the below command in your terminal. You can use the terminal of VS Code also.
    npm install @material-ui/core
    
  • Now look for App.js in the src folder of your project. Remove all the unnecessary code and add some code if we are on the right path.

    import "./App.css"; import TabsExample from "./TabsExample"; function App() { return ( <div className="App"> <h4> Example to Check which Tab is active Using Material-UI </h4> </div> ); } export default App;
  • You will observe the browser getting updated as soon as you save your changes. Now everything is set to write our example.

C) Implement Tabs Example:

  • Its time for your code editor. Create a file named TabsExample.js in your src folder and paste the following code into it.

  • import React from "react"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; export default class TabsExample extends React.Component { constructor(props) { super(props); this.state = { value: "None", }; } render() { return ( <div> <Tabs value={this.state.value} indicatorColor="primary" textColor="primary" centered="true"> <Tab label="Tab A" value="Tab A" /> <Tab label="Tab B" value="Tab B" /> </Tabs> </div> ); } } Import your newly created above component into your App.js file. Your App.js file should look like this Javascript import "./App.css"; import TabsExample from "./TabsExample"; function App() { return ( <div className="App"> <h4> Example to Check which Tab is active Using Material-UI </h4> <TabsExample/> </div> ); } export default App;
  • The screen will look like this:

Now its time for the actual things. Lets see the approach for the solution

D) Applying Final Solution:

  • The idea is to use the onChange Callback which is fired automatically when a Tab value changes

    Syntax: 

    function(event: object, value: any) => void
    

    Where,

    event: The event source of the callback
    value: The index of the child (number)
  • Now update the App.js file with the below code:

    import React from "react";
    import Tabs from "@material-ui/core/Tabs";
    import Tab from "@material-ui/core/Tab";
      
    const styles = {
      headline: {
        fontSize: 24,
        paddingTop: 16,
        marginBottom: 12,
        fontWeight: 400,
        color: "green",
      },
    };
      
    export default class TabsExample extends React.Component {
      
      constructor(props) {
        super(props);
        this.state = {
          value: "None",
        };
      }
      handleChange = (_, value) => {
        this.setState({
          value,
        });
      };
      
      render() {
        return (
          <div>
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            centered="true">
      
            <Tab label="Tab A" value="Tab A" />
            <Tab label="Tab B" value="Tab B" />
            </Tabs>
            <br></br>
            <p style={styles.headline}>
              Currently Active Tab: {this.state.value}
            </p>
          </div>
        );
      }
    }


Output:

See All

Comments (163 Comments)

Submit Your Comment

See All Posts

Related Posts

React Native / Youtube

Setting up the development environment of React Native.

If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native
8-Sep-2021 /1 /163

React Native / Blog

How React Native is different from ReactJS ?

ReactJS: It is a JavaScript library that supports both front-end and server-side. It is a popularly used library, which focuses on developing user interfaces (UI) for mobile as well as web-based applications. Developed by Facebook, it is based on the JavaScript language and hence, it is synonymously also called ReactJS.
19-jan-2022 /1 /163

React Native / Blog

How to Use Routing with React Navigation in React Native ?

Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.
19-jan-2022 /1 /163