feat: improve types for options and support a function

example/StackNavigator.tsx

@@ -28,6 +28,13 @@ type Action =
     }
   | { type: 'POP_TO_TOP' };
 
+export type StackNavigationOptions = {
+  /**
+   * Title text for the screen.
+   */
+  title?: string;
+};
+
 export type StackNavigationProp<
   ParamList extends ParamListBase
 > = NavigationProp<ParamList> & {
@@ -236,7 +243,10 @@ const StackRouter: Router<CommonAction | Action> = {
 };
 
 export function StackNavigator(props: Props) {
-  const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+  const { state, descriptors } = useNavigationBuilder<StackNavigationOptions>(
+    StackRouter,
+    props
+  );
 
   return (
     <div style={{ position: 'relative' }}>
@@ -277,4 +287,6 @@ export function StackNavigator(props: Props) {
   );
 }
 
-export default createNavigator(StackNavigator);
+export default createNavigator<StackNavigationOptions, typeof StackNavigator>(
+  StackNavigator
+);

example/TabNavigator.tsx

@@ -23,6 +23,13 @@ type Action = {
   payload: { name?: string; key?: string; params?: object };
 };
 
+export type TabNavigationOptions = {
+  /**
+   * Title text for the screen.
+   */
+  title?: string;
+};
+
 export type TabNavigationProp<ParamList extends ParamListBase> = NavigationProp<
   ParamList
 > & {
@@ -196,4 +203,6 @@ export function TabNavigator(props: Props) {
   );
 }
 
-export default createNavigator(TabNavigator);
+export default createNavigator<TabNavigationOptions, typeof TabNavigator>(
+  TabNavigator
+);

example/index.tsx

@@ -149,14 +149,14 @@ function App() {
         <MyStack.Screen
           name="first"
           component={First}
-          options={{ title: 'Foo' }}
+          options={({ route }) => ({
+            title: `Foo (${route.params ? route.params.author : ''})`,
+          })}
           initialParams={{ author: 'Jane' }}
         />
-        <MyStack.Screen
-          name="second"
-          component={Second}
-          options={{ title: 'Bar' }}
-        />
+        <MyStack.Screen name="second" options={{ title: 'Bar' }}>
+          {props => <Second {...props} />}
+        </MyStack.Screen>
         <MyStack.Screen name="third" options={{ title: 'Baz' }}>
           {() => (
             <MyTab.Navigator initialRouteName="fifth">