Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to access useCurrentTabScrollY from a parent component and not in the header? #359

Open
AugustoAleGon opened this issue Aug 4, 2023 · 2 comments
Labels
question Further information is requested

Comments

@AugustoAleGon
Copy link

I am facing an issue when I try to get the useCurrentTabScrollY value and share to its parent.
I already check the Animated Header on the examples, since the main issue is that SharedValue actually can't be access from its parent to make some modification on the header.

export const Header = ({ value }) => {
  value = useCurrentTabScrollY();

  const scrollYText = useDerivedValue(
    () => `Scroll Y is: ${value.value.toFixed(2)}`,
  );

  return (
    <View style={[styles.root]}>
      <Animated.View style={styles.container}>
        <ReText style={styles.text} text={scrollYText} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: '#2196f3',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    height: 250,
  },
  container: {
    height: 250,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
  text: {
    position: 'absolute',
    color: 'white',
    fontSize: 24,
    textAlign: 'center',
  },
});

I am trying to pass as a value but from the parent I don't get any updates.

@AugustoAleGon AugustoAleGon added the question Further information is requested label Aug 4, 2023
@nica0012
Copy link

nica0012 commented Aug 4, 2023

the onScroll method does not work either on the Tabs.Flatlist

@FabianDean
Copy link

FabianDean commented Mar 31, 2024

the onScroll method does not work either on the Tabs.Flatlist

I found that it doesn't work either, but you can do something like this with the Tabs.Flatlist being in a separate component

  const scrollHandler = useCallback(
    (value: number) => {
      /* Handle however */
    },
    [],
  );

  const scrollY = useCurrentTabScrollY();

  // From react-native-reanimated
  useAnimatedReaction(
    () => scrollY.value,
    (y) => {
      runOnJS(scrollHandler)(y);
    },
    [scrollHandler],
  );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants