CODEWITHSUNDEEP
react-nativereact-navigationexporeact-navigation-stack
patdugan
patdugan

Reputation: 797

How do I apply independent HeaderStyleInterpolators in react-navigation?

Using react-navigation-stack 1.10.3, applying a headerTransitionPreset of 'uikit' transitioned header titles from left-to-right while fading in/out whatever elements were in headerRight or headerLeft.

With react-navigation-stack 2.0.15, this transition is deprecated in favor of using headerStyleInterpolator.forUIKit, but that transition applies universally to the entire header, not just the title.

How do I replicate the previous behavior on 1.10.X with 2.0.X where I can use forFade on headerRight and headerLeft?

Example on 2.0.15: enter image description here

Example on 1.10.3: enter image description here

The main issue is the removal of the fade animation when going back in the stack and it's replacement with a left-to-right transition.

Upvotes: 0

Views: 1999

Answers (1)

satya164
satya164

Reputation: 10152

The forUIKit styles mimic the native iOS behavior. If you don't want the same behavior, you can use a custom style interpolator instead.

If you want to keep the same interpolator from forUIKit, but want to fade the left and right button instead of the default transition, you can override those styles with something like this:

function forCustomHeaderAnimation(options) {
  const { progress } = options.current;
  const styles = HeaderStyleInterpolators.forUIKit(options);

  return {
    ...styles,
    leftButtonStyle: { opacity: progress },
    leftLabelStyle: {},
    rightButtonStyle: { opacity: progress },
  };
}

// ...

static navigationOptions = {
  headerStyleInterpolator: forCustomHeaderAnimation
}

Source: https://github.com/react-navigation/navigation-ex/blob/2243b45cc1addf83727166d82736d214f181b1fb/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

Upvotes: 0

Related Questions