How to use the react-navigation-hooks.useNavigation function in react-navigation-hooks

To help you get started, we’ve selected a few react-navigation-hooks examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github fram-x / react-native-fluid / src / examples / Navigation / screen.tsx View on Github external
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 (
github fram-x / react-native-fluid / src / packages / navigation / src / hooks / useNavigationState.ts View on Github external
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(
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / iPod.tsx View on Github external
const NotImplementedYet = () => {
  const navigation = useNavigation();
  Alert.alert("Not Implemented Yet 🤷‍♂️");
  navigation.navigate("Menu");
  return null;
};
github wcandillon / can-it-be-done-in-react-native / season3 / src / Episodes / Icon.tsx View on Github external
export default ({ id, name, icon }: IconProps) => {
  const navigation = useNavigation();
  return (
     navigation.navigate(id)}
      style={styles.container}
    >
      <img style="{styles.icon}">
      
    
  );
};
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / List / List.tsx View on Github external
export default ({ items, y, command }: ListProps) =&gt; {
  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, () =&gt; navigation.navigate("Menu"));
  useCode(
    () =&gt;
      block([
        cond(
          not(inViewport(index, translateY, goingUp)),
          set(
            translateY,
            cond(
              goingUp,
              [add(translateY, ITEM_HEIGHT)],
              [sub(translateY, ITEM_HEIGHT)]
github digidem / mapeo-mobile / src / frontend / screens / CameraScreen.js View on Github external
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 (

react-navigation-hooks

React hooks for convenient react-navigation use

MIT
Latest version published 5 years ago

Package Health Score

48 / 100
Full package analysis

Popular react-navigation-hooks functions

Similar packages