1

I have some parts of the screen that stay permanent and one part of the screen which is a container that should change its content to one of a set of Card elements, according to a button press on a button group.

If I understand correctly I cannot use the Tab-Navigator (or the Stack-Navigator) because those control a full page (i.e. screen) change, and I only want to swap a single card element.

Am I correct about that?

If so what do I need to do? Is there some existing UI element for this? If nothing exists, how would I go about doing this? Each card loads different stuff from a local json, and I don't want to reload them when switching back and forth...

I want it to have the effect shown in Android UI (non react-native) samples: android Navigation Tabs in middle of screen

Perhaps I should be using swiper like in this answer? implement tabs in the center of the screen .

pashute
  • 3,965
  • 3
  • 38
  • 65

1 Answers1

1

You can use a tab navigator, think about a structure like the one below

 <View>
     <OtherStuffThatFilLTheScreen>
     <TabNavigator>
     <OtherRandomStuff>
  <View>

Tab navigator will have full control of the element that renders inside its space, but will not change other elements outside its scope

Bruno Mazzardo
  • 1,586
  • 1
  • 15
  • 27
  • So you are saying I was wrong in my assumption and that TabNavigator Can be used to be changed when buttons in buttonGroup are pressed. Could you show how this code should look? I was about to post my own answer, where I just show and hide the other components, each one becoming the current "tab page" – pashute May 27 '18 at 12:56