React Native: Render different component based on button press

Question

I am new to React/React Native and am currently building a screen that consists of a section consisting of 3 buttons and a space below to render different components depending on which tab button is pressed. The tabs are add, remove, and history.

Basically the intent is to recreate something like the tabs component from React Bootstrap, but for React Native. I have seen the React Navigation tabs component, but I do not want the tabs to navigate to a different screen, just render a different component depending on which is clicked and have it fade into the section below the buttons. Below is a rough idea of how I am thinking of approaching the problem.

    const ChoiceContainer = props => {
      const {children} = props;

      render(<View>{children}</View>);
    };


    const AddEntry = () => (
      <ChoiceContainer>
        <Card>
          <View style={{paddingLeft: 5}}>
            <Text style={styles.cardTitle}>Component 1</Text>
          </View>
        </Card>
      </ChoiceContainer>
    );

    const RemoveEntry = () => (
      <ChoiceContainer>
        <Card>
          <View style={{paddingLeft: 5}}>
            <Text style={styles.cardTitle}>Component 2</Text>
          </View>
        </Card>
      </ChoiceContainer>
    );

    const EntryHistory = () => (
      <ChoiceContainer>
        <Card>
          <View style={{paddingLeft: 5}}>
            <Text style={styles.cardTitle}>Component 3</Text>
          </View>
        </Card>
      </ChoiceContainer>
    );

    export default class EntryTabs extends Component {
      showAdd = () => {
        this.setState({sceneType: 'add'});
      };

      showRemove = () => {
        this.setState({sceneType: 'receive'});
      };

      showHistory = () => {
        this.setState({sceneType: 'history'});
      };

      renderScene = type => {
        if (type === 'add') {
          return <AddEntry />;
        }

        if (type === 'remove') {
          return <RemoveEntrty />;
        }

        if (type === 'history') {
          return <EntryHistory />;
        }
      };

      render() {
        const {sceneType} = this.state;

        render(
<SafeAreaView>

<View style={{flex: 1}}>
                  return (
                    <EntryCard
                    />
                  );
                })}
          <View style={{flex:1}}>
            <View>
              <TouchableOpacity onPress={this.showAdd}>
    <Text> Add </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showRemove}>
    <Text> Remove </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showHistory}>
    <Text> History </Text>
              </TouchableOpacity>
            </View>
            <View>{this.renderScene(sceneType)}</View>
          </View>,
</View>
</SafeAreaView>
        );
      }
    }

Any help/guidance would huge hugely appreciated. Thanks!

What exactly are you trying to do ? your question is not clear on where you need help — Guruparan Giritharan
– Guruparan Giritharan, Commented Jun 10, 2020 at 18:19
Mainly I am trying to make a version of the tabs component from regular React Bootstrap, but for React Native. I have seen the tab navigator, but I don't want the tabs to navigate to a different screen, I only want them to display a different component depending on which one is clicked. react-bootstrap.github.io/components/tabs The carousel slider is not important — GrapeJam
– GrapeJam, Commented Jun 11, 2020 at 7:34
Your approach on using states is correct, do you want to know how to map data ? — Guruparan Giritharan
– Guruparan Giritharan, Commented Jun 11, 2020 at 7:50
That is strange - when I run the app I get the following error: "TypeError: null is not an object (evaluating 'this.state.sceneType') — GrapeJam
– GrapeJam, Commented Jun 11, 2020 at 7:57

Guruparan Giritharan · Accepted Answer · 2020-06-11 08:02:47Z

You have not defined the state, And you have to use map to show the entries.

The working version of you code should be as below.

const value1 = 1,
  value2 = 2,
  value3 = 3;

const entries = [
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
];

const ChoiceContainer = (props) => {
  const { children } = props;

  return <View>{children}</View>;
};

const AddEntry = () => (
  <ChoiceContainer>
    <Card>
      <View style={{ paddingLeft: 5 }}>
        <Text style={styles.cardTitle}>Add Entry</Text>
      </View>
    </Card>
    <TextInput value={entries.key1} />
  </ChoiceContainer>
);

const RemoveEntry = () => (
  <ChoiceContainer>
    <Card>
      <View style={{ paddingLeft: 5 }}>
        <Text style={styles.cardTitle}>Remove Entry</Text>
      </View>
    </Card>
    <TextInput value={entries.key2} />
  </ChoiceContainer>
);

const EntryHistory = () => (
  <ChoiceContainer>
    <Card>
      <View style={{ paddingLeft: 5 }}>
        <Text style={styles.cardTitle}>Entry History</Text>
      </View>
    </Card>
    <TextInput value={entries.key3} />
  </ChoiceContainer>
);

class EntryTabs extends React.Component {
  state = {
    sceneType: 'add',
  };

  showAdd = () => {
    this.setState({ sceneType: 'add' });
  };

  showRemove = () => {
    this.setState({ sceneType: 'receive' });
  };

  showHistory = () => {
    this.setState({ sceneType: 'history' });
  };

  renderScene = (type) => {
    if (type === 'add') {
      return <AddEntry />;
    }

    if (type === 'remove') {
      return <RemoveEntry />;
    }

    if (type === 'history') {
      return <EntryHistory />;
    }
  };

  render() {
    const { sceneType } = this.state;

    return (
      <SafeAreaView>
        <View style={{ flex: 1 }}>
          {entries.map((item) => {
            return (
              <EntryHistory
                baseAsset={item.key1}
                logo={item.key2}
                screen={item.key3}
              />
            );
          })}
          <View style={{ flex: 1 }}>
            <View>
              <TouchableOpacity onPress={this.showAdd}>
                <Text> Add </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showRemove}>
                <Text> Remove </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showHistory}>
                <Text> History </Text>
              </TouchableOpacity>
            </View>
            <View>{this.renderScene(sceneType)}</View>
          </View>
          ,
        </View>
      </SafeAreaView>
    );
  }
}

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      &&{' '}
      {showMore && (
        <Button
          title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button
          title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}

Collectives™ on Stack Overflow

React Native: Render different component based on button press

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related