chore: migrate example to TS

packages/stack/example/src/DragLimitedToModal.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, Text, StyleSheet, Dimensions } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { NavigationStackScreenComponent } from 'react-navigation-stack';
 
 const HEIGHT = Dimensions.get('screen').height;
 
 const { interpolate } = Animated;
 
-const DragLimitedToModal = () => (
+const DragLimitedToModal: NavigationStackScreenComponent = () => (
   <View style={styles.modal}>
     <Text style={styles.text}>Adjusts to the size of text</Text>
   </View>

packages/stack/example/src/GestureInteraction.tsx

@@ -10,10 +10,12 @@ import MapView from 'react-native-maps';
 import {
   createStackNavigator,
   StackGestureContext,
+  NavigationStackScreenComponent,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 
-const IndexScreen = ({ navigation }) => (
+const IndexScreen: NavigationStackScreenComponent = ({ navigation }) => (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Button title="Go to MapView" onPress={() => navigation.navigate('Map')} />
     <Button title="Go to WebView" onPress={() => navigation.navigate('Web')} />
@@ -28,8 +30,15 @@ IndexScreen.navigationOptions = {
   title: 'Gesture Interactions',
 };
 
-class MapScreen extends React.Component {
-  constructor(props) {
+class MapScreen extends React.Component<
+  NavigationStackScreenProps,
+  { interactionComplete: boolean }
+> {
+  static navigationOptions = {
+    title: 'MapView',
+  };
+
+  constructor(props: NavigationStackScreenProps) {
     super(props);
     InteractionManager.runAfterInteractions(() => {
       this.setState({ interactionComplete: true });
@@ -63,10 +72,6 @@ class MapScreen extends React.Component {
   }
 }
 
-MapScreen.navigationOptions = {
-  title: 'MapView',
-};
-
 const WebViewScreen = () => (
   <StackGestureContext.Consumer>
     {ref => (

packages/stack/example/src/HeaderBackgrounds.tsx

@@ -4,13 +4,14 @@ import {
   createStackNavigator,
   TransitionPresets,
   HeaderStyleInterpolators,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 
 function createHeaderBackgroundExample(options = {}) {
   return createStackNavigator(
     {
       Login: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text
               style={styles.tips}
@@ -29,7 +30,7 @@ function createHeaderBackgroundExample(options = {}) {
         },
       },
       Games: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text
               style={styles.tips}
@@ -48,7 +49,7 @@ function createHeaderBackgroundExample(options = {}) {
         },
       },
       Main: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text style={styles.tips} onPress={() => navigation.navigate('My')}>
               Main Screen
@@ -60,7 +61,7 @@ function createHeaderBackgroundExample(options = {}) {
         },
       },
       My: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text
               style={styles.tips}

packages/stack/example/src/HeaderPreset.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Button, StatusBar } from 'react-native';
+import { Button, StatusBar, StyleProp, ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-navigation';
 import {
   createStackNavigator,
   TransitionPresets,
   HeaderStyleInterpolators,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 
-class HomeScreen extends React.Component {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -30,7 +31,7 @@ class HomeScreen extends React.Component {
   }
 }
 
-class OtherScreen extends React.Component {
+class OtherScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Your title here',
   };
@@ -57,7 +58,7 @@ class OtherScreen extends React.Component {
   }
 }
 
-class ScreenWithLongTitle extends React.Component {
+class ScreenWithLongTitle extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: "Another title that's kind of long",
   };
@@ -76,7 +77,7 @@ class ScreenWithLongTitle extends React.Component {
   }
 }
 
-class ScreenWithNoHeader extends React.Component {
+class ScreenWithNoHeader extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     header: null,
     title: 'No Header',
@@ -109,7 +110,8 @@ const StackWithHeaderPreset = createStackNavigator(
     defaultNavigationOptions: {
       ...TransitionPresets.SlideFromRightIOS,
       headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
-      headerTitleContainerStyle: { left: null },
+      // @ts-ignore
+      headerTitleContainerStyle: { left: null } as StyleProp<ViewStyle>,
       gestureEnabled: true,
     },
   }

packages/stack/example/src/ImageStack.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { Dimensions, Button, Image, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { FlatList, BorderlessButton } from 'react-native-gesture-handler';
 
-class ListScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
+class ListScreen extends React.Component<NavigationStackScreenProps> {
+  static navigationOptions = ({ navigation }: NavigationStackScreenProps) => ({
     title: 'Image list',
     headerBackTitle: 'Back',
     headerLeft: () => (
@@ -13,7 +16,7 @@ class ListScreen extends React.Component {
   });
 
   state = {
-    items: Array.apply(null, Array(60)).map((v, i) => {
+    items: Array.apply(null, Array(60)).map((_, i) => {
       return {
         id: i,
         src: `https://source.unsplash.com/random/400x${400 + i}`,
@@ -40,14 +43,14 @@ class ListScreen extends React.Component {
           </View>
         )}
         numColumns={3}
-        keyExtractor={(item, index) => index}
+        keyExtractor={(_, index) => String(index)}
         style={{ flex: 1, backgroundColor: '#fff' }}
       />
     );
   }
 }
 
-class DetailsScreen extends React.Component {
+class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Random image from Unsplash',
   };

packages/stack/example/src/ImmediateTransition.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { createAppContainer } from 'react-navigation';
 
-class ScreenOne extends React.Component {
+class ScreenOne extends React.Component<NavigationStackScreenProps> {
   componentDidMount() {
-    this._timer = setTimeout(() => {
+    setTimeout(() => {
       this.props.navigation.navigate('Screen2');
-      clearTimeout(this._timer);
     }, 0);
   }
 
@@ -29,7 +31,7 @@ class ScreenOne extends React.Component {
   }
 }
 
-class ScreenTwo extends React.Component {
+class ScreenTwo extends React.Component<NavigationStackScreenProps> {
   render() {
     return (
       <View style={styles.container}>

packages/stack/example/src/LifecycleInteraction.js

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { Button, Text, View, StyleSheet } from 'react-native';
-import { BarCodeScanner } from 'expo-barcode-scanner';
-import { withNavigationFocus } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
-
-const IndexScreen = ({ navigation }) => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Button
-      title="Go to BarCodeScanner"
-      onPress={() => navigation.navigate('BarCode')}
-    />
-    <Button
-      title="Return to other examples"
-      onPress={() => navigation.navigate('Home')}
-    />
-  </View>
-);
-
-IndexScreen.navigationOptions = {
-  title: 'Lifecycle Interactions',
-};
-
-@withNavigationFocus
-class BarCodeScreen extends React.Component {
-  handleBarCodeScanned = data => {
-    console.log('scanned...');
-    this.props.navigation.navigate('Info', { data });
-  };
-
-  render() {
-    return (
-      <View style={{ flex: 1 }}>
-        <BarCodeScanner
-          onBarCodeScanned={
-            this.props.isFocused ? this.handleBarCodeScanned : null
-          }
-          style={StyleSheet.absoluteFill}
-        />
-      </View>
-    );
-  }
-}
-
-BarCodeScreen.navigationOptions = {
-  title: 'BarCodeView',
-};
-
-class InfoScreen extends React.Component {
-  render() {
-    return (
-      <View style={{ flex: 1 }}>
-        <Text>{JSON.stringify(this.props.navigation.getParam('data'))}</Text>
-      </View>
-    );
-  }
-}
-
-InfoScreen.navigationOptions = {
-  title: 'Info',
-};
-
-export default createStackNavigator(
-  {
-    Index: IndexScreen,
-    BarCode: BarCodeScreen,
-    Info: InfoScreen,
-  },
-  {
-    initialRouteName: 'Index',
-  }
-);

packages/stack/example/src/LifecycleInteraction.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Button, Text, View, StyleSheet } from 'react-native';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+import { withNavigationFocus } from 'react-navigation';
+import {
+  createStackNavigator,
+  NavigationStackScreenComponent,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
+
+const IndexScreen: NavigationStackScreenComponent = ({ navigation }) => (
+  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <Button
+      title="Go to BarCodeScanner"
+      onPress={() => navigation.navigate('BarCode')}
+    />
+    <Button
+      title="Return to other examples"
+      onPress={() => navigation.navigate('Home')}
+    />
+  </View>
+);
+
+IndexScreen.navigationOptions = {
+  title: 'Lifecycle Interactions',
+};
+
+const BarCodeScreenBase = (
+  props: NavigationStackScreenProps & { isFocused: boolean }
+) => {
+  return (
+    <View style={{ flex: 1 }}>
+      <BarCodeScanner
+        onBarCodeScanned={
+          props.isFocused
+            ? data => {
+                console.log('scanned...');
+                props.navigation.navigate('Info', { data });
+              }
+            : () => {}
+        }
+        style={StyleSheet.absoluteFill}
+      />
+    </View>
+  );
+};
+
+BarCodeScreenBase.navigationOptions = {
+  title: 'BarCodeView',
+};
+
+const BarCodeScreen = withNavigationFocus(BarCodeScreenBase);
+
+const InfoScreen: NavigationStackScreenComponent = props => {
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>{JSON.stringify(props.navigation.getParam('data'))}</Text>
+    </View>
+  );
+};
+
+InfoScreen.navigationOptions = {
+  title: 'Info',
+};
+
+export default createStackNavigator(
+  {
+    Index: IndexScreen,
+    BarCode: BarCodeScreen,
+    Info: InfoScreen,
+  },
+  {
+    initialRouteName: 'Index',
+  }
+);

packages/stack/example/src/ModalPresentation.tsx

@@ -3,9 +3,10 @@ import { Button, View, Text } from 'react-native';
 import {
   createStackNavigator,
   TransitionPresets,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 
-class ListScreen extends React.Component {
+class ListScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'My Modal',
   };
@@ -28,7 +29,7 @@ class ListScreen extends React.Component {
   }
 }
 
-class DetailsScreen extends React.Component {
+class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     header: null,
   };

packages/stack/example/src/ModalStack.tsx

@@ -3,6 +3,8 @@ import { Button, View, Text, Dimensions, Switch } from 'react-native';
 import {
   createStackNavigator,
   CardStyleInterpolators,
+  NavigationStackScreenProps,
+  CardStyleInterpolator,
 } from 'react-navigation-stack';
 import Animated from 'react-native-reanimated';
 
@@ -12,10 +14,10 @@ const gestureResponseDistance = {
   vertical: Dimensions.get('window').height,
 };
 
-function forVerticalInvertedIOS({
+const forVerticalInvertedIOS: CardStyleInterpolator = ({
   current: { progress },
   layouts: { screen },
-}) {
+}) => {
   const translateY = interpolate(progress, {
     inputRange: [0, 1],
     outputRange: [-screen.height, 0],
@@ -29,10 +31,10 @@ function forVerticalInvertedIOS({
       ],
     },
   };
-}
+};
 
-class Modal extends React.Component {
-  static navigationOptions = ({ navigation }) => {
+class Modal extends React.Component<NavigationStackScreenProps> {
+  static navigationOptions = ({ navigation }: NavigationStackScreenProps) => {
     return {
       title: 'Modal',
       cardStyleInterpolator:
@@ -64,7 +66,10 @@ class Modal extends React.Component {
   }
 }
 
-class ListScreen extends React.Component {
+class ListScreen extends React.Component<
+  NavigationStackScreenProps,
+  { isInverted: boolean }
+> {
   static navigationOptions = {
     title: 'My Modal',
   };
@@ -108,7 +113,7 @@ class ListScreen extends React.Component {
   }
 }
 
-class DetailsScreen extends React.Component {
+class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     // Uncomment below to test inverted modal gesture
     // gestureDirection: 'inverted',

packages/stack/example/src/RevealStack.tsx

@@ -4,9 +4,11 @@ import { withNavigation } from 'react-navigation';
 import {
   createStackNavigator,
   TransitionPresets,
+  NavigationStackScreenProps,
+  NavigationStackProp,
 } from 'react-navigation-stack';
 
-const Buttons = withNavigation(props => (
+const Buttons = withNavigation((props: { navigation: NavigationStackProp }) => (
   <React.Fragment>
     <Button
       title="Go to Details"
@@ -73,7 +75,7 @@ class ListScreen extends React.Component {
   }
 }
 
-class DetailsScreen extends React.Component {
+class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Details',
     gestureResponseDistance: {

packages/stack/example/src/SimpleStack.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import { Dimensions, Button, View, Text } from 'react-native';
 import { withNavigation } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+  NavigationStackProp,
+} from 'react-navigation-stack';
 
-const Buttons = withNavigation(props => (
+const Buttons = withNavigation((props: { navigation: NavigationStackProp }) => (
   <React.Fragment>
     <Button
       title="Push Details"
@@ -79,7 +83,7 @@ class ListScreen extends React.Component {
   }
 }
 
-class DetailsScreen extends React.Component {
+class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Details',
     gestureResponseDistance: {

packages/stack/example/src/StackWithDrawer.tsx

@@ -1,19 +1,38 @@
 import * as React from 'react';
 import { Button, Text, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
-import { createDrawerNavigator } from 'react-navigation-drawer';
-import { createBottomTabNavigator } from 'react-navigation-tabs';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
+import {
+  createDrawerNavigator,
+  DrawerContentComponentProps,
+} from 'react-navigation-drawer';
+import {
+  createBottomTabNavigator,
+  NavigationTabScreenProps,
+} from 'react-navigation-tabs';
 
-function Menu({ navigation }) {
+function Menu({ navigation }: DrawerContentComponentProps) {
   return (
     <View style={{ flex: 1 }}>
-      <Button title="Open on top" onPress={() => navigation.navigate('Top')} />
+      <Button
+        title="Open on top"
+        onPress={() => {
+          // @ts-ignore
+          navigation.navigate('Top');
+        }}
+      />
     </View>
   );
 }
 
-class Fake extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
+class Fake extends React.Component<
+  NavigationTabScreenProps | NavigationStackScreenProps
+> {
+  static navigationOptions = ({
+    navigation,
+  }: NavigationTabScreenProps | NavigationStackScreenProps) => ({
     title: navigation.getParam('title'),
   });
 

packages/stack/example/src/StackWithInput.tsx

@@ -3,6 +3,7 @@ import { Button, TextInput, View } from 'react-native';
 import {
   createStackNavigator,
   CardStyleInterpolators,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 
 class Input extends React.Component {
@@ -25,7 +26,7 @@ class Input extends React.Component {
   }
 }
 
-class Home extends React.Component {
+class Home extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Home',
   };

packages/stack/example/src/SwitchWithStacks.tsx

@@ -8,9 +8,12 @@ import {
   View,
 } from 'react-native';
 import { createSwitchNavigator } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 
-class SignInScreen extends React.Component<any, any> {
+class SignInScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Please sign in',
   };
@@ -34,7 +37,7 @@ class SignInScreen extends React.Component<any, any> {
   };
 }
 
-class HomeScreen extends React.Component<any, any> {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome to the app!',
   };
@@ -59,7 +62,7 @@ class HomeScreen extends React.Component<any, any> {
   };
 }
 
-class OtherScreen extends React.Component<any, any> {
+class OtherScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Lots of features here',
   };
@@ -79,7 +82,7 @@ class OtherScreen extends React.Component<any, any> {
   };
 }
 
-class LoadingScreen extends React.Component<any, any> {
+class LoadingScreen extends React.Component<NavigationStackScreenProps> {
   componentDidMount() {
     this._bootstrapAsync();
   }

packages/stack/example/src/TransparentStack.js

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { Button, View, Text } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
-import Animated from 'react-native-reanimated';
-
-class ListScreen extends React.Component {
-  render() {
-    return (
-      <View
-        style={{
-          flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: 'white',
-        }}
-      >
-        <Text>List Screen</Text>
-        <Text>A list may go here</Text>
-        <Button
-          title="Open Dialog"
-          onPress={() => this.props.navigation.navigate('ModalDialog')}
-        />
-        <Button
-          title="Go back to all examples"
-          onPress={() => this.props.navigation.navigate('Home')}
-        />
-      </View>
-    );
-  }
-}
-
-class ModalDialogScreen extends React.Component {
-  render() {
-    return (
-      <View
-        style={{
-          flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        }}
-      >
-        <View
-          style={{
-            backgroundColor: 'white',
-            padding: 16,
-            width: '90%',
-            maxWidth: 500,
-            minHeight: 300,
-            borderRadius: 6,
-            elevation: 6,
-            shadowColor: 'black',
-            shadowOpacity: 0.15,
-            shadowOffset: { width: 0, height: 2 },
-            shadowRadius: 10,
-          }}
-        >
-          <Text style={{ flex: 1, fontSize: 16 }}>Dialog</Text>
-          <Button
-            title="Close"
-            onPress={() => this.props.navigation.goBack()}
-          />
-        </View>
-      </View>
-    );
-  }
-}
-
-export default createStackNavigator(
-  {
-    List: ListScreen,
-    ModalDialog: ModalDialogScreen,
-  },
-  {
-    initialRouteName: 'List',
-    mode: 'modal',
-    headerMode: 'none',
-    defaultNavigationOptions: {
-      gestureEnabled: false,
-      cardTransparent: true,
-    },
-    cardStyleInterpolator: ({ progress: { current } }) => {
-      const opacity = Animated.interpolate(current, {
-        inputRange: [0, 0.5, 0.9, 1],
-        outputRange: [0, 0.25, 0.7, 1],
-      });
-
-      return {
-        cardStyle: {
-          opacity,
-        },
-      };
-    },
-  }
-);

packages/stack/example/src/TransparentStack.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+import {
+  createStackNavigator,
+  NavigationStackScreenComponent,
+} from 'react-navigation-stack';
+import Animated from 'react-native-reanimated';
+
+const ListScreen: NavigationStackScreenComponent = function(props) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+      }}
+    >
+      <Text>List Screen</Text>
+      <Text>A list may go here</Text>
+      <Button
+        title="Open Dialog"
+        onPress={() => props.navigation.navigate('ModalDialog')}
+      />
+      <Button
+        title="Go back to all examples"
+        onPress={() => props.navigation.navigate('Home')}
+      />
+    </View>
+  );
+};
+
+const ModalDialogScreen: NavigationStackScreenComponent = function(props) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: 'white',
+          padding: 16,
+          width: '90%',
+          maxWidth: 500,
+          minHeight: 300,
+          borderRadius: 6,
+          elevation: 6,
+          shadowColor: 'black',
+          shadowOpacity: 0.15,
+          shadowOffset: { width: 0, height: 2 },
+          shadowRadius: 10,
+        }}
+      >
+        <Text style={{ flex: 1, fontSize: 16 }}>Dialog</Text>
+        <Button title="Close" onPress={() => props.navigation.goBack()} />
+      </View>
+    </View>
+  );
+};
+
+export default createStackNavigator(
+  {
+    List: ListScreen,
+    ModalDialog: ModalDialogScreen,
+  },
+  {
+    initialRouteName: 'List',
+    mode: 'modal',
+    headerMode: 'none',
+    defaultNavigationOptions: {
+      gestureEnabled: false,
+      cardTransparent: true,
+      cardStyleInterpolator: ({ current: { progress } }) => {
+        const opacity = Animated.interpolate(progress, {
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        });
+
+        return {
+          cardStyle: {
+            opacity,
+          },
+        };
+      },
+    },
+  }
+);