How to remove easing animation in tabs

[bansawbanchee]

Hey Guys,

Probably not a real issue but if it is possible to do maybe we add it to the docs for us none Front Enders.

On tab change I want to keep the ripple effect but I do not want the EaseIn effect. In my case the Tabs are used as Actions not links. I cannot for the life of me find an example in the repo.

Please excuse my brevity I am typing this on my phone.

Thanks!

[timomeh]

Sorry, I neglected the examples. If you don't want the background ripple effect (the circular change of the background color), you just don't specify a barBackgroundColor. Use backgroundColor on <BottomNavigation /> and that's it.

This should do it:

<BottomNavigation
  labelColor="grey"
  activeLabelColor="green"
  rippleColor="green"
  backgroundColor="white"
  style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
  onTabChange={(newTabIndex) => alert(`New Tab at position ${newTabIndex}`)}
>
  <Tab
    label="Movies & TV"
    icon={<Icon size={24} color="white" name="tv" />}
    activeIcon={<Icon size={24} color="green" name="tv" />}
  />
  <Tab
    label="Music"
    icon={<Icon size={24} color="white" name="music-note" />}
    activeIcon={<Icon size={24} color="green" name="tv" />}
  />
  <Tab
    label="Books"
    icon={<Icon size={24} color="white" name="book" />}
    activeIcon={<Icon size={24} color="green" name="tv" />}
  />
</BottomNavigation>

[timomeh]

... And I'll write more example, pinky swear!

[bansawbanchee]

Thanks for the quick response! I'm actually talking about how the tab becomes active and "Grows" in size. I want to remove that effect. Also it seems the first tab is always active on load.

Is there some specific style I can add to each tab that would remove this effect?

[bansawbanchee]

I'm sorry... I didn't fully read through what you wrote... Your example above solves my problem.

Again thanks for such a quick response.

[timomeh]

No problem, happy to help!

On Wed, Mar 08, 2017 at 5:10pm, bansawbanchee < notifications@github.com [notifications@github.com] > wrote: I'm sorry... I didn't fully read through what you wrote... Your example above solves my problem.

Again thanks for such a quick response.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub [https://github.com/timomeh/react-native-material-bottom-navigation/issues/15#issuecomment-285085071] , or mute the thread [https://github.com/notifications/unsubscribe-auth/AECBwCv4nYYIydEUeCwXNiCaggDTtEuLks5rjtL6gaJpZM4MW7Y-] .

[bansawbanchee]

it actually looks like what I want is an enhancement since the easing is built into the component itself. I'll have to get this working on my end regardless . If my method is clean to enable/disable easing I'll make a pull request.

  _animateFixedInactiveToActive = () => {
    const duration = 266
    const easing = easeInOut

    Animated.parallel([
      Animated.timing(this.state.fixed.iconY,
        { toValue: -2, duration, easing, useNativeDriver }),
      Animated.timing(this.state.fixed.labelScale,
        { toValue: 1, duration, easing, useNativeDriver }),
      Animated.timing(this.state.fixed.labelY,
        { toValue: 0, duration, easing, useNativeDriver }),
      Animated.timing(this.state.fixed.iconOpacity,
        { toValue: 1, duration, easing, useNativeDriver })
    ]).start()
  }

  _animateFixedActiveToInactive = () => {
    const duration = 266
    const easing = easeInOut

    Animated.parallel([
      Animated.timing(this.state.fixed.iconY,
        { toValue: 0, duration, easing, useNativeDriver }),
      Animated.timing(this.state.fixed.labelScale,
        { toValue: 0.857, duration, easing, useNativeDriver }),
      Animated.timing(this.state.fixed.labelY,
        { toValue: 2, duration, easing, useNativeDriver }),
      Animated.timing(this.state.fixed.iconOpacity,
        { toValue: 0.8, duration, easing, useNativeDriver })
    ]).start()
  }

  _animateShiftingInactiveToActive = () => {
    const easing = easeInOut

    // HACK: See above "didOnceBecameActive"
    if (Platform.OS === 'android') {
      if (this.didOnceBecameActive) this.state.shifting.iconY.setValue(0)
      this.didOnceBecameActive = true
    }

    Animated.parallel([
      Animated.timing(this.state.shifting.iconY,
        { toValue: 0, duration: 266, easing, useNativeDriver }),
      Animated.timing(this.state.shifting.iconOpacity,
        { toValue: 1, duration: 266, easing, useNativeDriver }),
      Animated.timing(this.state.shifting.labelOpacity,
        { toValue: 1, duration: 183, delay: 83, easing, useNativeDriver }),
      Animated.timing(this.state.shifting.labelScale,
        { toValue: 1, duration: 183, delay: 83, easing, useNativeDriver })
    ]).start()
  }

  _animateShiftingActiveToInactive = () => {
    const easing = easeInOut

    Animated.parallel([
      Animated.timing(this.state.shifting.iconY,
        { toValue: 8, duration: 266, easing, useNativeDriver }),
      Animated.timing(this.state.shifting.labelOpacity,
        { toValue: 0, duration: 83, easing, useNativeDriver }),
      Animated.timing(this.state.shifting.labelScale,
        { toValue: 0.857, duration: 83, easing, useNativeDriver }),
      Animated.timing(this.state.shifting.iconOpacity,
        { toValue: 0.8, duration: 266, easing, useNativeDriver })
    ]).start()
  }

[timomeh]

Ah, okay, now I get it. Unfortunately I won't include such edge-cases, I'm very very sorry.

Please don't get me wrong, I don't want to sound dickish. I would be pleased to make something for everybody. But this Component/Package should be a "high fidelity" solution for the Bottom Navigation of the Material Design Specs. Even though a prop could prevent the animation very easily – if I implement this (myself or via PR), I'd have to accept more changes/PRs. It would be a bummer if this became a half-baked one-size-fits-all Component for all the Needs of every TabBar ever, and the Material Bottom Navigation (which is the main focus of this) would become secondary.

But since you found where the animation is located, you could simply fork this, remove this part of the code and use your version. 🙂

[bansawbanchee]

completely understand. thanks!

On Mar 8, 2017 12:55, "Timo Mämecke" notifications@github.com wrote:

Closed #15 https://github.com/timomeh/react-native-material-bottom-navigation/issues/15 .

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/timomeh/react-native-material-bottom-navigation/issues/15#event-991778690, or mute the thread https://github.com/notifications/unsubscribe-auth/AXurJdf3djv8TRuoI4o2InBQ-ZsMc-Ttks5rjuuDgaJpZM4MW7Y- .