moved to Typescript

Author: bySabi

.gitignore

@@ -52,4 +52,3 @@ android/keystores/debug.keystore
 coverage/
 .jest/
 **/__snapshots__/**
-

README.md

@@ -4,7 +4,6 @@
 
 🏄‍♀️ Surfing the wave of React Hook hype with a few convenience hooks for `@react-navigation/core` v3. Destined to work on web, server, and React Native. Contributions welcome!
 
-
 ## Examples (web only so far)
 
 See an example web app which uses react-navigation and hooks on the client and the server:
@@ -82,9 +81,9 @@ function ReportNavigationEvents() {
     // prev state on evt.lastState
     // triggering navigation action on evt.action
 
-    setEvents(events => [...events, evt.type]);
-    // evt.type is [will/did][Focus/Blur]
+    setEvents(events => [...events, evt]);
   });
+  // evt.type is [will/did][Focus/Blur]
   return (
     <>
       {events.map(evt => (

__mocks__/react.js

@@ -0,0 +1,5 @@
+// Right now is not a way to trigger useEffect from Jest
+// see: https://github.com/facebook/react/issues/14050
+// TODO: Remove this module mock when solved
+import * as React from 'react';
+module.exports = { ...React, useEffect: React.useLayoutEffect };

dist/Hooks.js

@@ -39,7 +39,9 @@ function useNavigationEvents(handleEvt) {
     // identifies the nav object, then we should probably pass [navigation.state.key] here, to
     // make sure react doesn't needlessly detach and re-attach this effect. In practice this
     // seems to cause troubles
-    undefined);
+    undefined
+    // [navigation.state.key]
+    );
 }
 exports.useNavigationEvents = useNavigationEvents;
 var emptyFocusState = {
@@ -52,7 +54,9 @@ var didFocusState = tslib_1.__assign({}, emptyFocusState, { isFocused: true });
 var willBlurState = tslib_1.__assign({}, emptyFocusState, { isBlurring: true });
 var didBlurState = tslib_1.__assign({}, emptyFocusState, { isBlurred: true });
 var willFocusState = tslib_1.__assign({}, emptyFocusState, { isFocusing: true });
-var getInitialFocusState = function (isFocused) { return isFocused ? didFocusState : didBlurState; };
+var getInitialFocusState = function (isFocused) {
+    return isFocused ? didFocusState : didBlurState;
+};
 function focusStateOfEvent(eventName) {
     switch (eventName) {
         case 'didFocus':

src/Hooks.ts

@@ -1,6 +1,6 @@
 import { useState, useContext, useEffect } from 'react';
 import { NavigationContext } from '@react-navigation/core';
-// TODO: Remove "react-navigation-types-only" when https://github.com/react-navigation/react-navigation/pull/5276
+// TODO: move to "react-navigation" when https://github.com/react-navigation/react-navigation/pull/5276
 // get merged
 import {
   NavigationScreenProp,
@@ -16,7 +16,7 @@ export function useNavigation<S>(): NavigationScreenProp<S & NavigationRoute> {
 }
 
 export function useNavigationParam<T extends keyof NavigationParams>(
-  paramName: T,
+  paramName: T
 ) {
   return useNavigation().getParam(paramName);
 }
@@ -50,7 +50,7 @@ export function useNavigationEvents(handleEvt: NavigationEventCallback) {
     // identifies the nav object, then we should probably pass [navigation.state.key] here, to
     // make sure react doesn't needlessly detach and re-attach this effect. In practice this
     // seems to cause troubles
-    undefined,
+    undefined
     // [navigation.state.key]
   );
 }
@@ -65,7 +65,8 @@ const didFocusState = { ...emptyFocusState, isFocused: true };
 const willBlurState = { ...emptyFocusState, isBlurring: true };
 const didBlurState = { ...emptyFocusState, isBlurred: true };
 const willFocusState = { ...emptyFocusState, isFocusing: true };
-const getInitialFocusState = (isFocused: boolean) => isFocused ? didFocusState : didBlurState;
+const getInitialFocusState = (isFocused: boolean) =>
+  isFocused ? didFocusState : didBlurState;
 function focusStateOfEvent(eventName: EventType) {
   switch (eventName) {
     case 'didFocus':

src/__tests__/Hooks-test.tsx

@@ -1,42 +1,148 @@
-import * as React from 'react';
-import { View, Button } from 'react-native';
+import { default as React, useState } from 'react';
 import * as renderer from 'react-test-renderer';
-import { createSwitchNavigator } from '@react-navigation/core';
+import {
+  createSwitchNavigator,
+  NavigationActions,
+} from '@react-navigation/core';
 import { createAppContainer } from '@react-navigation/native';
+// TODO: move to "react-navigation" when https://github.com/react-navigation/react-navigation/pull/5276
+// get merged
+import { NavigationEventPayload } from 'react-navigation-types-only';
 
 import {
-  useNavigation
+  useNavigation,
+  useNavigationParam,
+  useNavigationState,
+  useNavigationKey,
+  useNavigationEvents,
+  useFocusState,
 } from '../../dist/Hooks';
 
 const HomeScreen = () => {
   const { navigate } = useNavigation();
-  return <Button title="Go to Details" onPress={() => navigate('Details')} />;
-}
+  return navigate('Details', { from: 'Home' });
+};
+
+const DetailsScreen = () => {
+  const from = useNavigationParam('from');
+  return <p>{from}</p>;
+};
+
+const OtherScreen = () => {
+  const { routeName } = useNavigationState();
+  return <p>{routeName}</p>;
+};
+
+const KeyScreen = () => {
+  const key = useNavigationKey();
+  return <p>{key}</p>;
+};
 
-const DetailsScreen = () => <View />;
+const EventScreen = () => {
+  const [events, setEvents] = useState([] as NavigationEventPayload[]);
+  useNavigationEvents((evt) => {
+    // latest state on evt.state
+    // prev state on evt.lastState
+    // triggering navigation action on evt.action
+
+    setEvents(events => [...events, evt]);
+  });
+  // evt.type is [will/did][Focus/Blur]
+  return (
+    <>
+      {events.map((evt, i) => (
+        <p key={i}>{evt.type}</p>
+      ))}
+    </>
+  );
+};
+
+const FocusScreen = () => (
+  <p>{useFocusState().isFocused ? 'Focused' : 'Not Focused'}</p>
+);
 
-const AppNavigator = createSwitchNavigator(
+const AppNavigator1 = createSwitchNavigator(
   {
-    Home: HomeScreen,
-    Details: DetailsScreen,
+    Home: HomeScreen, // { nav: { "index": 0 ...
+    Details: DetailsScreen, // { nav: { "index": 1 ...
+    Other: OtherScreen, // { nav: { "index": 2 ...
   },
   {
     initialRouteName: 'Home',
+  }
+);
+
+const AppNavigator2 = createSwitchNavigator(
+  {
+    Other: OtherScreen,
+    Key: KeyScreen,
+    Event: EventScreen,
+    Focus: FocusScreen,
   },
+  {
+    initialRouteName: 'Other',
+  }
 );
 
-const App = createAppContainer(AppNavigator);
+describe('AppNavigator1 Stack', () => {
+  const App = createAppContainer(AppNavigator1);
+  let navigationContainer;
+  beforeEach(() => {
+    navigationContainer = renderer.create(<App />);
+  });
 
-describe('Navigating to a new screen', () => {
-  it('renders successfully', () => {
-    const rendered = renderer.create(<App />);
-    let tree = rendered.toJSON();
-    expect(tree).toMatchSnapshot();
+  it('useNavigation: Navigating to "DetailsScreen"', () => {
+    const instance = navigationContainer.getInstance() as { state?: any };
+    expect(instance.state.nav).toMatchObject({ index: 1 });
+  });
 
-    // Manually trigger onPress
-    //tree!.props.onPress();
-    tree = rendered.toJSON();
+  it('useNavigationParam: Get passed parameter', () => {
+    const children = navigationContainer.toJSON().children;
+    expect(children).toContain('Home');
+  });
+
+  afterEach(() => {
+    navigationContainer.unmount();
+  });
+});
+
+describe('AppNavigator2 Stack', () => {
+  const App = createAppContainer(AppNavigator2);
+  let navigationContainer;
+  beforeEach(() => {
+    navigationContainer = renderer.create(<App />);
+  });
+
+  const eventTypes = ['willFocus', 'didFocus', 'willBlur', 'didBlur', 'action'];
+
+  it('usenNavigationState: Get current route name', () => {
+    const children = navigationContainer.toJSON().children;
+    expect(children).toContain('Other');
+  });
+
+  it('usenNavigationKey: Get current key name', () => {
+    const instance = navigationContainer.getInstance();
+    instance.dispatch(NavigationActions.navigate({ routeName: 'Key' }));
+    const children = navigationContainer.toJSON().children;
+    expect(children).toContain('Key');
+  });
+
+  it('useNavigationEvents: Get current subscribed events', () => {
+    const instance = navigationContainer.getInstance();
+    instance.dispatch(NavigationActions.navigate({ routeName: 'Event' }));
+    const elems = navigationContainer.toJSON();
+    expect(eventTypes).toContain(elems[0].children.toString());
+    expect(eventTypes).toContain(elems[1].children.toString());
+  });
+
+  it('useFocusState: Get focus state', () => {
+    const instance = navigationContainer.getInstance();
+    instance.dispatch(NavigationActions.navigate({ routeName: 'Focus' }));
+    const children = navigationContainer.toJSON().children;
+    expect(children).toContain('Focused');
+  });
 
-    expect(rendered).toMatchSnapshot();
+  afterEach(() => {
+    navigationContainer.unmount();
   });
 });

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
-    "lib": ["es6"],
+    "lib": ["es7"],
     "jsx": "react",
     "sourceMap": true,
     "moduleResolution": "node",