Ways to dynamically display components in React Native

Question

Ways to dynamically display components in React Native

In my React Native app, I have a custom tab control that is rendered dynamically using the following configuration:

const TABS = [
   { title: 'Tab 1', component: MyComponentOne },
   { title: 'Tab 2', component: MyComponentTwo }
];

The title property is used for the tab title, and when a tab is selected, I want to render the corresponding component inside an Animated.FlatList.

Is there a way for me to dynamically render MyComponentOne and MyComponentTwo, instead of having to do this manually?:

if (typeof item.component === 'MyComponentOne') return <MyComponentOne />
if (typeof item.component === 'MyComponentTwo') return <MyComponentTwo />

Any suggestions on how to achieve this?

typescript react-native

Answer 1

Answer №1

If you want to display different components based on tab titles, you can create an object mapping each tab title to its corresponding component. Then, you can render the desired component by referencing the title in that object.

const tabs: Record<string, React.ReactNode> = {
  "Tab 1": <MyComponent/>,
  "Tab 2": <MyOtherComponent/>
}

Below is a functional example written in JavaScript. You just need to add types for it to work properly.

const tabs = {
  "Tab 1": <MyComponent/>,
  "Tab 2": <MyOtherComponent/>,
  "Tab 3": <YetAnotherComponent/>
}

function MyComponent(){
  return (
      <div class="component my">
        MyComponent
      </div>
  )
}

function MyOtherComponent(){
  return (
      <div class="component other">
        MyOtherComponent
      </div>
  )
}

function YetAnotherComponent(){
  return (
      <div class="component yetanother">
        YetAnotherComponent
      </div>
  )
}

function TabComponent(){
  const [activeTab, setActiveTab] = React.useState("Tab 1");

  return (
      <div class="tabcomponent">
        <div class="tabs">
            <button class="tab" onClick={() => setActiveTab("Tab 1")}>
              Tab 1
            </button>
            <button class="tab" onClick={() => setActiveTab("Tab 2")}>
              Tab 2
            </button>
            <button class="tab" onClick={() => setActiveTab("Tab 3")}>
              Tab 3
            </button>
        </div>
          {tabs[activeTab]}
      </div>
  );
}
ReactDOM.render(<TabComponent/>, document.getElementById('root'));

.tabcomponent {
  border: 1px solid black;
}

.tabs {
  display: flex;
  flex-grow: 1;
}

.tab {
  flex-grow: 1;
  flex-basis: 100%;
}

.component {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my {
  background-color: red;
}

.other {
  background-color: yellow;
}

.yetanother {
  background-color: green;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

If you want to display different components based on tab titles, you can create an object mapping each tab title to its corresponding component. Then, you can render the desired component by referencing the title in that object.

const tabs: Record<string, React.ReactNode> = {
  "Tab 1": <MyComponent/>,
  "Tab 2": <MyOtherComponent/>
}

Below is a functional example written in JavaScript. You just need to add types for it to work properly.

const tabs = {
  "Tab 1": <MyComponent/>,
  "Tab 2": <MyOtherComponent/>,
  "Tab 3": <YetAnotherComponent/>
}

function MyComponent(){
  return (
      <div class="component my">
        MyComponent
      </div>
  )
}

function MyOtherComponent(){
  return (
      <div class="component other">
        MyOtherComponent
      </div>
  )
}

function YetAnotherComponent(){
  return (
      <div class="component yetanother">
        YetAnotherComponent
      </div>
  )
}

function TabComponent(){
  const [activeTab, setActiveTab] = React.useState("Tab 1");

  return (
      <div class="tabcomponent">
        <div class="tabs">
            <button class="tab" onClick={() => setActiveTab("Tab 1")}>
              Tab 1
            </button>
            <button class="tab" onClick={() => setActiveTab("Tab 2")}>
              Tab 2
            </button>
            <button class="tab" onClick={() => setActiveTab("Tab 3")}>
              Tab 3
            </button>
        </div>
          {tabs[activeTab]}
      </div>
  );
}
ReactDOM.render(<TabComponent/>, document.getElementById('root'));

.tabcomponent {
  border: 1px solid black;
}

.tabs {
  display: flex;
  flex-grow: 1;
}

.tab {
  flex-grow: 1;
  flex-basis: 100%;
}

.component {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my {
  background-color: red;
}

.other {
  background-color: yellow;
}

.yetanother {
  background-color: green;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Ways to dynamically display components in React Native

Answer №1

Similar questions

Unlocking the potential of nested conditional types in TypeScript

Creating an Angular form group that includes dynamic form controls with custom form control names

The production build for Angular 9 Keyvalues pipe fails to compile

Tips for creating a sequelize transaction in TypeScript

Preventing JavaScript Compilation for a Specific Folder using tsconfig: A Step-by-Step Guide

An error occured: Unable to access the 'taxTypeId' property since it is undefined. This issue is found in the code of the View_FullEditTaxComponent_0, specifically in the update

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Determining the exact position of an image with resizeMode set to 'contain' in React Native

Exploring how enums can be utilized to store categories in Angular applications

"Unable to convert object into a primitive value" error message appears on Internet Explorer

Comparison between modules and standalone components

Sluggish website loading time

Obtaining Navigation Parameters within Custom React Navigation Title

After updating the state in a Reducer with Redux Toolkit, make sure to utilize a

What is the best way to declare a TypeScript type with a repetitive structure?

Encountering difficulties accessing props while invoking a component in React

An issue occurred while trying to run Ionic serve: [ng] Oops! The Angular Compiler is in need of TypeScript version greater than or equal to 4.4.2 and less than 4.5.0, but it seems that version 4

When invoking a service repeatedly in Angular within a loop, the result is returned on the second iteration rather than the first

Sharing information between different pages in NEXT.js version 14

What is the best method to invoke a function from the header in react-navigation?