The best way to create a scrollable tab in the middle of the screen?

Question

The mobile app of Twitter has a scrollable tab in the middle of the screen when you are on your profile. The top half of the screen displaying your profile info etc doesn't change when you click on the scrollable tabs mid screen : "Tweets & replies", "Media" etc. I am wondering how one would create this? Having half the screen stay the same and then having tabs which change mid screen... At the moment I have react navigation tabs as my main navigation - so on one of these tabs (the profile tab) I want to create the same concept as the picture..

Answer 1

Late answer but (for anyone else and future reference), react-navigation uses this package, react-native-tab-view: https://github.com/react-native-community/react-native-tab-view

for their tabs.

You can nest this within a screen, just like you desire (the previous answer only addresses the navigator inside navigator and that isn't what you want).

Here is an example (not exactly like you want, but you get the idea that you can. so instead of a background image, swap it out and use a view or scrollview accordingly to create that layout):

https://snack.expo.io/@satya164/collapsible-header-with-tabview

cheers :)

EDIT: i just found a way with just using react-navigation after all:

https://snack.expo.io/@mattx/collapsible-header-tabs

check it out

and another library: https://github.com/benevbright/react-navigation-collapsible

Answer 2

I don't know if you've figured it out yet, but you can nest the TabNavigator inside a StackNavigator. That way, you can have a scrollable Tab.

    class ProfileMenu extends React.Component{
    render() {
     return(
      //whatever you wanted at the top 
      )
     }
    }
    
    const TabNaviga = createMaterialTopTabNavigator({
      Tweets: {screen: TweetScreen,},
      Replies: {screen: RepliesScreen,},
    })
    
    const YNavigator = createStackNavigator ({
      Home:{screen: TabNaviga,
        navigationOptions: ({navigation}) => ({
          header: <ProfileMenu navigation= {navigation} />,
        })
      }
    })
export default YNavigator