hooglcookie.blogg.se - React tabview

REACT TABVIEW CODE

Unlike with Header, we need to cap the total distance the component can travel up the screen, to give the effect that the tabs are pinned beneath the NavBar. Similar to the Header, the TabBar must be slid up the screen using translateY. The TabBar should slide up and then pin to the bottom edge of the NavBar.

This transform gives the visual appearance of the Header scrolling with the TabBar and TabViews up and off the page, without actually scrolling the page (more on managing scroll position, and the complexity that comes with that in the implementation details below). Because the top-level Screen container cannot be scrollable, we must simulate the effect that the top of the page is “scrolling” by interpolating the active TabView’s scroll position to a translateY offset for the Header. Because TabViews must be independently scrollable (with their own independent scroll positions), the top-level Screen container cannot be scrollable. One important limitation of React Native is that there are no nested scroll surfaces. This might seem obvious, but getting this right on React Native can be quite challenging.

The Header should slide up and off the screen (beneath the NavBar) on scroll.

The ideal trigger point for this animation is right as the Header title is obstructed by the NavBar. We first noticed this behavior when analyzing Apple Note’s UI, but you’ll see in all of Apple’s native applications (Apple Music, Mail, etc.) that they implement this same fade trigger point. While this works really well when scrolling slowly, if you scroll more quickly (standard in day-to-day use of applications) you’ll notice the NavBar title will often transition in too abruptly. Many people make the mistake of interpolating the NavBar title opacity based on the page’s scroll position.

The NavBar should fade in/out with a timer based animation when the scroll reaches a certain position.

Study the gif above to see if you can pick out each of these subtle behaviors. Here is a list of key interactions (all of which you will find in our sample project on github). Many of these behaviors were identified through studying external implementations like Twitter and Instagram, as well as platform specific applications and specifications like Apple’s HIG and Google’s Material Design. There are a handful of key interactions that go into making the TabView look and feel organic.

Inactive TabView - TabViews that are off screen (not currently visible).

Active TabView - The currently visible TabView.

Bridge Traffic - Messages being sent over React Native’s bridge between its javascript and native layer.

Interpolation - Maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions.Screen - The top level container component (root level React component).īeyond components we will also be referring to the following terms:.But to keep it simple we just have a title. You often see this with back arrows or other icons up here as well. NavBar This is the top screen navigation.

This can be asset cells, tweets, photos, or any other content.

TabView This is the scrollable tab content.

It highlights the active tab and allows you to navigate between each TabView with a tap or swipe.

Header This is the top typographic lockup on the Screen.

We also extracted a simple companion example project - which you can use to follow along or help build your own working version of this experience. Glossary of UX termsīefore we get started, let’s define some terminology that will help us describe the core components needed for pulling off this experience.

REACT TABVIEW CODE

However, despite how universal this UX experience has become, behind the scenes it still requires a large lift of complex gestures and state management to get it feeling and performing “just right” for the end user.Īt Coinbase we were able to pull this off for our recent React Native rewrite and wanted to share a little bit more about the UX details that went into this interaction, as well as the code needed to make it happen. if you scroll past the Header on one TabView, switching tabs keeps the global header in the same position, irrespective of tab scroll). It allows you to swipe through the different TabViews, and it treats the overall scroll position intelligently (i.e. It’s a simple tab component, with a scroll-away Header and TabBar that pins to the top of the screen. You see it on things like Instagram, Twitter, Apple Music, AND most recently on the Coinbase prices screen. You’ve probably used this interaction countless times in your day to day life and not spent much time thinking about it. Introduction to the “TabBar” user experience