@aws-amplify/ui-react-native 1.2.8 → 1.2.10

package/.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
   parserOptions: {
     ecmaFeatures: { jsx: true },
     ecmaVersion: 12,
-    project: ['./tsconfig.json'],
+    project: ['tsconfig.json'],
     tsconfigRootDir: __dirname,
     sourceType: 'module',
   },
@@ -36,13 +36,8 @@ module.exports = {
     {
       files: ['**/*.spec.*', '**/*.test.*'],
       parser: '@typescript-eslint/parser',
-      parserOptions: {
-        project: ['./tsconfig.json'],
-      },
       plugins: ['@typescript-eslint', 'jest'],
       rules: {
-        // Turn the original rule off for test files, turn on the jest rule
-        '@typescript-eslint/unbound-method': 'off',
         'jest/unbound-method': 'error',
         '@typescript-eslint/no-unsafe-assignment': 'off',
       },
@@ -53,19 +48,19 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 2,
     '@typescript-eslint/member-ordering': 'error',
     '@typescript-eslint/no-extra-semi': 'error',
-    '@typescript-eslint/no-floating-promises': ['off'],
+    '@typescript-eslint/no-floating-promises': 'off',
     '@typescript-eslint/no-unused-expressions': [
       'error',
       { allowTernary: true },
     ],
-    '@typescript-eslint/no-use-before-define': ['error'],
+    '@typescript-eslint/no-use-before-define': 'error',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { argsIgnorePattern: '_', varsIgnorePattern: '_' },
     ],
     '@typescript-eslint/prefer-nullish-coalescing': 'error',
-    '@typescript-eslint/restrict-template-expressions': ['off'],
-    '@typescript-eslint/unbound-method': 'error',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/unbound-method': 'off',
 
     // eslint rules either not in recommended rule set or overridden
     'comma-dangle': ['error', 'only-multiline'],
@@ -89,13 +84,13 @@ module.exports = {
     // react rules either not in recommended rule set or overridden
     'react/destructuring-assignment': ['error', 'always'],
     'react/jsx-boolean-value': 'error',
-    'react/jsx-no-constructed-context-values': ['error'],
+    'react/jsx-no-constructed-context-values': 'error',
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'react/jsx-props-no-spreading': 'off',
     'react/jsx-wrap-multilines': ['error', { declaration: 'ignore' }],
     'react/no-array-index-key': 'off',
-    'react/no-danger': ['error'],
-    'react/no-unused-prop-types': ['error'],
+    'react/no-danger': 'error',
+    'react/no-unused-prop-types': 'error',
     'react/prop-types': 'off',
     'react/static-property-placement': ['error', 'static public field'],
 

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 $ rimraf dist
-$ yarn dist && cp -a src/assets dist
+$ yarn build:dist && cp -a src/assets dist
 $ tsc --project tsconfig.dist.json

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @aws-amplify/ui-react-native
 
+## 1.2.10
+
+### Patch Changes
+
+- [#3497](https://github.com/aws-amplify/amplify-ui/pull/3497) [`5249a450d`](https://github.com/aws-amplify/amplify-ui/commit/5249a450dcd07487188fc57d5b6b04dbf52e1970) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(tsconfig): add configs directory and ts configuration
+
+- Updated dependencies [[`a55aa4584`](https://github.com/aws-amplify/amplify-ui/commit/a55aa4584dd9aba4e97d4e36acc289238710d30e), [`6501852a7`](https://github.com/aws-amplify/amplify-ui/commit/6501852a7916cc2afb90bfb52461877c1e637b99), [`50fbe91de`](https://github.com/aws-amplify/amplify-ui/commit/50fbe91defab6172c09eb03c71671a5cc5f4d265), [`5249a450d`](https://github.com/aws-amplify/amplify-ui/commit/5249a450dcd07487188fc57d5b6b04dbf52e1970)]:
+  - @aws-amplify/ui@5.5.7
+  - @aws-amplify/ui-react-core@2.1.15
+
+## 1.2.9
+
+### Patch Changes
+
+- [#3483](https://github.com/aws-amplify/amplify-ui/pull/3483) [`d7cc72c72`](https://github.com/aws-amplify/amplify-ui/commit/d7cc72c72844733d42a9504aa2ae1f2249abc178) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(ui-react-native): add TS noImplicitAny for dist build
+
+- [#3473](https://github.com/aws-amplify/amplify-ui/pull/3473) [`12d166209`](https://github.com/aws-amplify/amplify-ui/commit/12d166209b91ee94661e586a2f77e9fbf75b3d64) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(ui): remove type-fest
+
+- [#3486](https://github.com/aws-amplify/amplify-ui/pull/3486) [`eb9df76f0`](https://github.com/aws-amplify/amplify-ui/commit/eb9df76f0b46aa577965740b476b18d070ccb276) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(ui-react-native): remove extraneous optional chaining
+
+- [#3446](https://github.com/aws-amplify/amplify-ui/pull/3446) [`ef40fcc76`](https://github.com/aws-amplify/amplify-ui/commit/ef40fcc7673a1d1ed7c7a006fa34d3d5b029956f) Thanks [@calebpollman](https://github.com/calebpollman)! - refactor(ui-react-native): update default keyboardVerticalOffset handling of RNA DefaultContainer
+
+- Updated dependencies [[`3c5fef84c`](https://github.com/aws-amplify/amplify-ui/commit/3c5fef84cb6ad0cb830416e70028c0bb313dd99c), [`e08e62234`](https://github.com/aws-amplify/amplify-ui/commit/e08e6223473f56cbbc2d0ce4bab85ebd1caf020c), [`12d166209`](https://github.com/aws-amplify/amplify-ui/commit/12d166209b91ee94661e586a2f77e9fbf75b3d64), [`e283f14ca`](https://github.com/aws-amplify/amplify-ui/commit/e283f14cadf54c6f6ab7e729151ea5fe97776c6a), [`d28e31c36`](https://github.com/aws-amplify/amplify-ui/commit/d28e31c36a243d04737b6c13ce0307495680498a), [`c3116b894`](https://github.com/aws-amplify/amplify-ui/commit/c3116b89470587c127d53a5cb370b2574bde553a)]:
+  - @aws-amplify/ui@5.5.6
+  - @aws-amplify/ui-react-core@2.1.14
+
 ## 1.2.8
 
 ### Patch Changes

package/dist/Authenticator/common/DefaultContainer/DefaultContainer.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { KeyboardAvoidingView, ScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useDeviceOrientation } from '../../../hooks';
 import { useTheme } from '../../../theme';
 import { platform } from '../../../utils';
 import { getThemedStyles } from './styles';
@@ -11,16 +10,9 @@ const BEHAVIOR = platform.IS_IOS ? 'padding' : 'height';
 // prevent keyboard dismiss when press is handled by `ScrollView` children,
 // otherwise dismiss
 const KEYBOARD_SHOULD_PERSIST_TAPS = 'handled';
-// TEMPORARY: value to prevent initial `TextField` from being pushed too high
-// in default use case
-const KEYBOARD_VERTICAL_OFFSET = platform.IS_IOS ? -160 : -80;
 export default function DefaultContainer({ alwaysBounceVertical = ALWAYS_BOUNCE_VERTICAL, behavior = BEHAVIOR, children, keyboardAvoidingViewStyle, keyboardShouldPersistTaps = KEYBOARD_SHOULD_PERSIST_TAPS, keyboardVerticalOffset, scrollViewContentContainerStyle, style, ...rest }) {
     const theme = useTheme();
-    const { isPortraitMode } = useDeviceOrientation();
     const insets = useSafeAreaInsets();
-    const verticalOffset = keyboardVerticalOffset ?? isPortraitMode
-        ? KEYBOARD_VERTICAL_OFFSET
-        : undefined;
     const themedStyle = useMemo(() => {
         const { bottom, left, right, top } = insets;
         return getThemedStyles(theme, {
@@ -30,7 +22,7 @@ export default function DefaultContainer({ alwaysBounceVertical = ALWAYS_BOUNCE_
             paddingTop: top,
         });
     }, [insets, theme]);
-    return (<KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={verticalOffset} style={[themedStyle.keyboardAvoidingView, keyboardAvoidingViewStyle]}>
+    return (<KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset} style={[themedStyle.keyboardAvoidingView, keyboardAvoidingViewStyle]}>
       <ScrollView {...rest} alwaysBounceVertical={alwaysBounceVertical} keyboardShouldPersistTaps={keyboardShouldPersistTaps} contentContainerStyle={[
             themedStyle.scrollViewContentContainer,
             scrollViewContentContainerStyle,

package/dist/Authenticator/common/DefaultContainer/styles.d.ts

@@ -1,5 +1,5 @@
 import { ViewStyle } from 'react-native';
-import { StrictTheme } from 'src/theme';
+import { StrictTheme } from '../../../theme';
 import { ContainerStyles, InnerContainerStyles } from './types';
 export declare const getThemedStyles: ({ tokens: { colors } }: StrictTheme, insetPadding: Pick<ViewStyle, 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop'>) => Required<ContainerStyles>;
 export declare const getInnerContainerStyles: ({ tokens: { space }, }: StrictTheme) => InnerContainerStyles;

package/dist/Authenticator/common/DefaultFormFields/Field.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldProps } from './types';
 declare const Field: {
     ({ type, ...rest }: FieldProps): JSX.Element;

package/dist/Authenticator/common/DefaultFormFields/FieldErrors.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { FieldErrorsProps } from './types';
 export declare const FieldErrors: ({ errors, errorStyle, style, }: FieldErrorsProps) => JSX.Element | null;

package/dist/InAppMessaging/hooks/useMessageProps/useMessageProps.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '@aws-amplify/ui';
 import { useMessageImage } from '../useMessageImage';
 import { getPayloadStyle, getMessageStyles } from './utils';
 /**

package/dist/InAppMessaging/hooks/useMessageProps/utils.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { isFunction } from '@aws-amplify/ui';
 import { DEFAULT_CAROUSEL_INDICATOR_SIZE } from '../../../primitives';
 import { BUTTON_PRESSED_OPACITY, SPACING_EXTRA_LARGE } from '../../constants';
 // Carousel page indicator size + margins
@@ -31,7 +32,7 @@ export const getComponentButtonStyle = ({ styleParams, buttonType, }) => {
             const pressedOpacity = pressed ? { opacity: BUTTON_PRESSED_OPACITY } : {};
             // pass `pressed` to containerOverrideStyle and evaluate if the consumer passed a function for custom
             // button style
-            const containerOverrideFinalStyle = typeof containerOverrideStyle === 'function'
+            const containerOverrideFinalStyle = isFunction(containerOverrideStyle)
                 ? containerOverrideStyle({ pressed })
                 : containerOverrideStyle;
             return [

package/dist/hooks/useDeviceOrientation/useDeviceOrientation.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Dimensions } from 'react-native';
+import { isFunction } from '@aws-amplify/ui';
 const getDeviceOrientation = () => {
     const { height, width } = Dimensions.get('screen');
     return height >= width ? 'portrait' : 'landscape';
@@ -21,7 +22,7 @@ export default function useDeviceOrientation() {
         // which is deprecated in v0.65
         const subscription = Dimensions.addEventListener('change', handler);
         return () => {
-            if (typeof subscription?.remove === 'function') {
+            if (isFunction(subscription?.remove)) {
                 subscription.remove();
             }
             else {

package/dist/hooks/usePressableContainerStyles/usePressableContainerStyles.js

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
+import { isFunction } from '@aws-amplify/ui';
 export const usePressableContainerStyles = ({ overrideStyle, containerStyle, pressedStyle, }) => {
     return useCallback(({ pressed }) => {
-        const pressedOverrideStyle = typeof overrideStyle === 'function'
+        const pressedOverrideStyle = isFunction(overrideStyle)
             ? overrideStyle({ pressed })
             : overrideStyle;
         return [

package/dist/primitives/Carousel/Carousel.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Dimensions, FlatList, View, } from 'react-native';
+import { isFunction } from '@aws-amplify/ui';
 import CarouselPageIndicator from './CarouselPageIndicator';
 import { VIEWABILITY_CONFIG } from './constants';
 import { styles } from './styles';
@@ -39,8 +40,8 @@ export default function Carousel(props) {
         // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
         // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
         return () => {
-            if (typeof subscription?.remove === 'function') {
-                subscription?.remove();
+            if (isFunction(subscription?.remove)) {
+                subscription.remove();
             }
             else {
                 Dimensions.removeEventListener('change', orientationHandler);

package/dist/theme/createTheme.js

@@ -1,27 +1,21 @@
 import deepExtend from 'style-dictionary/lib/utils/deepExtend';
 import resolveObject from 'style-dictionary/lib/utils/resolveObject';
 import usesReference from 'style-dictionary/lib/utils/references/usesReference';
-import { setupTokens } from '@aws-amplify/ui';
+import { isFunction, setupTokens } from '@aws-amplify/ui';
 import { defaultTheme } from './defaultTheme';
 // This will resolve all references in component themes by either
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
-const setupComponents = (theme) => {
-    const output = {};
-    if (theme.components) {
-        const { components } = theme;
-        for (const [key, value] of Object.entries(components)) {
-            if (typeof value === 'function') {
-                output[key] = value(theme.tokens);
-            }
-            else {
-                output[key] = value;
-            }
-        }
-    }
+const setupComponents = ({ components, tokens }) => {
+    const output = components
+        ? Object.entries(components).reduce((acc, [key, value]) => ({
+            ...acc,
+            [key]: isFunction(value) ? value(tokens) : value,
+        }), {})
+        : {};
     return resolveObject({
-        ...theme.tokens,
+        ...tokens,
         components: output,
     }).components;
 };
@@ -99,7 +93,10 @@ export const createTheme = (theme, colorMode) => {
     let { components } = mergedTheme;
     // Resolve component token references too
     if (mergedTheme.components) {
-        components = setupComponents({ ...mergedTheme, tokens });
+        components = setupComponents({
+            ...mergedTheme,
+            tokens,
+        });
     }
     return { ...mergedTheme, tokens, components };
 };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.8";
+export declare const VERSION = "1.2.10";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.8';
+export const VERSION = '1.2.10';

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn dist && cp -a src/assets dist",
+    "build": "yarn build:dist && cp -a src/assets dist",
+    "build:dist": "tsc --project tsconfig.dist.json",
     "clean": "rimraf dist",
-    "dev": "yarn dist --watch",
-    "dist": "tsc --project tsconfig.dist.json",
-    "lint": "tsc --noEmit && eslint src",
+    "dev": "yarn build:dist --watch",
+    "lint": "yarn typecheck && eslint src",
     "prebuild": "rimraf dist",
-    "test": "jest --coverage --verbose",
-    "test:watch": "yarn test --watch"
+    "test": "yarn test:unit",
+    "test:unit": "jest",
+    "test:unit:watch": "yarn test:unit --watch",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -39,12 +41,11 @@
     "react-native": "^0.68.1",
     "react-native-safe-area-context": "^4.2.5",
     "react-test-renderer": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "type-fest": "^2.3.4"
+    "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.5.5",
-    "@aws-amplify/ui-react-core": "2.1.13"
+    "@aws-amplify/ui": "5.5.7",
+    "@aws-amplify/ui-react-core": "2.1.15"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { KeyboardAvoidingView, ScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useDeviceOrientation } from '../../../hooks';
 import { useTheme } from '../../../theme';
 import { platform } from '../../../utils';
 
@@ -17,10 +16,6 @@ const BEHAVIOR = platform.IS_IOS ? 'padding' : 'height';
 // otherwise dismiss
 const KEYBOARD_SHOULD_PERSIST_TAPS = 'handled';
 
-// TEMPORARY: value to prevent initial `TextField` from being pushed too high
-// in default use case
-const KEYBOARD_VERTICAL_OFFSET = platform.IS_IOS ? -160 : -80;
-
 export default function DefaultContainer({
   alwaysBounceVertical = ALWAYS_BOUNCE_VERTICAL,
   behavior = BEHAVIOR,
@@ -33,14 +28,8 @@ export default function DefaultContainer({
   ...rest
 }: ContainerProps): JSX.Element | null {
   const theme = useTheme();
-  const { isPortraitMode } = useDeviceOrientation();
   const insets = useSafeAreaInsets();
 
-  const verticalOffset =
-    keyboardVerticalOffset ?? isPortraitMode
-      ? KEYBOARD_VERTICAL_OFFSET
-      : undefined;
-
   const themedStyle = useMemo(() => {
     const { bottom, left, right, top } = insets;
     return getThemedStyles(theme, {
@@ -54,7 +43,7 @@ export default function DefaultContainer({
   return (
     <KeyboardAvoidingView
       behavior={behavior}
-      keyboardVerticalOffset={verticalOffset}
+      keyboardVerticalOffset={keyboardVerticalOffset}
       style={[themedStyle.keyboardAvoidingView, keyboardAvoidingViewStyle]}
     >
       <ScrollView

package/src/Authenticator/common/DefaultContainer/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet, ViewStyle } from 'react-native';
-import { StrictTheme } from 'src/theme';
+import { StrictTheme } from '../../../theme';
 
 import { ContainerStyles, InnerContainerStyles } from './types';
 

package/src/Authenticator/hooks/useFieldValues/__tests__/useFieldValues.spec.ts

@@ -27,7 +27,7 @@ const radioField = {
   onChange: jest.fn,
 } as RadioFieldOptions;
 
-const mockfields = [];
+const mockfields = [] as TypedField[];
 const props: UseFieldValuesParams<TypedField> = {
   componentName: 'SignIn',
   fields: mockfields,

package/src/InAppMessaging/components/InAppMessageDisplay/__tests__/InAppMessageDisplay.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { render } from '@testing-library/react-native';
-import { useMessage } from '@aws-amplify/ui-react-core';
+import { MessageLayout, useMessage } from '@aws-amplify/ui-react-core';
 
 import InAppMessageDisplay from '../InAppMessageDisplay';
 
@@ -15,7 +15,7 @@ describe('InAppMessageDisplay', () => {
   });
 
   it('renders the expected component in the happy path', () => {
-    const Component = ({ layout }) => (
+    const Component = ({ layout }: { layout: MessageLayout }) => (
       <View>
         <Text>{layout}</Text>
       </View>

package/src/InAppMessaging/hooks/useMessageImage/__tests__/useMessageImage.spec.ts

@@ -60,7 +60,7 @@ describe('useMessageImage', () => {
 
     (prefetchNetworkImage as jest.Mock).mockResolvedValue('loaded');
     (Image.getSize as jest.Mock).mockImplementationOnce(
-      (_, __, onError: (error) => void) => {
+      (_, __, onError: (error: string) => void) => {
         onError(error);
       }
     );

package/src/InAppMessaging/hooks/useMessageProps/__tests__/utils.spec.ts

@@ -139,7 +139,8 @@ describe('getComponentButtonStyle', () => {
       const unpressedStyle = { backgroundColor: 'fuschia' };
       const overrideStyle = {
         primaryButton: {
-          container: ({ pressed }) => (pressed ? pressedStyle : unpressedStyle),
+          container: ({ pressed }: { pressed: boolean }) =>
+            pressed ? pressedStyle : unpressedStyle,
         },
       };
       const styleParams = {

package/src/InAppMessaging/hooks/useMessageProps/useMessageProps.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '@aws-amplify/ui';
 import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
 
 import { useMessageImage } from '../useMessageImage';

package/src/InAppMessaging/hooks/useMessageProps/utils.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { isFunction } from '@aws-amplify/ui';
 import {
   MessageComponentBaseProps,
   MessageLayout,
@@ -64,10 +65,9 @@ export const getComponentButtonStyle = ({
 
       // pass `pressed` to containerOverrideStyle and evaluate if the consumer passed a function for custom
       // button style
-      const containerOverrideFinalStyle =
-        typeof containerOverrideStyle === 'function'
-          ? containerOverrideStyle({ pressed })
-          : containerOverrideStyle;
+      const containerOverrideFinalStyle = isFunction(containerOverrideStyle)
+        ? containerOverrideStyle({ pressed })
+        : containerOverrideStyle;
 
       return [
         pressedOpacity,

package/src/__mocks__/@react-native-community/netinfo.ts

@@ -1,2 +1,3 @@
 // mock RN NetInfo module to prevent errors from Amplify JS usage of the module
+// @ts-ignore - ignoring as this is a JS mock
 export { default } from '@react-native-community/netinfo/jest/netinfo-mock.js';

package/src/hooks/useDeviceOrientation/__tests__/useDeviceOrientation.spec.ts

@@ -1,6 +1,8 @@
-import { Dimensions, EventSubscription, ScaledSize } from 'react-native';
+import { Dimensions, EventSubscription } from 'react-native';
 import { renderHook } from '@testing-library/react-hooks';
-import useDeviceOrientation from '../useDeviceOrientation';
+import useDeviceOrientation, {
+  DeviceOrientation,
+} from '../useDeviceOrientation';
 
 const dimensions = {
   landscape: { height: 100, width: 300 },
@@ -74,7 +76,7 @@ describe('useDeviceOrientation', () => {
     'returns the expected values when the device is in %s mode',
     (deviceOrientation, isLandscapeMode, isPortraitMode) => {
       getSpy.mockImplementation(
-        (_: string) => dimensions[deviceOrientation] as ScaledSize
+        (_: string) => dimensions[deviceOrientation as DeviceOrientation]
       );
 
       const { result } = renderHook(() => useDeviceOrientation());

package/src/hooks/useDeviceOrientation/useDeviceOrientation.ts

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Dimensions, EventSubscription } from 'react-native';
 
+import { isFunction } from '@aws-amplify/ui';
+
 export type DeviceOrientation = 'portrait' | 'landscape';
 const getDeviceOrientation = (): DeviceOrientation => {
   const { height, width } = Dimensions.get('screen');
@@ -35,7 +37,7 @@ export default function useDeviceOrientation(): {
     ) as unknown as EventSubscription;
 
     return () => {
-      if (typeof subscription?.remove === 'function') {
+      if (isFunction(subscription?.remove)) {
         subscription.remove();
       } else {
         Dimensions.removeEventListener('change', handler);

package/src/hooks/usePressableContainerStyles/usePressableContainerStyles.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { isFunction } from '@aws-amplify/ui';
 import {
   PressableProps,
   PressableStateCallbackType,
@@ -35,10 +36,9 @@ export const usePressableContainerStyles = ({
 }: PressableStateCallbackType) => StyleProp<ViewStyle>) => {
   return useCallback(
     ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
-      const pressedOverrideStyle =
-        typeof overrideStyle === 'function'
-          ? overrideStyle({ pressed })
-          : overrideStyle;
+      const pressedOverrideStyle = isFunction(overrideStyle)
+        ? overrideStyle({ pressed })
+        : overrideStyle;
       return [
         containerStyle,
         pressed ? pressedStyle : undefined,

package/src/primitives/Carousel/Carousel.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Dimensions,
-  EventSubscription,
   FlatList,
   ListRenderItemInfo,
   ScaledSize,
   View,
   ViewToken,
 } from 'react-native';
+import { isFunction } from '@aws-amplify/ui';
 
 import CarouselPageIndicator from './CarouselPageIndicator';
 import { VIEWABILITY_CONFIG } from './constants';
@@ -63,13 +63,13 @@ export default function Carousel<T>(
     const subscription = Dimensions.addEventListener(
       'change',
       orientationHandler
-    ) as unknown as EventSubscription;
+    );
 
     // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
     // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
     return () => {
-      if (typeof subscription?.remove === 'function') {
-        subscription?.remove();
+      if (isFunction(subscription?.remove)) {
+        subscription.remove();
       } else {
         Dimensions.removeEventListener('change', orientationHandler);
       }

package/src/primitives/Checkbox/__tests__/Checkbox.spec.tsx

@@ -6,7 +6,6 @@ import Checkbox from '../Checkbox';
 import { useTheme } from '../../../theme';
 import { getThemedStyles } from '../styles';
 import { icons } from '../../../assets';
-import { IconStyles } from '../../Icon/types';
 
 const onChange = jest.fn();
 const testID = 'checkboxTestID';
@@ -106,9 +105,7 @@ describe('Checkbox', () => {
       undefined,
     ]);
 
-    const iconStyle = (
-      getByRole('image').props.style as IconStyles
-    )[0] as ImageStyle;
+    const iconStyle = (getByRole('image').props.style as ImageStyle[])[0];
     expect(iconStyle.height).toBe(customSize);
     expect(iconStyle.width).toBe(customSize);
   });
@@ -121,9 +118,7 @@ describe('Checkbox', () => {
 
     expect(toJSON()).toMatchSnapshot();
 
-    const checkboxStyle = (
-      getByTestId(testID).props.style as IconStyles
-    )[0] as ViewStyle;
+    const checkboxStyle = (getByTestId(testID).props.style as ViewStyle[])[0];
     expect(checkboxStyle.flexDirection).toBe('column');
   });
 

package/src/theme/createTheme.ts

@@ -1,28 +1,27 @@
 import deepExtend from 'style-dictionary/lib/utils/deepExtend';
 import resolveObject from 'style-dictionary/lib/utils/resolveObject';
 import usesReference from 'style-dictionary/lib/utils/references/usesReference';
-import { setupTokens } from '@aws-amplify/ui';
-import { Theme, StrictTheme, ColorMode } from './types';
+import { isFunction, setupTokens } from '@aws-amplify/ui';
+import { Theme, StrictTheme, ColorMode, Components } from './types';
 import { defaultTheme } from './defaultTheme';
 
 // This will resolve all references in component themes by either
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
-const setupComponents = (theme: StrictTheme) => {
-  const output = {};
-  if (theme.components) {
-    const { components } = theme;
-    for (const [key, value] of Object.entries(components)) {
-      if (typeof value === 'function') {
-        output[key] = value(theme.tokens) as object;
-      } else {
-        output[key] = value;
-      }
-    }
-  }
+const setupComponents = ({ components, tokens }: StrictTheme) => {
+  const output = components
+    ? Object.entries(components).reduce(
+        (acc, [key, value]) => ({
+          ...acc,
+          [key]: isFunction(value) ? (value(tokens) as typeof value) : value,
+        }),
+        {} as Components<'components'>
+      )
+    : {};
+
   return resolveObject({
-    ...theme.tokens,
+    ...tokens,
     components: output,
   }).components;
 };
@@ -123,7 +122,10 @@ export const createTheme = (
 
   // Resolve component token references too
   if (mergedTheme.components) {
-    components = setupComponents({ ...mergedTheme, tokens });
+    components = setupComponents({
+      ...mergedTheme,
+      tokens,
+    }) as Components<'output'>;
   }
 
   return { ...mergedTheme, tokens, components };

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.8';
+export const VERSION = '1.2.10';

package/tsconfig.dist.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "**/__tests__/**.*"]
+  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
 }

package/tsconfig.json

@@ -1,20 +1,8 @@
 {
+  "extends": "../configs/ts/tsconfig.react-native.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "declaration": true,
-    "downlevelIteration": true,
-    "esModuleInterop": true,
-    "jsx": "react-native",
-    "noImplicitAny": false,
-    "module": "es2015",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
     "outDir": "./dist",
-    "rootDir": "src",
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "esnext"
+    "rootDir": "src"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]

package/dist/__mocks__/@react-native-async-storage/async-storage.d.ts

@@ -1 +0,0 @@
-export { default } from '@react-native-async-storage/async-storage/jest/async-storage-mock';

package/dist/__mocks__/@react-native-async-storage/async-storage.js

@@ -1,2 +0,0 @@
-// mock RN AsyncStorage module to prevent errors from Amplify JS usage of the module
-export { default } from '@react-native-async-storage/async-storage/jest/async-storage-mock';

package/dist/__mocks__/@react-native-community/netinfo.d.ts

@@ -1 +0,0 @@
-export { default } from '@react-native-community/netinfo/jest/netinfo-mock.js';

package/dist/__mocks__/@react-native-community/netinfo.js

@@ -1,2 +0,0 @@
-// mock RN NetInfo module to prevent errors from Amplify JS usage of the module
-export { default } from '@react-native-community/netinfo/jest/netinfo-mock.js';

package/dist/__mocks__/react-native-safe-area-context.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="jest" />
-declare const SafeAreaProvider = "SafeAreaProvider";
-declare const SafeAreaView = "SafeAreaView";
-declare const useSafeAreaInsets: jest.Mock<{
-    bottom: number;
-    top: number;
-}, []>;
-export { SafeAreaProvider, SafeAreaView, useSafeAreaInsets };

package/dist/__mocks__/react-native-safe-area-context.js

@@ -1,6 +0,0 @@
-jest.mock('react-native-safe-area-context');
-const SafeAreaProvider = 'SafeAreaProvider';
-const SafeAreaView = 'SafeAreaView';
-// return somewhat arbitrary values, safe area insets of iPhone 13
-const useSafeAreaInsets = jest.fn(() => ({ bottom: 44, top: 47 }));
-export { SafeAreaProvider, SafeAreaView, useSafeAreaInsets };