SceneView scrolling behavior is not as expected when I touch a custom TabBar

[sundial-dreams]

I create a custom TabBar，and SceneView scrolling behavior is not as expected when I touch my TabBar. It looks like missing some View，like follow:

AppScreen:

TagScreen:

my code is:

// AppScreen
function AppScreen(): React.ReactElement {
  const {currentScreen} = useSelector((state: IStore) => state.uiState);
  const dispatch = useDispatch();  // I use Redux to update currentIndex

  const renderScene = useMemo(
    () =>
      SceneMap({
        Home: Home,
        Tags: Tags,
        Find: Find,
        Follows: Follows,
      }),
    [],
  );

  const renderTabBar = () => {
    return <Navigator />; // It is my custom TabBar
  };

  return (
    <>
      <AppHeaderBar title={Titles[currentScreen]} />
      <TabView
        onIndexChange={index => dispatch(updateCurrentScreen(index))}
        navigationState={{
          index: currentScreen,
          routes: Routes,
        }}
        lazy
        tabBarPosition="bottom"
        renderTabBar={renderTabBar}
        renderScene={renderScene}
      />
    </>
  );
}


// Navigator.tsx
export default function Navigator({style}: NavigatorProps) {
  const scaleAnimatedValue = useRef(new Animated.Value(0)).current;

  const {currentScreen} = useSelector((state: IStore) => state.uiState);
  const dispatch = useDispatch();

  const [onTouchIn, onTouchOut, scaleAnimatedStyle] =
    useTouchBounceAnimated(scaleAnimatedValue);

  const elems = Icons.map((icon, i) => {
    const isActive = currentScreen === i;
    return (
      <View style={styles.iconButton} key={i}>
        <Animated.View style={isActive && scaleAnimatedStyle}>
          <Icon
            name={icon}
            size={ICON_SIZE}
            color={isActive ? 'black' : '#efefef'}
            suppressHighlighting={true}
            onPress={() => dispatch(updateCurrentScreen(i))} // Using redux to update currentIndex
            onPressIn={e => {
              onTouchIn(e);
              // setCurrent(i);
            }}
            onPressOut={onTouchOut}
          />
        </Animated.View>
        <View
          style={[styles.iconButtonUnderline, {opacity: isActive ? 1 : 0}]}
        />
      </View>
    );
  });

  return (
    <View style={[styles.navigator_wrapper, style]}>
      <DropShadow style={styles.iconShadow}>
        <View style={styles.navigator}>{elems}</View>
      </DropShadow>
    </View>
  );
}

and

/// TagScreen
// TabBar
export function IllusTabBar({
  style,
  tabWidth,
  renderProps,
  onIndexChange,
}: IllusTabBarProps): React.ReactElement {
  const current = renderProps.navigationState.index;
  const tabItems = renderProps.navigationState.routes;
  const position = renderProps.position;

  const inputRange = tabItems.map((v, i) => i);

  const handleIndexChange = useCallback(
    (index: number) => {
      if (index === current) {
        return;
      }
      onIndexChange(index);
    },
    [current, onIndexChange],
  );

  const gap =
    (ContentWidth - tabItems.length * tabWidth) / (tabItems.length - 1);

  const animatedTranslateXStyle = useMemo(
    () => getTranslateX(position, tabItems, tabWidth, gap),
    [gap, position, tabItems, tabWidth],
  );

  const elems = tabItems.map((v, i) => {
    return (
      <TouchableWithoutFeedback onPress={() => handleIndexChange(i)}>
        <View style={[styles.tabItem, {width: tabWidth}]} key={i}>
          <Animated.Text
            suppressHighlighting={true}
            style={[styles.tabItemText, {color: 'black'}]}>
            {v.key}
          </Animated.Text>
        </View>
      </TouchableWithoutFeedback>
    );
  });
  return (
    <View style={[styles.illusTabs, style]}>
      <Animated.View
        style={[
          styles.tabItemBackground,
          {
            width: tabWidth,
            transform: [{translateX: animatedTranslateXStyle}],
          },
        ]}
      />
      {elems}
    </View>
  );
}

function EmbedContextForFeed({style}: PropsWithStyle): React.ReactElement {
  const {scrollEnabled, onScroll, onScrollBeginDrag} =
    useContext(ScrollContext);
  return (
    <Feed
      scrollEnabled={scrollEnabled}
      onScrollBeginDrag={onScrollBeginDrag}
      onScroll={onScroll}
    />
  );
}

// TabView
export default function IllusFeedTabView({
  style,
  scrollEnabled,
  onScroll,
  onScrollBeginDrag,
  tabItems,
}: IllusFeedTabViewProps): React.ReactElement {
  const [current, setCurrent] = useState(0);

  const renderScene = useMemo(
    () =>
      SceneMap(
        tabItems.reduce((acc, curKey) => {
          acc[curKey] = EmbedContextForFeed;
          return acc;
        }, {}),
      ),
    [tabItems],
  );

  const routes = useMemo(() => tabItems.map(v => ({key: v})), [tabItems]);

  const tabWidth = ContentWidth / tabItems.length - PaddingHorizontal;

  const renderTabBar = (
    props: SceneRendererProps & {
      navigationState: NavigationState<{key: string}>;
    },
  ) => {
    return (
      <IllusTabBar
        onIndexChange={setCurrent}
        tabWidth={tabWidth}
        renderProps={props}
      />
    );
  };

  return (
    <ScrollContext.Provider
      value={{onScroll, scrollEnabled, onScrollBeginDrag}}>
      <TabView
        style={[styles.tabView, style]}
        onIndexChange={setCurrent}
        navigationState={{
          index: current,
          routes,
        }}
        lazy
        renderTabBar={renderTabBar}
        tabBarPosition="top"
        renderScene={renderScene}
      />
    </ScrollContext.Provider>
  );
}