feat: new way to use typescript via generics

Author: bezenson

example/global.d.ts

@@ -1,10 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import type { AppTheme } from 'react-native-unicorn-modals';
 import { createModalProvider, Alert, Menu, defaultThemeDark, defaultThemeLight } from 'react-native-unicorn-modals';
 
 import CustomModal from './components/CustomModal';
 import Example from './components/Example';
 
+import type { AppTheme } from './types';
+
 const lightTheme: AppTheme = {
   ...defaultThemeLight,
   buttonColor: '#284387',

example/src/App.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Button, Text, View } from 'react-native';
-import type { CustomModalData, RenderableComponent } from 'react-native-unicorn-modals';
-import { useTheme } from 'react-native-unicorn-modals';
+import type { RenderableComponent } from 'react-native-unicorn-modals';
 
 import styles from './CustomModal.styles';
+import type { CustomModalData } from '../types';
+import useAppTheme from '../hooks/useAppTheme';
 
 const CustomModal: RenderableComponent<CustomModalData> = ({ WrapperComponent }) => {
-  const theme = useTheme();
+  const theme = useAppTheme();
   return (
     <WrapperComponent style={styles.wrapper}>
       {({ title }, actionCallback) => (

example/src/components/CustomModal.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar, Text, TouchableOpacity, View } from 'react-native';
-import { useModals } from 'react-native-unicorn-modals';
 
 import Tile from './Tile';
 import styles from './Example.styles';
+import useAppModals from '../hooks/useAppModals';
 
 interface ExampleProps {
   darkMode: boolean;
   switchTheme: () => void;
 }
 const Example: React.FC<ExampleProps> = ({ darkMode, switchTheme }) => {
-  const modal = useModals();
+  const modal = useAppModals();
 
   function createModalHandler(cancelable: boolean = true) {
     return () => {

example/src/components/Example.tsx

@@ -0,0 +1,10 @@
+import { useModals } from 'react-native-unicorn-modals';
+
+import type { RegisteredComponents } from '../types';
+
+/**
+ * Typed wrapper around `useModals`.
+ */
+export default function useAppModals() {
+  return useModals<RegisteredComponents>();
+}

example/src/hooks/useAppModals.ts

@@ -0,0 +1,10 @@
+import { useTheme } from 'react-native-unicorn-modals';
+
+import type { AppTheme } from '../types';
+
+/**
+ * Typed wrapper around `useTheme`.
+ */
+export default function useAppTheme() {
+  return useTheme<AppTheme>();
+}

example/src/hooks/useAppTheme.ts

@@ -0,0 +1,18 @@
+import type { AlertData, MenuData, Theme } from 'react-native-unicorn-modals';
+
+// Components
+export interface CustomModalData {
+  title: string;
+}
+
+export interface RegisteredComponents {
+  alert: AlertData;
+  custom: CustomModalData;
+  menu: MenuData;
+}
+
+// Theme
+interface AdditionalThemeProps {
+  buttonColor: string;
+}
+export type AppTheme = Theme<AdditionalThemeProps>;

example/src/types.ts

@@ -5,12 +5,12 @@ import WrapperComponent from './WrapperComponent';
 
 import { hideAnimationStart } from '../state/action-creators';
 
-import type { Dispatch, ReducerState } from '../types';
+import type { ComponentName, Dispatch, ReducerState } from '../types';
 
 interface RendererProps {
-  // TODO: Remove any
+  // TODO: Fix any
   components: {
-    [k: string]: any;
+    [k: ComponentName]: React.FC<{ WrapperComponent: React.FC<any> }>;
   };
   dispatch: Dispatch;
   state: ReducerState;

src/components/Renderer.tsx

@@ -8,13 +8,10 @@ import { useAlertAnimatedStyle } from '../hooks/useAlertAnimatedStyle';
 import { useModalsContext } from '../hooks/useModalsContext';
 import { hideAnimationFinished, hideAnimationStart } from '../state/action-creators';
 import AvoidDismiss from './AvoidDismiss';
-import type { ComponentName, CreateActionCallback, RegisteredComponents } from '../types';
+import type { CreateActionCallback } from '../types';
 
 export interface WrapperComponentProps<E extends unknown = unknown> {
-  children: (
-    data: RegisteredComponents[ComponentName] | any,
-    createActionCallback: CreateActionCallback<E>,
-  ) => ReactNode;
+  children: (data: unknown, createActionCallback: CreateActionCallback<E>) => ReactNode;
   style?: ViewStyle;
 }
 

src/components/WrapperComponent.tsx

@@ -2,15 +2,13 @@ import { useCallback } from 'react';
 
 import { showModal } from '../state/action-creators';
 import { useModalsContext } from './useModalsContext';
-import type { ComponentName, RegisteredComponents, ShowRenderItemOptions, UseModalsReturn } from '../types';
+import type { UseModalsReturn, UseModalsShow } from '../types';
 
-export function useModals(): UseModalsReturn {
+export function useModals<RC extends Object>(): UseModalsReturn<RC> {
   const { dispatch } = useModalsContext();
 
-  const show = useCallback(
-    <K extends ComponentName>(type: K, data: RegisteredComponents[K], options?: ShowRenderItemOptions) => {
-      dispatch(showModal(type, data, options));
-    },
+  const show = useCallback<UseModalsShow<RC>>(
+    (type, data, options) => dispatch(showModal(type, data, options)),
     [dispatch],
   );