How to use react-navigation-hooks - 6 common examples

export const Screen: React.FC = ({
  name,
  color,
  //interpolationColor,
  //interpolatorPosition,
  next,
  prev,
  mode = "bubbles",
}) => {
  const navigation = useNavigation();
  const direction = useNavigationDirection();
  // const { forwardTo, backTo, forwardFrom, backFrom } = useNavigationStates();

  const buttonTransitions = useHorizontalTransition(screenWidth);
  const headerTransitions = useTopTransition(120);

  // const sharedTransition = useFluidConfig(
  //   OnEnterState(forwardTo, "Shared_" + next || ""),
  //   OnEnterState(backTo, "Shared_" + prev || ""),
  // );

  return (

export const useNavigationState = (
  name: string,
): { navigationState: NavigationState; index: number } => {
  const [navigationState, setNavigationState] = useState(
    NavigationState.None,
  );

  const navigation = useNavigation();
  const myIndexRef = useRef(getMyIndex(navigation));
  const prevIndexRef = useRef(getIndex(navigation));

  // Set up node for tracking swiping
  const stackCardAnimationContext = useContext(StackCardAnimationContext);

  const updateSwiping = useCallback((args: readonly (0 | 1)[]) => {
    const isSwiping = args[0];
    if (isSwiping) {
      setNavigationState(NavigationState.BackFrom);
    }
  }, []);

  const updateSwipingNode = useMemo(() => {
    if (stackCardAnimationContext) {
      return always(

const NotImplementedYet = () => {
  const navigation = useNavigation();
  Alert.alert("Not Implemented Yet 🤷‍♂️");
  navigation.navigate("Menu");
  return null;
};

export default ({ id, name, icon }: IconProps) => {
  const navigation = useNavigation();
  return (
     navigation.navigate(id)}
      style={styles.container}
    >
      <img style="{styles.icon}">
      
    
  );
};

export default ({ items, y, command }: ListProps) => {
  const navigation = useNavigation();
  const y1 = diffClamp(y, 0, items.length * ITEM_HEIGHT - 1);
  const translateY = new Value(0);
  const goingUp = lessThan(diff(y1), 0);
  const index = floor(divide(y1, ITEM_HEIGHT));
  useOnPress(command, Command.TOP, () => navigation.navigate("Menu"));
  useCode(
    () =>
      block([
        cond(
          not(inViewport(index, translateY, goingUp)),
          set(
            translateY,
            cond(
              goingUp,
              [add(translateY, ITEM_HEIGHT)],
              [sub(translateY, ITEM_HEIGHT)]

const CameraScreen = () => {
  const focusState = useFocusState();
  const [, { newDraft }] = useDraftObservation();
  const navigation = useNavigation();
  const { permissions } = React.useContext(PermissionsContext);

  const handleAddPress = React.useCallback(
    (e: any, capture: CapturePromise) => {
      log("pressed add button");
      newDraft(undefined, { tags: {} }, capture);
      navigation.navigate(
        "NewObservation",
        {},
        NavigationActions.navigate({ routeName: "CategoryChooser" })
      );
    },
    [newDraft, navigation]
  );

  return (