I have a couple of Views that render an entire page and I want to switch between them. I could use a screen for each view and navigate between screens but that would be a bit bad UX to show a transition everytime. See it like some tabs at the top of the page that each render different content.

I've been doing it with conditionals like below. Is there another way to do this more efficiently?

import React, { useState, useEffect } from 'react';
import {StyleSheet, View, Image, Text, Dimensions, ImageBackground, Button} from 'react-native';

const RM = ( {route, navigation } : any) => {
    const [view, setView] = useState("A");
    return (
      <>
      <View>
        <Button onPress={() => setView("A")} title="Set A" />
        <Button onPress={() => setView("B")} title="Set B" />
        <Button onPress={() => setView("C")} title="Set C" />
      </View>
      <View>
        {view === "A" && (
          <ComponentA />
        )}
        {view === "B" && (
          <ComponentB />
        )}
        {view === "C" && (
          <ComponentC />
        )}
      </View>
      </>
    );
  };

export default RM;

I have a couple of Views that render an entire page and I want to switch between them. I could use a screen for each view and navigate between screens but that would be a bit bad UX to show a transition everytime. See it like some tabs at the top of the page that each render different content.

I've been doing it with conditionals like below. Is there another way to do this more efficiently?

import React, { useState, useEffect } from 'react';
import {StyleSheet, View, Image, Text, Dimensions, ImageBackground, Button} from 'react-native';

const RM = ( {route, navigation } : any) => {
    const [view, setView] = useState("A");
    return (
      <>
      <View>
        <Button onPress={() => setView("A")} title="Set A" />
        <Button onPress={() => setView("B")} title="Set B" />
        <Button onPress={() => setView("C")} title="Set C" />
      </View>
      <View>
        {view === "A" && (
          <ComponentA />
        )}
        {view === "B" && (
          <ComponentB />
        )}
        {view === "C" && (
          <ComponentC />
        )}
      </View>
      </>
    );
  };

export default RM;

• javascript
• react-native

1 Answer 1

Multiple conditions and rendering different views can be handled nicely with switch case I have used class ponent here but same can be achieved in functional ponents.

class RM extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            selectedTab: ''
        }
    }

    setTab = (tab) => {
        this.setState({selectedTab: tab})
    }

    selectedTab = () => {
        switch(this.state.selectedTab){
            case 'A':
                return <ComponentA />
            case 'B':
                return <ComponentB />
            case 'C':
                return <ComponentC />
            default:
                return /* empty div maybe */
        }
    }

    render() {
        return(
            <View>
                <View>
                    <Button onClick={() => setTab('A')} />
                    <Button onClick={() => setTab('B')}  />
                    <Button onClick={() => setTab('C')}  />
                </View>
                {this.selectedTab()}
            </View>
        )
    }  
}

For the functional ponent you can do something like this:

const RM = () => {

    const [selectedTab, setSelectedTab] = useState('');

    const SelectedTab = () => {
        switch(selectedTab){
            case 'A':
                return <ComponentA />
            case 'B':
                return <ComponentB />
            case 'C':
                return <ComponentC />
            default:
                return /* empty div maybe */
        }
    }

    return(
        <View>
            <View>
                <Button onPress={() => setSelectedTab('A')} />
                <Button onPress={() => setSelectedTab('B')} />
                <Button onPress={() => setSelectedTab('C')} />
            </View>
            {SelectedTab()}
        </View>
    )  
}