How to keep navigation header on top?

[ydhnwb]

I have navigation header for showing back button and title. I just want to keep this on top and not get replaced by collapsed header or the tabs.

[ydhnwb]

I want the white header (back button and title) is keep on top, while the green will be scrollable. I copied your code on ScrollableHeader and just add this

    <SafeAreaView style={styles.container}>
      <Header title="Detail Bahan Baku" />

      <View style={{flex: 1}}>
        {renderTabView()}
        {renderHeader()}
      </View>
    </SafeAreaView>

[JungHsuan]

Hi @ydhnwb, do you mean that you don't want the collapsed header or the tabs view scroll over on top of the <Header/>?

[ydhnwb]

Yes. I want header to keep on top, and the tab will hanging below the header when it scrolled

[JungHsuan]

Is this what you attempt to achieve?

[ydhnwb]

yes, exactly like that

[JungHsuan]

Here is my example code:

const Header = ({title}) => {
  return (
    <View
      style={{
        backgroundColor: 'white',
        height: 65,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text style={{fontSize: 20}}>{title}</Text>
    </View>
  );
};

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <Header title="Detail Material" />
      <CollapsibleTabView />
    </SafeAreaView>
  );
};

For: CollapsibleTabView, I simply copy my collapibleTabView.js and modify the style like this:

  return (
    <View style={{flex: 1, overflow: 'hidden'}}>
      {renderTabView()}
      {renderHeader()}
    </View>
  );

By adding overflow: 'hidden' to prevent the header from renderHeader() scroll over on top of the navigation bar.

[ydhnwb]

Thank you very much. I'll try to implement that