Create a layout where one part is static and other is scrollable on swipe in Native-Base

Question

I got one tab screen on my App that I would like to have a layout separated into 2 parts. 1) Would be the top container which is static, no matter if you swipe up/down. It also contains Native-Base tabs.

2) Each tab would have a FlatList or ScrollView I guess to make it scroll on swipe?

This is the basic idea:

Now, it seems that this scrollable behavior is being added by the Native-Base "Container" component, when I changed from Container to View, my screen changed of course, but at least it wasn't scrollable at all. But the tabs weren't displaying, it was completely empty.

How can I achieve this layout?

This is my current layout skeleton:

<Container>
  <Header>
     ... some header title and icon, doesn't matter ...
  </Header>
  <Content>
     <View>
        <Tabs>
           <Tab heading={ TabHeading here }>
              <ScrollView>
                  <Text>Some Content Here</Text>
              </ScrollView>
           </Tab>
           <Tab heading={ TabHeading here }>
              <ScrollView>
                  <Text>Some Content Here</Text>
              </ScrollView>
           </Tab>
           <Tab heading={ TabHeading here }>
              <ScrollView>
                  <Text>Some Content Here</Text>
              </ScrollView>
           </Tab>
        </Tabs>
     </View>
  </Content>
</Container>

score 1 · Accepted Answer · answered Jan 19 '19 at 18:04

It is actually the Content component that is causing the scrolling as it is wrapped in a react-native-keyboard-aware-scroll-view https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Content.js

To disable the scroll on the Content all you have to do is pass false to the scrollEnabled prop

<Content scrollEnabled={false}>
  ...
</Content>

That should stop the scrolling of the top.

Create a layout where one part is static and other is scrollable on swipe in Native-Base

1 Answers1