react-native - 自定义滑动底部标签栏动画问题

Question

我为我的应用程序制作了一个自定义的滑动底部标签栏动画。但问题是，当我单击底部图标进行导航时，它不起作用，我必须单击两次才能使动画工作。
这是相同的gif。
我有我的程序，如下所示。

const CustomBottomNavigation = props => {
  // Screen Width
  const {width} = Dimensions.get('screen');

  // Position to animate the background color applied
  const position = new Animated.ValueXY();

  const animStyles = {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    width: width / 4,
    height: 3,
    backgroundColor: colors.grey,
    transform: position.getTranslateTransform(),
  };

  const animate = (value, route) => {
    props.navigation.navigate(route);
    Animated.timing(position, {
      toValue: {x: value, y: 0},
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View style={animStyles} />
      <BottomTabBar
        {...props}
        onTabPress={({route}) => {
          switch (route.key) {
            case 'BuyerScreen':
              animate(0, route.key);
              break;
            case 'ClosingCostsScreen':
              animate(width / 4, route.key);
              break;
            case 'PrepaidsScreen':
              animate(width / 2, route.key);
              break;
            case 'PaymentsScreen':
              animate(width - width / 4, route.key);
              break;
          }
        }}
        style={{backgroundColor: 'transparent'}}
      />
    </View>
  );
};