From ff64d027e2d52f13ef7ad8def44feabfe5294da5 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Tue, 30 Dec 2025 16:54:40 +0200 Subject: [PATCH 1/3] npx codemod@latest react/19/migration-recipe --- .../src/commons/forwardRef.tsx | 2 - .../src/commons/withScrollEnabler.tsx | 2 - .../src/commons/withScrollReached.tsx | 2 - .../src/components/baseInput/index.tsx | 47 ------------------- 4 files changed, 53 deletions(-) diff --git a/packages/react-native-ui-lib/src/commons/forwardRef.tsx b/packages/react-native-ui-lib/src/commons/forwardRef.tsx index f300e1a712..38b08d8bfa 100644 --- a/packages/react-native-ui-lib/src/commons/forwardRef.tsx +++ b/packages/react-native-ui-lib/src/commons/forwardRef.tsx @@ -20,8 +20,6 @@ export default function forwardRef(WrappedC //@ts-ignore ForwardedComponent.displayName = WrappedComponent.displayName; //@ts-ignore - ForwardedComponent.propTypes = WrappedComponent.propTypes; - //@ts-ignore ForwardedComponent.defaultProps = WrappedComponent.defaultProps; return ForwardedComponent as typeof ForwardedComponent & STATICS; diff --git a/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx b/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx index 251f6adbb9..2bdc77ebdc 100644 --- a/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx +++ b/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx @@ -70,8 +70,6 @@ function withScrollEnabler(WrappedComponent: React.Componen hoistStatics(ScrollEnabler, WrappedComponent); ScrollEnabler.displayName = WrappedComponent.displayName; //@ts-ignore - ScrollEnabler.propTypes = WrappedComponent.propTypes; - //@ts-ignore ScrollEnabler.defaultProps = WrappedComponent.defaultProps; return forwardRef(ScrollEnabler) as any; } diff --git a/packages/react-native-ui-lib/src/commons/withScrollReached.tsx b/packages/react-native-ui-lib/src/commons/withScrollReached.tsx index 393e67d638..ea1da67579 100644 --- a/packages/react-native-ui-lib/src/commons/withScrollReached.tsx +++ b/packages/react-native-ui-lib/src/commons/withScrollReached.tsx @@ -93,8 +93,6 @@ function withScrollReached(WrappedComponent: React.Componen hoistStatics(ScrollReachedDetector, WrappedComponent); ScrollReachedDetector.displayName = WrappedComponent.displayName; //@ts-ignore - ScrollReachedDetector.propTypes = WrappedComponent.propTypes; - //@ts-ignore ScrollReachedDetector.defaultProps = WrappedComponent.defaultProps; return forwardRef(ScrollReachedDetector) as any; } diff --git a/packages/react-native-ui-lib/src/components/baseInput/index.tsx b/packages/react-native-ui-lib/src/components/baseInput/index.tsx index 166a1e0bbe..7c99815bb2 100644 --- a/packages/react-native-ui-lib/src/components/baseInput/index.tsx +++ b/packages/react-native-ui-lib/src/components/baseInput/index.tsx @@ -1,8 +1,6 @@ // @ts-nocheck import _ from 'lodash'; -import PropTypes from 'prop-types'; import 'react'; -import {ViewPropTypes, TextInputPropTypes} from 'deprecated-react-native-prop-types'; import {Colors, Typography} from '../../style'; import {BaseComponent} from '../../commons'; import Validators from './Validators'; @@ -18,51 +16,6 @@ const VALIDATORS = { export default class BaseInput extends BaseComponent { static displayName = 'BaseInput'; - static propTypes = { - ...TextInputPropTypes, - // ...BaseComponent.propTypes, - /** - * text color - */ - color: PropTypes.string, - /** - * text input container style - */ - containerStyle: ViewPropTypes.style, - /** - * validator type or custom validator function - */ - validate: PropTypes.oneOfType([ - PropTypes.oneOf(_.values(VALIDATORS)), // enum - PropTypes.func, // custom - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(_.values(VALIDATORS)), PropTypes.func])) // array of validators - ]), - /** - * Whether to mark required field with an asterisk - */ - markRequired: PropTypes.bool, - /** - * the message to be displayed when the validation fails - */ - errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), - /** - * whether to run the validation on mount - */ - validateOnStart: PropTypes.bool, - /** - * whether to run the validation on text changed - */ - validateOnChange: PropTypes.bool, - /** - * whether to run the validation on blur - */ - validateOnBlur: PropTypes.bool, - /** - * callback for validity change - */ - onChangeValidity: PropTypes.func - }; - static defaultProps = { validateOnBlur: true }; From 7bead8f1205ce5c460aad2bfcc0ccc640a47b6a2 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Wed, 31 Dec 2025 09:52:50 +0200 Subject: [PATCH 2/3] npx types-react-codemod@latest preset-19 . --- .../screens/componentScreens/ChipScreen.tsx | 2 +- .../FeatureHighlightScreen.tsx | 6 +++++- .../componentScreens/NumberInputScreen.tsx | 2 +- .../componentScreens/OverlaysScreen.tsx | 2 +- .../componentScreens/SearchInputScreen.tsx | 2 +- .../componentScreens/TimelineScreen.tsx | 2 +- docuilib/src/components/HomepageFeatures.tsx | 2 +- docuilib/src/pages/index.tsx | 2 +- docuilib/src/theme/DocCard/index.tsx | 2 +- .../HighlighterOverlayView/index.tsx | 2 +- .../HighlighterOverlayView/index.web.tsx | 2 +- .../CustomKeyboardViewBase.tsx | 2 +- .../Keyboard/KeyboardAccessoryView/index.tsx | 8 +++++--- .../KeyboardTrackingView.ios.tsx | 9 ++++++++- .../Keyboard/KeyboardTrackingView/index.tsx | 2 +- .../jestSetup/GestureDetectorMock.tsx | 2 +- .../src/components/WheelPicker/index.tsx | 4 ++-- .../src/components/WheelPicker/usePresenter.ts | 2 +- .../src/components/actionSheet/index.tsx | 2 +- .../src/components/animatedImage/index.tsx | 2 +- .../src/components/avatar/index.tsx | 2 +- .../src/components/badge/index.tsx | 2 +- .../src/components/button/types.ts | 3 ++- .../src/components/carousel/index.tsx | 4 ++-- .../src/components/chip/index.tsx | 2 +- .../src/components/colorPalette/index.tsx | 2 +- .../src/components/dateTimePicker/index.tsx | 6 +++--- .../dialog/__tests__/index.new.spec.tsx | 2 +- .../src/components/dialog/types.ts | 8 ++++---- .../src/components/drawer/index.tsx | 2 +- .../src/components/expandableSection/index.tsx | 2 +- .../src/components/fadedScrollView/index.tsx | 2 +- .../src/components/featureHighlight/index.tsx | 4 +++- .../src/components/gridListItem/index.tsx | 14 +++++++------- .../src/components/gridView/index.tsx | 2 +- .../src/components/hint/HintBubble.tsx | 2 +- .../src/components/hint/HintOld.tsx | 4 ++-- .../src/components/hint/types.ts | 4 ++-- .../src/components/image/index.tsx | 2 +- .../src/components/loaderScreen/types.ts | 2 +- .../src/components/maskedInput/new.tsx | 7 ++++--- .../src/components/modal/index.tsx | 2 +- .../src/components/numberInput/index.tsx | 2 +- .../src/components/overlay/index.tsx | 2 +- .../helpers/useImperativePickerHandle.ts | 2 +- .../src/components/picker/index.tsx | 2 +- .../src/components/picker/types.ts | 18 +++++++++--------- .../src/components/progressBar/index.tsx | 2 +- .../src/components/searchInput/index.tsx | 2 +- .../src/components/searchInput/types.ts | 4 ++-- .../src/components/skeletonView/index.tsx | 2 +- .../src/components/slider/Thumb.tsx | 2 +- .../src/components/slider/index.tsx | 4 ++-- .../src/components/slider/types.ts | 2 +- .../src/components/stackAggregator/index.tsx | 2 +- .../components/tabController/TabBarItem.tsx | 6 +++--- .../src/components/tabController/TabPage.tsx | 2 +- .../tabController/useScrollToItem.ts | 2 +- .../src/components/textField/types.ts | 8 ++++---- .../textField/useImperativeInputHandle.ts | 2 +- .../src/components/timeline/index.tsx | 2 +- .../src/hooks/useCombinedRefs/index.ts | 2 +- .../src/hooks/useDebounce/index.ts | 2 +- .../src/hooks/useHiddenLocation/index.ts | 4 ++-- .../src/hooks/useHiddenLocation/index.web.ts | 4 ++-- .../src/hooks/useMeasure/index.ts | 2 +- .../src/hooks/useScrollTo/index.ts | 4 ++-- .../src/incubator/calendar/index.tsx | 2 +- .../src/incubator/calendar/types.ts | 4 ++-- .../src/incubator/expandableOverlay/index.tsx | 4 ++-- .../src/incubator/slider/Track.tsx | 2 +- .../src/incubator/slider/index.tsx | 2 +- .../incubator/toast/helpers/useToastTimer.ts | 2 +- .../src/incubator/toast/index.tsx | 2 +- .../src/incubator/toast/types.ts | 4 ++-- .../src/testkit/Component.driver.ts | 1 + .../testkit/drivers/TestingLibraryDriver.tsx | 1 + webDemo/src/examples/Carousel.tsx | 2 +- webDemo/src/examples/Timeline.tsx | 2 +- 79 files changed, 136 insertions(+), 117 deletions(-) diff --git a/demo/src/screens/componentScreens/ChipScreen.tsx b/demo/src/screens/componentScreens/ChipScreen.tsx index d417c99e5c..e191755c5f 100644 --- a/demo/src/screens/componentScreens/ChipScreen.tsx +++ b/demo/src/screens/componentScreens/ChipScreen.tsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {Alert} from 'react-native'; import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib'; diff --git a/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx b/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx index e7cfbebec7..31642d7681 100644 --- a/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx +++ b/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx @@ -165,7 +165,11 @@ class FeatureHighlightScreen extends Component<{}, State> { - (this.viewRef = r)}> + { + this.viewRef = r; + }} + > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type diff --git a/demo/src/screens/componentScreens/NumberInputScreen.tsx b/demo/src/screens/componentScreens/NumberInputScreen.tsx index f7976ac30b..d172b3340d 100644 --- a/demo/src/screens/componentScreens/NumberInputScreen.tsx +++ b/demo/src/screens/componentScreens/NumberInputScreen.tsx @@ -28,7 +28,7 @@ const DISCOUNT_PERCENTAGE = {min: 1, max: 80}; const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`; const NumberInputScreen = () => { - const currentData = useRef(); + const currentData = useRef(undefined); const [text, setText] = useState(''); const [showLabel, setShowLabel] = useState(true); const [exampleType, setExampleType] = useState('price'); diff --git a/demo/src/screens/componentScreens/OverlaysScreen.tsx b/demo/src/screens/componentScreens/OverlaysScreen.tsx index cb456083e1..d1947b4ab3 100644 --- a/demo/src/screens/componentScreens/OverlaysScreen.tsx +++ b/demo/src/screens/componentScreens/OverlaysScreen.tsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {StyleSheet, ScrollView} from 'react-native'; import {View, Text, Image, Card, Constants, Colors} from 'react-native-ui-lib'; // eslint-disable-line diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx index cdb07fce19..1a8b4cddf6 100644 --- a/demo/src/screens/componentScreens/SearchInputScreen.tsx +++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx @@ -6,7 +6,7 @@ const SearchInputScreen = () => { const [showCancelBtn, setShowCancelBtn] = useState(false); const [showLoader, setShowLoader] = useState(false); const [showCustomRightElement, setShowCustomRightElement] = useState(false); - const searchInput = useRef(); + const searchInput = useRef(undefined); const onChangeText = (text: string) => { console.log('UILIB text: ', text); diff --git a/demo/src/screens/componentScreens/TimelineScreen.tsx b/demo/src/screens/componentScreens/TimelineScreen.tsx index 97db0bb232..4b16198d04 100644 --- a/demo/src/screens/componentScreens/TimelineScreen.tsx +++ b/demo/src/screens/componentScreens/TimelineScreen.tsx @@ -15,7 +15,7 @@ const contents = [ const TimelineScreen = () => { const [anchorIndex, setAnchorIndex] = useState(0); const [expand, setExpand] = useState(false); - const anchor = useRef(); + const anchor = useRef(undefined); const onPress = useCallback(() => { setAnchorIndex(anchorIndex === 0 ? 1 : 0); diff --git a/docuilib/src/components/HomepageFeatures.tsx b/docuilib/src/components/HomepageFeatures.tsx index 3897078da1..eb09e991b0 100644 --- a/docuilib/src/components/HomepageFeatures.tsx +++ b/docuilib/src/components/HomepageFeatures.tsx @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type JSX} from 'react'; import clsx from 'clsx'; import styles from './HomepageFeatures.module.css'; diff --git a/docuilib/src/pages/index.tsx b/docuilib/src/pages/index.tsx index 6ab0cc3e14..949c8c4b97 100644 --- a/docuilib/src/pages/index.tsx +++ b/docuilib/src/pages/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import Layout from '@theme/Layout'; import BrowserOnly from '@docusaurus/BrowserOnly'; // import clsx from 'clsx'; diff --git a/docuilib/src/theme/DocCard/index.tsx b/docuilib/src/theme/DocCard/index.tsx index 18ed8956fe..20d3c2cb57 100644 --- a/docuilib/src/theme/DocCard/index.tsx +++ b/docuilib/src/theme/DocCard/index.tsx @@ -1,4 +1,4 @@ -import React, {type ReactNode} from 'react'; +import React, {type ReactNode, type JSX} from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import {findFirstSidebarItemLink} from '@docusaurus/plugin-content-docs/client'; diff --git a/lib/components/HighlighterOverlayView/index.tsx b/lib/components/HighlighterOverlayView/index.tsx index b656fd9be4..9df1414c35 100644 --- a/lib/components/HighlighterOverlayView/index.tsx +++ b/lib/components/HighlighterOverlayView/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import {processColor, StyleSheet, Modal, ViewStyle} from 'react-native'; // Import the Codegen specification for New Architecture import HighlighterViewNativeComponent, { diff --git a/lib/components/HighlighterOverlayView/index.web.tsx b/lib/components/HighlighterOverlayView/index.web.tsx index fbcdffb2a4..dcfb190076 100644 --- a/lib/components/HighlighterOverlayView/index.web.tsx +++ b/lib/components/HighlighterOverlayView/index.web.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import {Modal, ViewStyle} from 'react-native'; type HighlightFrameType = { diff --git a/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx index 0622ac48e3..cf25056a68 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx +++ b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx @@ -11,7 +11,7 @@ export type CustomKeyboardViewBaseProps = { component?: string; onItemSelected?: (component?: string, args?: any) => void; onRequestShowKeyboard?: (keyboardId: string) => void; - children?: React.ReactChild | React.ReactChild[]; + children?: React.ReactNode; }; export default class CustomKeyboardViewBase extends Component { diff --git a/lib/components/Keyboard/KeyboardAccessoryView/index.tsx b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx index c65d796f2b..30f48b4404 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/index.tsx +++ b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx @@ -22,7 +22,7 @@ export type KeyboardAccessoryViewProps = kbTrackingViewProps & { /** * Content to be rendered above the keyboard */ - renderContent?: () => React.ReactElement; + renderContent?: () => React.ReactElement; /** * iOS only. * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.). @@ -53,7 +53,7 @@ export type KeyboardAccessoryViewProps = kbTrackingViewProps & { * Callback that will be called once the keyboard has been closed */ onKeyboardResigned?: () => void; - children?: React.ReactChild; + children?: React.ReactNode; }; /** @@ -204,7 +204,9 @@ class KeyboardAccessoryView extends Component { (this.trackingViewRef = r)} + ref={(r: any) => { + (this.trackingViewRef = r); + }} style={styles.trackingToolbarContainer} onLayout={this.onContainerComponentHeightChanged} > diff --git a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx index e58c520505..f6fe839fc4 100644 --- a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx +++ b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx @@ -24,7 +24,14 @@ class KeyboardTrackingView extends PureComponent { ref?: any; render() { - return (this.ref = r)}/>; + return ( + { + this.ref = r; + }} + /> + ); } async getNativeProps() { diff --git a/lib/components/Keyboard/KeyboardTrackingView/index.tsx b/lib/components/Keyboard/KeyboardTrackingView/index.tsx index 8dcfa85715..5f6799c15d 100644 --- a/lib/components/Keyboard/KeyboardTrackingView/index.tsx +++ b/lib/components/Keyboard/KeyboardTrackingView/index.tsx @@ -79,7 +79,7 @@ export type KeyboardTrackingViewProps = ViewProps & { usesBottomTabs?: boolean; ref?: any; style?: StyleProp; - children?: React.ReactChild | React.ReactChild[]; + children?: React.ReactNode; }; const KeyboardTrackingView = forwardRef(({children, ...others}: KeyboardTrackingViewProps, ref: any) => { diff --git a/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx b/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx index 4581c45066..9184e42bfa 100644 --- a/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx +++ b/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import {TouchableOpacity} from 'react-native'; type Props = { diff --git a/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx b/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx index 6f59f607c2..17828cf33f 100644 --- a/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx +++ b/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx @@ -1,6 +1,6 @@ // TODO: Support style customization import {isFunction, isUndefined} from 'lodash'; -import React, {useCallback, useRef, useMemo, useEffect, useState} from 'react'; +import React, {useCallback, useRef, useMemo, useEffect, useState, type JSX} from 'react'; import { TextStyle, ViewStyle, @@ -126,7 +126,7 @@ const WheelPicker = (props: WheelPickerProps) faderProps, flatListProps } = themeProps; - const scrollView = useRef(); + const scrollView = useRef(undefined); const offset = useSharedValue(0); const scrollHandler = useAnimatedScrollHandler(e => { offset.value = e.contentOffset.y; diff --git a/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts b/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts index ad520b0947..65449ee558 100644 --- a/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts +++ b/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React from 'react'; +import React, {type JSX} from 'react'; import {LogService} from '../../services'; import useMiddleIndex from './helpers/useListMiddleIndex'; import {WheelPickerItemValue} from './types'; diff --git a/packages/react-native-ui-lib/src/components/actionSheet/index.tsx b/packages/react-native-ui-lib/src/components/actionSheet/index.tsx index 283d0779e0..98d5d3bdf3 100644 --- a/packages/react-native-ui-lib/src/components/actionSheet/index.tsx +++ b/packages/react-native-ui-lib/src/components/actionSheet/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {ActionSheetIOS, StyleSheet, StyleProp, ViewStyle, ImageProps, ImageSourcePropType} from 'react-native'; import {Colors} from '../../style'; import {asBaseComponent, Constants} from '../../commons/new'; diff --git a/packages/react-native-ui-lib/src/components/animatedImage/index.tsx b/packages/react-native-ui-lib/src/components/animatedImage/index.tsx index 6e9a4f7bf1..e452739903 100644 --- a/packages/react-native-ui-lib/src/components/animatedImage/index.tsx +++ b/packages/react-native-ui-lib/src/components/animatedImage/index.tsx @@ -21,7 +21,7 @@ export interface AnimatedImageProps extends ImageProps { /** * A component to render while the image is loading */ - loader?: React.ReactElement; + loader?: React.ReactElement; } /** diff --git a/packages/react-native-ui-lib/src/components/avatar/index.tsx b/packages/react-native-ui-lib/src/components/avatar/index.tsx index e29924f03c..f222ff43a2 100644 --- a/packages/react-native-ui-lib/src/components/avatar/index.tsx +++ b/packages/react-native-ui-lib/src/components/avatar/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {PropsWithChildren, useMemo, forwardRef} from 'react'; +import React, {PropsWithChildren, useMemo, forwardRef, type JSX} from 'react'; import { StyleSheet, StyleProp, diff --git a/packages/react-native-ui-lib/src/components/badge/index.tsx b/packages/react-native-ui-lib/src/components/badge/index.tsx index 74ece732ed..2ac691592f 100644 --- a/packages/react-native-ui-lib/src/components/badge/index.tsx +++ b/packages/react-native-ui-lib/src/components/badge/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {PureComponent} from 'react'; +import React, {PureComponent, type JSX} from 'react'; import { ImageSourcePropType, ImageStyle, diff --git a/packages/react-native-ui-lib/src/components/button/types.ts b/packages/react-native-ui-lib/src/components/button/types.ts index 0683bddb31..f2a8471839 100644 --- a/packages/react-native-ui-lib/src/components/button/types.ts +++ b/packages/react-native-ui-lib/src/components/button/types.ts @@ -8,6 +8,7 @@ import { MarginModifiers } from '../../commons/new'; import {TouchableOpacityProps} from '../touchableOpacity'; +import type {JSX} from 'react'; import {TextProps} from '../text'; import {ImageProps} from '../image'; import type {IconProps} from '../icon'; @@ -155,7 +156,7 @@ export type ButtonProps = TouchableOpacityProps & /** * Custom element to render as button background (takes precedence over backgroundColor) */ - customBackground?: React.ReactElement; + customBackground?: React.ReactElement; }; export type ButtonState = { diff --git a/packages/react-native-ui-lib/src/components/carousel/index.tsx b/packages/react-native-ui-lib/src/components/carousel/index.tsx index d49afa6a47..91839991f7 100644 --- a/packages/react-native-ui-lib/src/components/carousel/index.tsx +++ b/packages/react-native-ui-lib/src/components/carousel/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {Component, RefObject, ReactNode, Key} from 'react'; +import React, {Component, RefObject, ReactNode, Key, type JSX} from 'react'; import { Animated, ScrollView, @@ -39,7 +39,7 @@ class Carousel extends Component { }; static pageControlPositions = PageControlPosition; - carousel: RefObject = React.createRef(); + carousel: RefObject = React.createRef(); autoplayTimer?: ReturnType; orientationChange?: boolean; skippedInitialScroll?: boolean; diff --git a/packages/react-native-ui-lib/src/components/chip/index.tsx b/packages/react-native-ui-lib/src/components/chip/index.tsx index f127d4eafd..2f40889423 100644 --- a/packages/react-native-ui-lib/src/components/chip/index.tsx +++ b/packages/react-native-ui-lib/src/components/chip/index.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useMemo} from 'react'; +import React, {useCallback, useMemo, type JSX} from 'react'; import {StyleSheet, StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType} from 'react-native'; import Assets from '../../assets'; import {asBaseComponent} from '../../commons/new'; diff --git a/packages/react-native-ui-lib/src/components/colorPalette/index.tsx b/packages/react-native-ui-lib/src/components/colorPalette/index.tsx index 6371cd7b57..0fe5d77cbd 100644 --- a/packages/react-native-ui-lib/src/components/colorPalette/index.tsx +++ b/packages/react-native-ui-lib/src/components/colorPalette/index.tsx @@ -102,7 +102,7 @@ class ColorPalette extends PureComponent { this.initLocalVariables(); } - carousel: React.RefObject = React.createRef(); + carousel: React.RefObject = React.createRef(); scrollBar: React.RefObject = React.createRef(); itemsRefs?: any = React.createRef(); selectedColorIndex?: number = undefined; diff --git a/packages/react-native-ui-lib/src/components/dateTimePicker/index.tsx b/packages/react-native-ui-lib/src/components/dateTimePicker/index.tsx index 445bff4bab..1b885e12cc 100644 --- a/packages/react-native-ui-lib/src/components/dateTimePicker/index.tsx +++ b/packages/react-native-ui-lib/src/components/dateTimePicker/index.tsx @@ -84,7 +84,7 @@ export type DateTimePickerProps = OldApiProps & /** * Render custom input */ - renderInput?: (props: Omit & {value?: string}) => React.ReactElement; + renderInput?: (props: Omit & {value?: string}) => React.ReactElement; /** * Override system theme variant (dark or light mode) used by the date picker. */ @@ -159,8 +159,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw const [value, setValue] = useState(propsValue); const chosenDate = useRef(propsValue); - const expandable = useRef(); - const textField = useRef(); + const expandable = useRef(undefined); + const textField = useRef(undefined); useImperativeHandle(ref, () => { return { diff --git a/packages/react-native-ui-lib/src/components/dialog/__tests__/index.new.spec.tsx b/packages/react-native-ui-lib/src/components/dialog/__tests__/index.new.spec.tsx index febc30d736..8ea792235a 100644 --- a/packages/react-native-ui-lib/src/components/dialog/__tests__/index.new.spec.tsx +++ b/packages/react-native-ui-lib/src/components/dialog/__tests__/index.new.spec.tsx @@ -72,7 +72,7 @@ describe('Dialog sanity checks', () => { }); it('Should dismiss dialog on dismiss call', () => { - let dialogRef: React.RefObject<{dismiss: () => void}>; + let dialogRef: React.RefObject<{dismiss: () => void} | null>; const RefTestCase = () => { dialogRef = useRef<{dismiss:() => void}>(null); return ; diff --git a/packages/react-native-ui-lib/src/components/dialog/types.ts b/packages/react-native-ui-lib/src/components/dialog/types.ts index 81de40a9bd..bccbf80ea4 100644 --- a/packages/react-native-ui-lib/src/components/dialog/types.ts +++ b/packages/react-native-ui-lib/src/components/dialog/types.ts @@ -46,19 +46,19 @@ export interface DialogHeaderProps extends ViewProps { /** * Pass to render a leading element */ - leadingAccessory?: ReactElement; + leadingAccessory?: ReactElement; /** * Pass to render a trailing element */ - trailingAccessory?: ReactElement; + trailingAccessory?: ReactElement; /** * Pass to render a top element above the title */ - topAccessory?: ReactElement; + topAccessory?: ReactElement; /** * Pass to render a bottom element below the subtitle */ - bottomAccessory?: ReactElement; + bottomAccessory?: ReactElement; /** * Style for the leading + content + trailing components (without the topAccessory\bottomAccessory) */ diff --git a/packages/react-native-ui-lib/src/components/drawer/index.tsx b/packages/react-native-ui-lib/src/components/drawer/index.tsx index 8649d2ff1b..3ef2b4df62 100644 --- a/packages/react-native-ui-lib/src/components/drawer/index.tsx +++ b/packages/react-native-ui-lib/src/components/drawer/index.tsx @@ -141,7 +141,7 @@ class Drawer extends PureComponent { leftRender: SwipeableProps['renderLeftActions']; rightRender: SwipeableProps['renderLeftActions']; - _swipeableRow: RefObject = React.createRef(); + _swipeableRow: RefObject = React.createRef(); animationOptions: SwipeableProps['animationOptions'] = {bounciness: this.props.bounciness || DEFAULT_BOUNCINESS}; leftActionX: Animated.Value = new Animated.Value(0); diff --git a/packages/react-native-ui-lib/src/components/expandableSection/index.tsx b/packages/react-native-ui-lib/src/components/expandableSection/index.tsx index fdf10ec4a3..7fd4f03172 100644 --- a/packages/react-native-ui-lib/src/components/expandableSection/index.tsx +++ b/packages/react-native-ui-lib/src/components/expandableSection/index.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useMemo, useState, type JSX} from 'react'; import {LayoutChangeEvent, StyleSheet} from 'react-native'; import {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import {useDidUpdate} from '../../hooks'; diff --git a/packages/react-native-ui-lib/src/components/fadedScrollView/index.tsx b/packages/react-native-ui-lib/src/components/fadedScrollView/index.tsx index b244ad0c15..acd9926735 100644 --- a/packages/react-native-ui-lib/src/components/fadedScrollView/index.tsx +++ b/packages/react-native-ui-lib/src/components/fadedScrollView/index.tsx @@ -63,7 +63,7 @@ const FadedScrollView = (props: Props) => { ...others } = props; const ScrollView = useGesture ? GestureScrollView : RNScrollView; - const scrollViewRef = useRef(); + const scrollViewRef = useRef(undefined); const horizontal = propsHorizontal ?? false; const {onContentSizeChange, onLayout, scrollEnabled} = useScrollEnabler({horizontal}); const { diff --git a/packages/react-native-ui-lib/src/components/featureHighlight/index.tsx b/packages/react-native-ui-lib/src/components/featureHighlight/index.tsx index bbe327ec40..229597a5b5 100644 --- a/packages/react-native-ui-lib/src/components/featureHighlight/index.tsx +++ b/packages/react-native-ui-lib/src/components/featureHighlight/index.tsx @@ -398,7 +398,9 @@ class FeatureHighlight extends Component { ) => (this.viewRef = r)} + ref={(r: ElementRef) => { + (this.viewRef = r); + }} /> diff --git a/packages/react-native-ui-lib/src/components/gridListItem/index.tsx b/packages/react-native-ui-lib/src/components/gridListItem/index.tsx index 55a1edf694..ec61a68dd2 100644 --- a/packages/react-native-ui-lib/src/components/gridListItem/index.tsx +++ b/packages/react-native-ui-lib/src/components/gridListItem/index.tsx @@ -27,7 +27,7 @@ export interface GridListItemProps { /** * Custom GridListItem to be rendered in the GridView */ - renderCustomItem?: () => React.ReactElement; + renderCustomItem?: () => React.ReactElement; /** * The item size */ @@ -35,7 +35,7 @@ export interface GridListItemProps { /** * Title content text */ - title?: string | React.ReactElement; + title?: string | React.ReactElement; /** * Title content typography */ @@ -51,7 +51,7 @@ export interface GridListItemProps { /** * Subtitle content text */ - subtitle?: string | React.ReactElement; + subtitle?: string | React.ReactElement; /** * Subtitle content typography */ @@ -67,7 +67,7 @@ export interface GridListItemProps { /** * Description content text */ - description?: string | React.ReactElement; + description?: string | React.ReactElement; /** * Description content typography */ @@ -107,12 +107,12 @@ export interface GridListItemProps { /** * Renders an overlay on top of the image */ - renderOverlay?: () => React.ReactElement; + renderOverlay?: () => React.ReactElement; /** * Test ID for component */ testID?: string; - children?: React.ReactElement | React.ReactElement[]; + children?: React.ReactElement | React.ReactElement[]; } /** @@ -156,7 +156,7 @@ class GridListItem extends Component { } }); - renderContent(text: string | React.ReactElement | undefined, textProps: Partial) { + renderContent(text: string | React.ReactElement | undefined, textProps: Partial) { const {alignToStart, horizontalAlignment} = this.props; const textAlign = alignToStart ? 'left' : horizontalAlignment; if (text) { diff --git a/packages/react-native-ui-lib/src/components/gridView/index.tsx b/packages/react-native-ui-lib/src/components/gridView/index.tsx index 42c47b05e2..aab50e2dc5 100644 --- a/packages/react-native-ui-lib/src/components/gridView/index.tsx +++ b/packages/react-native-ui-lib/src/components/gridView/index.tsx @@ -50,7 +50,7 @@ export interface GridViewProps { /** * Pass to render a custom item */ - renderCustomItem?: (item: GridListItemProps) => React.ReactElement; + renderCustomItem?: (item: GridListItemProps) => React.ReactElement; } interface GridViewState { diff --git a/packages/react-native-ui-lib/src/components/hint/HintBubble.tsx b/packages/react-native-ui-lib/src/components/hint/HintBubble.tsx index e8e40689ba..2e63faa72f 100644 --- a/packages/react-native-ui-lib/src/components/hint/HintBubble.tsx +++ b/packages/react-native-ui-lib/src/components/hint/HintBubble.tsx @@ -27,7 +27,7 @@ interface HintBubbleProps | 'icon' | 'customContent' > { - hintRef: React.RefObject; + hintRef: React.RefObject; setHintLayout: (layoutChangeEvent: LayoutChangeEvent) => void; hintPositionStyle: {left: number}; } diff --git a/packages/react-native-ui-lib/src/components/hint/HintOld.tsx b/packages/react-native-ui-lib/src/components/hint/HintOld.tsx index 2ecc184252..1371c87199 100644 --- a/packages/react-native-ui-lib/src/components/hint/HintOld.tsx +++ b/packages/react-native-ui-lib/src/components/hint/HintOld.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {Component, ReactElement, isValidElement, ElementRef} from 'react'; +import React, {Component, ReactElement, isValidElement, ElementRef, type JSX} from 'react'; import { Animated, StyleSheet, @@ -56,7 +56,7 @@ type HintPositionStyle = Position & Pick; type Paddings = Pick; -type ContentType = string | ReactElement; +type ContentType = string | ReactElement; export interface HintProps { /** diff --git a/packages/react-native-ui-lib/src/components/hint/types.ts b/packages/react-native-ui-lib/src/components/hint/types.ts index 43812d3650..629fdd3f76 100644 --- a/packages/react-native-ui-lib/src/components/hint/types.ts +++ b/packages/react-native-ui-lib/src/components/hint/types.ts @@ -1,4 +1,4 @@ -import type {ReactElement} from 'react'; +import type {ReactElement, JSX} from 'react'; import type { GestureResponderEvent, ImageSourcePropType, @@ -15,7 +15,7 @@ export type LayoutStyle = PositionStyle & Pick; export type PaddingsStyle = Pick; -export type ContentType = string | ReactElement; +export type ContentType = string | ReactElement; export enum TargetAlignments { LEFT = 'left', diff --git a/packages/react-native-ui-lib/src/components/image/index.tsx b/packages/react-native-ui-lib/src/components/image/index.tsx index cda0660d44..3057023875 100644 --- a/packages/react-native-ui-lib/src/components/image/index.tsx +++ b/packages/react-native-ui-lib/src/components/image/index.tsx @@ -75,7 +75,7 @@ export type ImageProps = Omit & /** * Render an overlay with custom content */ - customOverlayContent?: React.ReactElement | React.ReactElement[]; + customOverlayContent?: React.ReactElement | React.ReactElement[]; /** * Default image source in case of an error */ diff --git a/packages/react-native-ui-lib/src/components/loaderScreen/types.ts b/packages/react-native-ui-lib/src/components/loaderScreen/types.ts index 45c3a5e366..eb27202f4f 100644 --- a/packages/react-native-ui-lib/src/components/loaderScreen/types.ts +++ b/packages/react-native-ui-lib/src/components/loaderScreen/types.ts @@ -8,7 +8,7 @@ export type LoaderScreenProps = ActivityIndicatorProps & { /** * Custom loader */ - customLoader?: React.ReactChild; + customLoader?: React.ReactElement | number | string; /** * Color of the loader background (only when passing 'overlay') */ diff --git a/packages/react-native-ui-lib/src/components/maskedInput/new.tsx b/packages/react-native-ui-lib/src/components/maskedInput/new.tsx index 41cf51cbcd..97c1016939 100644 --- a/packages/react-native-ui-lib/src/components/maskedInput/new.tsx +++ b/packages/react-native-ui-lib/src/components/maskedInput/new.tsx @@ -5,7 +5,8 @@ import React, { useState, useImperativeHandle, forwardRef, - ForwardedRef + ForwardedRef, + type JSX } from 'react'; import _ from 'lodash'; import {StyleSheet, Keyboard, TextInput, TextInputProps, StyleProp, ViewStyle} from 'react-native'; @@ -40,8 +41,8 @@ export interface MaskedInputProps extends Omit { function MaskedInput(props: MaskedInputProps, ref: ForwardedRef) { const {initialValue, formatter = _.identity, containerStyle, renderMaskedText, onChangeText, ...others} = props; const [value, setValue] = useState(initialValue); - const inputRef = useRef(); - const keyboardDidHideListener = useRef(); + const inputRef = useRef(undefined); + const keyboardDidHideListener = useRef(undefined); useImperativeHandle(ref, () => { return { diff --git a/packages/react-native-ui-lib/src/components/modal/index.tsx b/packages/react-native-ui-lib/src/components/modal/index.tsx index 8bd465bc2a..4c9af5d3c0 100644 --- a/packages/react-native-ui-lib/src/components/modal/index.tsx +++ b/packages/react-native-ui-lib/src/components/modal/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; import { StyleSheet, diff --git a/packages/react-native-ui-lib/src/components/numberInput/index.tsx b/packages/react-native-ui-lib/src/components/numberInput/index.tsx index 51b7181b59..fe5d466c17 100644 --- a/packages/react-native-ui-lib/src/components/numberInput/index.tsx +++ b/packages/react-native-ui-lib/src/components/numberInput/index.tsx @@ -97,7 +97,7 @@ function NumberInput(props: NumberInputProps, ref: any) { const [options, setOptions] = useState(generateOptions(locale, fractionDigits)); const initialNumber = getInitialNumber(propsInitialNumber, options); const [data, setData] = useState(parseInput(`${initialNumber}`, options, propsInitialNumber)); - const textField = useRef(); + const textField = useRef(undefined); const [isFocused, setIsFocused] = useState(textFieldProps?.autoFocus ?? false); useDidUpdate(() => { diff --git a/packages/react-native-ui-lib/src/components/overlay/index.tsx b/packages/react-native-ui-lib/src/components/overlay/index.tsx index 379b107400..02e74b71aa 100644 --- a/packages/react-native-ui-lib/src/components/overlay/index.tsx +++ b/packages/react-native-ui-lib/src/components/overlay/index.tsx @@ -37,7 +37,7 @@ export type OverlayTypes = Pick & { /** * Custom overlay content to be rendered on top of the image */ - customContent?: React.ReactElement | React.ReactElement[]; + customContent?: React.ReactElement | React.ReactElement[]; }; /** diff --git a/packages/react-native-ui-lib/src/components/picker/helpers/useImperativePickerHandle.ts b/packages/react-native-ui-lib/src/components/picker/helpers/useImperativePickerHandle.ts index 747776ad6d..b2388ed263 100644 --- a/packages/react-native-ui-lib/src/components/picker/helpers/useImperativePickerHandle.ts +++ b/packages/react-native-ui-lib/src/components/picker/helpers/useImperativePickerHandle.ts @@ -4,7 +4,7 @@ import {TextFieldMethods} from '../../textField'; const useImperativePickerHandle = (ref: React.Ref, expandableRef: React.MutableRefObject) => { - const pickerRef = useRef(); + const pickerRef = useRef(undefined); useImperativeHandle(ref, () => { const {isFocused, focus, blur, clear, validate, isValid} = pickerRef.current ?? {}; // @ts-expect-error useRef return type is possible null therefor it throw TS error diff --git a/packages/react-native-ui-lib/src/components/picker/index.tsx b/packages/react-native-ui-lib/src/components/picker/index.tsx index 30e75786b5..c2fda0ad56 100644 --- a/packages/react-native-ui-lib/src/components/picker/index.tsx +++ b/packages/react-native-ui-lib/src/components/picker/index.tsx @@ -180,7 +180,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => { toggleAllItemsSelection ]); - const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => { + const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => { return ; }, []); diff --git a/packages/react-native-ui-lib/src/components/picker/types.ts b/packages/react-native-ui-lib/src/components/picker/types.ts index f7cf075484..0814678209 100644 --- a/packages/react-native-ui-lib/src/components/picker/types.ts +++ b/packages/react-native-ui-lib/src/components/picker/types.ts @@ -1,4 +1,4 @@ -import {PropsWithChildren, ReactNode} from 'react'; +import {PropsWithChildren, ReactNode, type JSX} from 'react'; import {FlatListProps, StyleProp, ViewStyle, TextStyle} from 'react-native'; import {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay'; import {ModalTopBarProps} from '../modal/TopBar'; @@ -28,7 +28,7 @@ export type PickerValue = PickerSingleValue | PickerMultiValue | undefined; type PickerFilteredItems = ReactNode | Pick[] | undefined; type RenderPickerOverloads = ValueType extends PickerValue - ? (value?: ValueType, label?: string) => React.ReactElement + ? (value?: ValueType, label?: string) => React.ReactElement : never; type RenderPicker = RenderPickerOverloads; @@ -66,7 +66,7 @@ type PickerPropsDeprecation = { * Render a custom header for Picker's dialog * instead use renderHeader */ - renderCustomDialogHeader?: (callbacks: {onDone?: () => void; onCancel?: () => void}) => React.ReactElement; + renderCustomDialogHeader?: (callbacks: {onDone?: () => void; onCancel?: () => void}) => React.ReactElement; /** * @deprecated * Render custom picker input (the value will be passed) @@ -80,7 +80,7 @@ type PickerPropsDeprecation = { * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...}) * instead use renderOverlay */ - renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement; + renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement; /** * @deprecated * Pass props to the picker modal @@ -109,14 +109,14 @@ type PickerSearchProps = { /** * Render custom search input (only when passing showSearch) */ - renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement; + renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement; }; type PickerListProps = PickerSearchProps & { /** * Render a custom header for Picker's Overlay */ - renderHeader?: (callbacks: {onDone?: () => void; onCancel?: () => void}) => React.ReactElement; + renderHeader?: (callbacks: {onDone?: () => void; onCancel?: () => void}) => React.ReactElement; /** * Pass props to the list component that wraps the picker items (allows to control FlatList behavior) */ @@ -139,7 +139,7 @@ type PickerExpandableOverlayProps = { /** * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...}) */ - renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement; + renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement; /** * Add blur effect to picker modal (iOS only) */ @@ -234,11 +234,11 @@ export type PickerBaseProps = Omit & value: PickerValue, itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean}, label?: string - ) => React.ReactElement; + ) => React.ReactElement; /** * Render custom top element */ - renderCustomTopElement?: (value?: PickerValue) => React.ReactElement; + renderCustomTopElement?: (value?: PickerValue) => React.ReactElement; /** * Selection status bar props */ diff --git a/packages/react-native-ui-lib/src/components/progressBar/index.tsx b/packages/react-native-ui-lib/src/components/progressBar/index.tsx index 86021500bd..1511856798 100644 --- a/packages/react-native-ui-lib/src/components/progressBar/index.tsx +++ b/packages/react-native-ui-lib/src/components/progressBar/index.tsx @@ -1,5 +1,5 @@ import isUndefined from 'lodash/isUndefined'; -import React, {PureComponent} from 'react'; +import React, {PureComponent, type JSX} from 'react'; import {Animated, Easing, StyleSheet, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native'; import {Constants, asBaseComponent} from '../../commons/new'; import {extractAccessibilityProps} from '../../commons/modifiers'; diff --git a/packages/react-native-ui-lib/src/components/searchInput/index.tsx b/packages/react-native-ui-lib/src/components/searchInput/index.tsx index d152b013ef..0093421fa1 100644 --- a/packages/react-native-ui-lib/src/components/searchInput/index.tsx +++ b/packages/react-native-ui-lib/src/components/searchInput/index.tsx @@ -34,7 +34,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef) style, inaccessible } = props; - const currentAnimatedValue = useRef | undefined>(); + const currentAnimatedValue = useRef | undefined>(undefined); const searchInputRef = useRef(null); const [hasValue, setHasValue] = useState(Boolean(controlledValue)); const [value, setValue] = useState(controlledValue); diff --git a/packages/react-native-ui-lib/src/components/searchInput/types.ts b/packages/react-native-ui-lib/src/components/searchInput/types.ts index f9eac54e9a..52d22cb261 100644 --- a/packages/react-native-ui-lib/src/components/searchInput/types.ts +++ b/packages/react-native-ui-lib/src/components/searchInput/types.ts @@ -28,7 +28,7 @@ export type SearchInputProps = TextInputProps & { /** * Custom right element */ - customRightElement?: React.ReactElement; + customRightElement?: React.ReactElement; /** * Whether to show a loader instead of the left search icon */ @@ -40,7 +40,7 @@ export type SearchInputProps = TextInputProps & { /** * custom loader element */ - customLoader?: React.ReactElement; + customLoader?: React.ReactElement; /** * converts the colors of the search's input elements, icons and button to white */ diff --git a/packages/react-native-ui-lib/src/components/skeletonView/index.tsx b/packages/react-native-ui-lib/src/components/skeletonView/index.tsx index 5994396644..e455237ee8 100644 --- a/packages/react-native-ui-lib/src/components/skeletonView/index.tsx +++ b/packages/react-native-ui-lib/src/components/skeletonView/index.tsx @@ -51,7 +51,7 @@ export interface SkeletonListProps { /** * Extra content to be rendered on the end of the list item */ - renderEndContent?: () => React.ReactElement | undefined; + renderEndContent?: () => React.ReactElement | undefined; } export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers { diff --git a/packages/react-native-ui-lib/src/components/slider/Thumb.tsx b/packages/react-native-ui-lib/src/components/slider/Thumb.tsx index 17716efc8b..f69bd1f338 100644 --- a/packages/react-native-ui-lib/src/components/slider/Thumb.tsx +++ b/packages/react-native-ui-lib/src/components/slider/Thumb.tsx @@ -38,7 +38,7 @@ export interface ThumbProps extends ViewProps { */ disabled?: boolean; /** ref to thumb component */ - ref?: React.RefObject; + ref?: React.RefObject; } type ThumbStyle = {style?: StyleProp; left?: StyleProp}; diff --git a/packages/react-native-ui-lib/src/components/slider/index.tsx b/packages/react-native-ui-lib/src/components/slider/index.tsx index da663cf2d9..6a1d734ad0 100644 --- a/packages/react-native-ui-lib/src/components/slider/index.tsx +++ b/packages/react-native-ui-lib/src/components/slider/index.tsx @@ -72,7 +72,7 @@ class Slider extends PureComponent { private thumb = React.createRef(); private minThumb = React.createRef(); - private activeThumbRef: React.RefObject; + private activeThumbRef: React.RefObject; private panResponder; private minTrack = React.createRef(); @@ -239,7 +239,7 @@ class Slider extends PureComponent { /* Actions */ - setActiveThumb = (ref: React.RefObject) => { + setActiveThumb = (ref: React.RefObject) => { this.activeThumbRef = ref; }; diff --git a/packages/react-native-ui-lib/src/components/slider/types.ts b/packages/react-native-ui-lib/src/components/slider/types.ts index 3349cb294d..28f4830e08 100644 --- a/packages/react-native-ui-lib/src/components/slider/types.ts +++ b/packages/react-native-ui-lib/src/components/slider/types.ts @@ -44,7 +44,7 @@ export type SliderProps = Omit & { /** * Custom render instead of rendering the track */ - renderTrack?: () => ReactElement | ReactElement[]; + renderTrack?: () => ReactElement | ReactElement[]; /** * Callback for onValueChange */ diff --git a/packages/react-native-ui-lib/src/components/stackAggregator/index.tsx b/packages/react-native-ui-lib/src/components/stackAggregator/index.tsx index 5339af5f7d..9e24740a33 100644 --- a/packages/react-native-ui-lib/src/components/stackAggregator/index.tsx +++ b/packages/react-native-ui-lib/src/components/stackAggregator/index.tsx @@ -1,4 +1,4 @@ -import React, {useState, useMemo, useCallback, useEffect} from 'react'; +import React, {useState, useMemo, useCallback, useEffect, type JSX} from 'react'; import {StyleSheet, Animated, Easing, LayoutAnimation, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native'; import {Colors} from '../../style'; import View, {ViewProps} from '../view'; diff --git a/packages/react-native-ui-lib/src/components/tabController/TabBarItem.tsx b/packages/react-native-ui-lib/src/components/tabController/TabBarItem.tsx index d1075746aa..ac6d7780c6 100644 --- a/packages/react-native-ui-lib/src/components/tabController/TabBarItem.tsx +++ b/packages/react-native-ui-lib/src/components/tabController/TabBarItem.tsx @@ -58,11 +58,11 @@ export interface TabControllerItemProps extends Pick; /** * Pass to render a trailing element */ - trailingAccessory?: ReactElement; + trailingAccessory?: ReactElement; /** * A fixed width for the item */ @@ -138,7 +138,7 @@ export default function TabBarItem({ ...props }: Props) { const {currentPage, setCurrentIndex} = useContext(TabBarContext); - const itemRef = useRef(); + const itemRef = useRef(undefined); const itemWidth = useRef(props.width); const isPressed = useSharedValue(false); // JSON.parse(JSON.stringify is due to an issue with reanimated diff --git a/packages/react-native-ui-lib/src/components/tabController/TabPage.tsx b/packages/react-native-ui-lib/src/components/tabController/TabPage.tsx index 0fad6ee490..60cc44f58f 100644 --- a/packages/react-native-ui-lib/src/components/tabController/TabPage.tsx +++ b/packages/react-native-ui-lib/src/components/tabController/TabPage.tsx @@ -1,4 +1,4 @@ -import React, {PropsWithChildren, useCallback, useContext, useState, useMemo} from 'react'; +import React, {PropsWithChildren, useCallback, useContext, useState, useMemo, type JSX} from 'react'; import {type StyleProp, StyleSheet, type ViewStyle} from 'react-native'; import Reanimated, {useAnimatedStyle, useAnimatedReaction, runOnJS} from 'react-native-reanimated'; // import {Freeze} from 'react-freeze'; diff --git a/packages/react-native-ui-lib/src/components/tabController/useScrollToItem.ts b/packages/react-native-ui-lib/src/components/tabController/useScrollToItem.ts index 8cee66f89e..127859f9ef 100644 --- a/packages/react-native-ui-lib/src/components/tabController/useScrollToItem.ts +++ b/packages/react-native-ui-lib/src/components/tabController/useScrollToItem.ts @@ -15,7 +15,7 @@ export enum OffsetType { } export type ScrollToItemProps = { - scrollViewRef?: RefObject; + scrollViewRef?: RefObject; /** * The number of items */ diff --git a/packages/react-native-ui-lib/src/components/textField/types.ts b/packages/react-native-ui-lib/src/components/textField/types.ts index 1f98fe7874..4341805e4a 100644 --- a/packages/react-native-ui-lib/src/components/textField/types.ts +++ b/packages/react-native-ui-lib/src/components/textField/types.ts @@ -209,19 +209,19 @@ export type TextFieldProps = MarginModifiers & /** * Pass to render a leading element */ - leadingAccessory?: ReactElement; + leadingAccessory?: ReactElement; /** * Pass to render a trailing element */ - trailingAccessory?: ReactElement; + trailingAccessory?: ReactElement; /** * Pass to render a top trailing element */ - topTrailingAccessory?: ReactElement; + topTrailingAccessory?: ReactElement; /** * Pass to render a bottom element below the input */ - bottomAccessory?: ReactElement; + bottomAccessory?: ReactElement; /** * Should show a clear button when there is a value */ diff --git a/packages/react-native-ui-lib/src/components/textField/useImperativeInputHandle.ts b/packages/react-native-ui-lib/src/components/textField/useImperativeInputHandle.ts index b9ad98d51a..797872230f 100644 --- a/packages/react-native-ui-lib/src/components/textField/useImperativeInputHandle.ts +++ b/packages/react-native-ui-lib/src/components/textField/useImperativeInputHandle.ts @@ -3,7 +3,7 @@ import {findNodeHandle, TextInput, TextInputProps} from 'react-native'; import FieldContext from './FieldContext'; const useImperativeInputHandle = (ref: React.Ref, props: Pick) => { - const inputRef = useRef(); + const inputRef = useRef(undefined); const context = useContext(FieldContext); useImperativeHandle(ref, () => { return { diff --git a/packages/react-native-ui-lib/src/components/timeline/index.tsx b/packages/react-native-ui-lib/src/components/timeline/index.tsx index 8d373883a5..6a79f668c1 100644 --- a/packages/react-native-ui-lib/src/components/timeline/index.tsx +++ b/packages/react-native-ui-lib/src/components/timeline/index.tsx @@ -24,7 +24,7 @@ const Timeline = (props: TimelineProps) => { const [anchorMeasurements, setAnchorMeasurements] = useState(); const [contentContainerMeasurements, setContentContainerMeasurements] = useState(); const [pointMeasurements, setPointMeasurements] = useState(); - const contentContainerRef = useRef(); + const contentContainerRef = useRef(undefined); const onMeasure: MeasureOnSuccessCallback = (x, y, width, height) => { setAnchorMeasurements({x, y, width, height}); diff --git a/packages/react-native-ui-lib/src/hooks/useCombinedRefs/index.ts b/packages/react-native-ui-lib/src/hooks/useCombinedRefs/index.ts index abba36db64..a1e0d5ecfa 100644 --- a/packages/react-native-ui-lib/src/hooks/useCombinedRefs/index.ts +++ b/packages/react-native-ui-lib/src/hooks/useCombinedRefs/index.ts @@ -1,7 +1,7 @@ import React from 'react'; const useCombinedRefs = (...refs: React.Ref[]) => { - const targetRef = React.useRef(); + const targetRef = React.useRef(undefined); React.useEffect(() => { refs.forEach(ref => { diff --git a/packages/react-native-ui-lib/src/hooks/useDebounce/index.ts b/packages/react-native-ui-lib/src/hooks/useDebounce/index.ts index f6b1e58ba8..2a5c7f33ff 100644 --- a/packages/react-native-ui-lib/src/hooks/useDebounce/index.ts +++ b/packages/react-native-ui-lib/src/hooks/useDebounce/index.ts @@ -4,7 +4,7 @@ import {useCallback, useRef} from 'react'; * This hook is used to debounce a function call */ function useDebounce(func: (args: A) => void, timeout = 300) { - const handler = useRef(); + const handler = useRef(undefined); const debouncedFunction = useCallback((args: A) => { if (handler.current) { clearTimeout(handler.current); diff --git a/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.ts b/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.ts index c7db81be47..ac0b2f43e0 100644 --- a/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.ts +++ b/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.ts @@ -31,8 +31,8 @@ export default function useHiddenLocation() { }; const [hiddenLocation, setHiddenLocation] = useState(getHiddenLocation({})); - const ref = useRef(); - const layoutData = useRef(); + const ref = useRef(undefined); + const layoutData = useRef(undefined); const wasMeasured = useRef(wasMeasuredDefaultValue); const measure = useCallback(() => { diff --git a/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.web.ts b/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.web.ts index 0271c4c258..212c927e24 100644 --- a/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.web.ts +++ b/packages/react-native-ui-lib/src/hooks/useHiddenLocation/index.web.ts @@ -27,8 +27,8 @@ export default function useHiddenLocation() { }; const [hiddenLocation, setHiddenLocation] = useState(getHiddenLocation({})); - const ref = useRef(); - const layoutData = useRef(); + const ref = useRef(undefined); + const layoutData = useRef(undefined); const wasMeasured = useRef(wasMeasuredDefaultValue); const measure = useCallback(() => { diff --git a/packages/react-native-ui-lib/src/hooks/useMeasure/index.ts b/packages/react-native-ui-lib/src/hooks/useMeasure/index.ts index 21a113a886..7e502f5b4a 100644 --- a/packages/react-native-ui-lib/src/hooks/useMeasure/index.ts +++ b/packages/react-native-ui-lib/src/hooks/useMeasure/index.ts @@ -11,7 +11,7 @@ interface Measurements { } export default () => { - const ref = useRef(); + const ref = useRef(undefined); const [measurements, setMeasurements] = useState(); const onMeasure: MeasureOnSuccessCallback = (x, y, width, height, pageX, pageY) => { diff --git a/packages/react-native-ui-lib/src/hooks/useScrollTo/index.ts b/packages/react-native-ui-lib/src/hooks/useScrollTo/index.ts index 759f5dc087..0e1c3b0967 100644 --- a/packages/react-native-ui-lib/src/hooks/useScrollTo/index.ts +++ b/packages/react-native-ui-lib/src/hooks/useScrollTo/index.ts @@ -8,7 +8,7 @@ export type ScrollToProps = { /** * A reference to the ScrollView (or FlatList) which the items are in */ - scrollViewRef?: RefObject; + scrollViewRef?: RefObject; /** * Is the scroll view horizontal (default is true) */ @@ -19,7 +19,7 @@ export type ScrollToResultProps = { /** * A reference to the ScrollView (or FlatList) which the items are in (from the props or a created one) */ - scrollViewRef: RefObject; + scrollViewRef: RefObject; /** * scrollTo callback. * offset - the x or y to scroll to. diff --git a/packages/react-native-ui-lib/src/incubator/calendar/index.tsx b/packages/react-native-ui-lib/src/incubator/calendar/index.tsx index 2ba56dbc60..e541b680de 100644 --- a/packages/react-native-ui-lib/src/incubator/calendar/index.tsx +++ b/packages/react-native-ui-lib/src/incubator/calendar/index.tsx @@ -46,7 +46,7 @@ function Calendar(props: PropsWithChildren) { }, [monthItems]); - const flashListRef = useRef(); + const flashListRef = useRef(undefined); const current = useSharedValue(new Date(initialDate).setHours(0, 0, 0, 0)); const initialMonthIndex = useRef(getItemIndex(current.value)); const lastUpdateSource = useSharedValue(UpdateSource.INIT); diff --git a/packages/react-native-ui-lib/src/incubator/calendar/types.ts b/packages/react-native-ui-lib/src/incubator/calendar/types.ts index 8142fc954a..843fcf8699 100644 --- a/packages/react-native-ui-lib/src/incubator/calendar/types.ts +++ b/packages/react-native-ui-lib/src/incubator/calendar/types.ts @@ -127,8 +127,8 @@ export interface CalendarProps { } export interface AgendaProps { - renderEvent?: (event: Event) => React.ReactElement | null; - renderHeader?: (header: DateSectionHeader) => React.ReactElement | null; + renderEvent?: (event: Event) => React.ReactElement | null; + renderHeader?: (header: DateSectionHeader) => React.ReactElement | null; showLoader?: boolean; onEndReached?: (date: number) => void; // Type: list(events)/timeline diff --git a/packages/react-native-ui-lib/src/incubator/expandableOverlay/index.tsx b/packages/react-native-ui-lib/src/incubator/expandableOverlay/index.tsx index a084fd567e..2892e7c977 100644 --- a/packages/react-native-ui-lib/src/incubator/expandableOverlay/index.tsx +++ b/packages/react-native-ui-lib/src/incubator/expandableOverlay/index.tsx @@ -21,7 +21,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps & /** * The content to render inside the expandable modal/dialog */ - expandableContent?: React.ReactElement; + expandableContent?: React.ReactElement; /** * Whether to use a dialog as expandable container (by default the container will be a full screen modal) */ @@ -45,7 +45,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps & /** * A custom overlay to render instead of Modal or Dialog components */ - renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined | null; + renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined | null; /** * Disabled opening expandable overlay */ diff --git a/packages/react-native-ui-lib/src/incubator/slider/Track.tsx b/packages/react-native-ui-lib/src/incubator/slider/Track.tsx index 9c0117ec00..c633d9b277 100644 --- a/packages/react-native-ui-lib/src/incubator/slider/Track.tsx +++ b/packages/react-native-ui-lib/src/incubator/slider/Track.tsx @@ -12,7 +12,7 @@ export interface Props extends ViewProps { maximumTrackTintColor?: string; minimumTrackTintColor?: string; trackStyle?: StyleProp; - renderTrack?: () => ReactElement | ReactElement[]; + renderTrack?: () => ReactElement | ReactElement[]; onPress?: ((event: GestureResponderEvent) => void) | undefined; } diff --git a/packages/react-native-ui-lib/src/incubator/slider/index.tsx b/packages/react-native-ui-lib/src/incubator/slider/index.tsx index 98f74e6a09..71172fb5b3 100644 --- a/packages/react-native-ui-lib/src/incubator/slider/index.tsx +++ b/packages/react-native-ui-lib/src/incubator/slider/index.tsx @@ -78,7 +78,7 @@ export interface SliderProps extends AccessibilityProps { /** * Custom render instead of rendering the track */ - renderTrack?: () => ReactElement | ReactElement[]; + renderTrack?: () => ReactElement | ReactElement[]; /** * The thumb style */ diff --git a/packages/react-native-ui-lib/src/incubator/toast/helpers/useToastTimer.ts b/packages/react-native-ui-lib/src/incubator/toast/helpers/useToastTimer.ts index 197249804d..9748567024 100644 --- a/packages/react-native-ui-lib/src/incubator/toast/helpers/useToastTimer.ts +++ b/packages/react-native-ui-lib/src/incubator/toast/helpers/useToastTimer.ts @@ -2,7 +2,7 @@ import {useCallback, useRef} from 'react'; import {ToastProps} from '../types'; export default ({autoDismiss, onDismiss}: Pick) => { - const timer = useRef>(); + const timer = useRef>(undefined); const clearTimer = useCallback(() => { if (timer.current) { diff --git a/packages/react-native-ui-lib/src/incubator/toast/index.tsx b/packages/react-native-ui-lib/src/incubator/toast/index.tsx index 2238deed0a..22c67fc69d 100644 --- a/packages/react-native-ui-lib/src/incubator/toast/index.tsx +++ b/packages/react-native-ui-lib/src/incubator/toast/index.tsx @@ -55,7 +55,7 @@ const Toast = (props: PropsWithChildren) => { PanView.directions.RIGHT ]); - const viewRef = useRef(); + const viewRef = useRef(undefined); const [toastHeight, setToastHeight] = useState(); const {clearTimer, setTimer} = useToastTimer(props); diff --git a/packages/react-native-ui-lib/src/incubator/toast/types.ts b/packages/react-native-ui-lib/src/incubator/toast/types.ts index 9bb737abde..dbf2939d58 100644 --- a/packages/react-native-ui-lib/src/incubator/toast/types.ts +++ b/packages/react-native-ui-lib/src/incubator/toast/types.ts @@ -1,4 +1,4 @@ -import {ReactElement, ReactNode} from 'react'; +import {ReactElement, ReactNode, type JSX} from 'react'; import {ImageSourcePropType, StyleProp, TextStyle, ViewStyle} from 'react-native'; import {ButtonProps} from '../../components/button'; import {TextProps} from '../../components/text'; @@ -55,7 +55,7 @@ export interface ToastProps { /** * should show a loader */ - loaderElement?: ReactElement; + loaderElement?: ReactElement; /** * callback for dismiss action */ diff --git a/packages/react-native-ui-lib/src/testkit/Component.driver.ts b/packages/react-native-ui-lib/src/testkit/Component.driver.ts index 9f5f638cd7..769e25e714 100644 --- a/packages/react-native-ui-lib/src/testkit/Component.driver.ts +++ b/packages/react-native-ui-lib/src/testkit/Component.driver.ts @@ -1,3 +1,4 @@ +import type {JSX} from 'react'; import {DragData, UniDriver, UniDriverClass} from './UniDriver'; import {TestingLibraryDriver} from './drivers/TestingLibraryDriver'; diff --git a/packages/react-native-ui-lib/src/testkit/drivers/TestingLibraryDriver.tsx b/packages/react-native-ui-lib/src/testkit/drivers/TestingLibraryDriver.tsx index f96bca5ad8..eb67b90602 100644 --- a/packages/react-native-ui-lib/src/testkit/drivers/TestingLibraryDriver.tsx +++ b/packages/react-native-ui-lib/src/testkit/drivers/TestingLibraryDriver.tsx @@ -1,3 +1,4 @@ +import type {JSX} from 'react'; import {DragData, UniDriver} from '../UniDriver'; import {fireEvent, render, RenderAPI} from '@testing-library/react-native'; import {ReactTestInstance} from 'react-test-renderer'; diff --git a/webDemo/src/examples/Carousel.tsx b/webDemo/src/examples/Carousel.tsx index 445947922b..a155e3da0f 100644 --- a/webDemo/src/examples/Carousel.tsx +++ b/webDemo/src/examples/Carousel.tsx @@ -14,7 +14,7 @@ const IMAGES = [ const CarouselWrapper = () => { - const carousel = React.useRef(); + const carousel = React.useRef(undefined); const [currentPage, setCurrentPage] = useState(INITIAL_PAGE); diff --git a/webDemo/src/examples/Timeline.tsx b/webDemo/src/examples/Timeline.tsx index 1f20d18b05..193b25dc92 100644 --- a/webDemo/src/examples/Timeline.tsx +++ b/webDemo/src/examples/Timeline.tsx @@ -19,7 +19,7 @@ const contents = [ const TimelineWrapper = () => { const [expand, setExpand] = useState(false); - const anchor = useRef(); + const anchor = useRef(undefined); const onPressExpand = useCallback(() => { setExpand(!expand); From ce9177440b711ffc01016a44fa517c0a608328b8 Mon Sep 17 00:00:00 2001 From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com> Date: Wed, 7 Jan 2026 10:14:29 +0200 Subject: [PATCH 3/3] Infra/v9 prop types (#3900) * Remove DemoScreen (unused) * Remove prop-types * Remove @types/prop-types * Infra/v9 default props (#3901) * Remove unneeded defaultProps * defaultProps on asBaseComponent * Remove defaultProps (unused af far as we can tell) * Remove DocsGenerator (unused) * Fix (most) typescript issue (#3902) * Fix (most) typescript issue * Infra/v9 tests (#3903) * Fix button and update @testing-library/react-native version * Remove unsupported modifiers methods, add docs and fix tests The old TextField was the only usage of the removed methods and it was only used by MaskedInput which is deprecated --- demo/src/screens/DemoScreen.js | 96 -- demo/src/screens/MainScreen.js | 8 - .../ConversationListScreen.js | 8 - .../foundationScreens/TypographyScreen.js | 5 - .../realExamples/ListActions/ActionsList.js | 6 - docs/getting-started/v8.md | 3 +- docs/getting-started/v9.md | 21 + expoDemo/package.json | 2 +- lib/package.json | 3 +- package.json | 8 +- packages/react-native-ui-lib/package.json | 7 +- .../src/commons/__tests__/modifiers.spec.js | 41 - .../src/commons/asBaseComponent.tsx | 3 +- .../src/commons/baseComponent.tsx | 9 - .../src/commons/forwardRef.tsx | 3 - .../src/commons/modifiers.ts | 21 - .../src/commons/withScrollEnabler.tsx | 2 - .../src/commons/withScrollReached.tsx | 2 - .../KeyboardAwareBase.js | 7 - .../KeyboardAwareFlatList.js | 6 - .../KeyboardAwareScrollView.js | 6 - .../src/components/animatedScanner/index.js | 37 - .../components/button/__tests__/index.spec.js | 118 ++- .../src/components/carousel/types.ts | 8 +- .../src/components/featureHighlight/index.tsx | 2 - .../src/components/hint/HintMockChildren.tsx | 2 +- .../src/components/hint/HintOld.tsx | 2 +- .../src/components/icon/index.tsx | 3 - .../src/components/image/index.tsx | 14 +- .../__tests__/maskedInput.old.spec.tsx | 20 - ...nput.new.spec.tsx => maskedInput.spec.tsx} | 4 +- .../src/components/maskedInput/index.tsx | 137 ++- .../maskedInput/maskedInput.api.json | 1 - .../src/components/maskedInput/new.tsx | 129 --- .../src/components/maskedInput/old.js | 95 -- .../src/components/numberInput/index.tsx | 2 +- .../components/picker/PickerDialog.android.js | 15 - .../src/components/picker/PickerDialog.js | 7 - .../picker/__tests__/index.spec.tsx | 12 +- .../src/components/picker/types.ts | 1 - .../src/components/scrollBar/index.tsx | 23 +- .../src/components/textArea/index.js | 6 - .../src/components/textFieldOld/index.tsx | 843 ------------------ .../src/components/toast/index.js | 69 -- .../src/components/view/index.tsx | 3 +- .../src/components/wizard/types.ts | 2 +- .../src/components/wizard/wizard.api.json | 2 +- .../src/helpers/DocsGenerator.js | 61 -- .../src/hooks/useCombinedRefs/index.ts | 1 - .../src/typings/module.d.ts | 15 +- yarn.lock | 168 ++-- 51 files changed, 386 insertions(+), 1683 deletions(-) delete mode 100644 demo/src/screens/DemoScreen.js create mode 100644 docs/getting-started/v9.md delete mode 100644 packages/react-native-ui-lib/src/components/maskedInput/__tests__/maskedInput.old.spec.tsx rename packages/react-native-ui-lib/src/components/maskedInput/__tests__/{maskedInput.new.spec.tsx => maskedInput.spec.tsx} (87%) delete mode 100644 packages/react-native-ui-lib/src/components/maskedInput/new.tsx delete mode 100644 packages/react-native-ui-lib/src/components/maskedInput/old.js delete mode 100644 packages/react-native-ui-lib/src/components/textFieldOld/index.tsx delete mode 100644 packages/react-native-ui-lib/src/helpers/DocsGenerator.js diff --git a/demo/src/screens/DemoScreen.js b/demo/src/screens/DemoScreen.js deleted file mode 100644 index 0b501336d2..0000000000 --- a/demo/src/screens/DemoScreen.js +++ /dev/null @@ -1,96 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import _ from 'lodash'; -import {ScrollView, Switch} from 'react-native'; -import {View, TextField, Text, Badge, Colors} from 'react-native-ui-lib';//eslint-disable-line - -export default class DemoScreen extends Component { - - constructor(props) { - super(props); - - this.state = { - backgroundColor: Colors.red50, - label: '12', - }; - - this.updatePropValue = this.updatePropValue.bind(this); - } - - componentDidMount() { - this.getComponentProps(); - } - - getComponentProps() { - const DemoComponent = this.getComponent(); - return DemoComponent.propTypes; - } - - shouldRenderProp(propId) { - let shouldRender = true; - shouldRender = shouldRender && propId !== 'testID'; - if (this.propsToRender) { - shouldRender = shouldRender && _.includes(this.propsToRender, propId); - } - return shouldRender; - } - - updatePropValue(value, propId, prop) { - let validValue = value; - - if (prop === PropTypes.number) { - validValue = isNaN(value) ? undefined : Number(value); - } - - this.setState({ - [propId]: validValue, - }); - } - - - renderProp(prop, propId) { - if (!this.shouldRenderProp(propId)) return; - - if (PropTypes.bool === prop) { - return ( - - - {propId} - - this.updatePropValue(value, propId, prop)} - /> - - ); - } - - // if (_.includes([PropTypes.string, PropTypes.number], prop)) { - return ( - - this.updatePropValue(text, propId, prop)} - autoCapitalize='none' - /> - - ); - // } - } - - renderComponentSettings() { - const props = this.getComponentProps(); - return ( - - - {_.map(props, (prop, propId) => { - return this.renderProp(prop, propId); - })} - - - ); - } -} diff --git a/demo/src/screens/MainScreen.js b/demo/src/screens/MainScreen.js index e739c1db10..3f49f23529 100644 --- a/demo/src/screens/MainScreen.js +++ b/demo/src/screens/MainScreen.js @@ -1,8 +1,6 @@ import _ from 'lodash'; import React, {Component} from 'react'; -import PropTypes from 'prop-types'; import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native'; -import {ViewPropTypes} from 'deprecated-react-native-prop-types'; import {Navigation} from 'react-native-navigation'; import { Assets, @@ -27,12 +25,6 @@ const chevronIcon = require('../assets/icons/chevronRight.png'); const FADER_SIZE = 50; class MainScreen extends Component { - static propTypes = { - containerStyle: ViewPropTypes.style, - renderItem: PropTypes.func, - pageStyle: ViewPropTypes.style - }; - settingsScreenName = 'unicorn.Settings'; static options() { diff --git a/demo/src/screens/componentScreens/ConversationListScreen.js b/demo/src/screens/componentScreens/ConversationListScreen.js index 02ccf9be33..1c25659a16 100644 --- a/demo/src/screens/componentScreens/ConversationListScreen.js +++ b/demo/src/screens/componentScreens/ConversationListScreen.js @@ -1,5 +1,4 @@ import _ from 'lodash'; -import PropTypes from 'prop-types'; import React, {Component, PureComponent} from 'react'; import {StyleSheet, Alert, FlatList} from 'react-native'; import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line @@ -121,13 +120,6 @@ class ConversationListScreen extends Component { } class ContactItem extends PureComponent { - static propTypes = { - item: PropTypes.object, - index: PropTypes.number, - addRef: PropTypes.func, - onSwipeableWillOpen: PropTypes.func - }; - render() { const {item, index, addRef, onSwipeableWillOpen} = this.props; diff --git a/demo/src/screens/foundationScreens/TypographyScreen.js b/demo/src/screens/foundationScreens/TypographyScreen.js index bda6316dbd..67adfa7c4a 100644 --- a/demo/src/screens/foundationScreens/TypographyScreen.js +++ b/demo/src/screens/foundationScreens/TypographyScreen.js @@ -1,5 +1,4 @@ import _ from 'lodash'; -import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {ScrollView} from 'react-native'; import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib'; @@ -7,10 +6,6 @@ import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black']; export default class TypographyScreen extends Component { - static propTypes = { - color: PropTypes.string - }; - static defaultProps = { color: Colors.grey10 }; diff --git a/demo/src/screens/realExamples/ListActions/ActionsList.js b/demo/src/screens/realExamples/ListActions/ActionsList.js index 720ce21a36..0a9737cb62 100644 --- a/demo/src/screens/realExamples/ListActions/ActionsList.js +++ b/demo/src/screens/realExamples/ListActions/ActionsList.js @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {Animated, LayoutAnimation, PanResponder, I18nManager} from 'react-native'; import {Constants, Assets, Colors, View, TouchableOpacity, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line @@ -17,11 +16,6 @@ const DIRECTIONS = { export default class ActionsList extends Component { static displayName = 'ActionsList'; - - static propTypes = { - item: PropTypes.object, - index: PropTypes.number - } constructor(props) { super(props); diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md index 1a29754cd7..820d60455f 100644 --- a/docs/getting-started/v8.md +++ b/docs/getting-started/v8.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 6 sidebar_label: Migrating v7 -> v8 title: "Migrating v7 -> v8" # path: "/getting-started/v8" @@ -7,6 +7,7 @@ title: "Migrating v7 -> v8" ## `react-native-ui-lib@8.x.x` ## General +Now supports react-native 0.77 `uilib-native` (our native library) has been moved from `dependencies` to `peerDependencies`. Make sure to `pod install` after updating. We do plan on making this optional in the future. diff --git a/docs/getting-started/v9.md b/docs/getting-started/v9.md new file mode 100644 index 0000000000..31dcbda645 --- /dev/null +++ b/docs/getting-started/v9.md @@ -0,0 +1,21 @@ +--- +sidebar_position: 7 +sidebar_label: Migrating v8 -> v9 +title: "Migrating v8 -> v9" +# path: "/getting-started/v9" +--- +## `react-native-ui-lib@9.x.x` + +## General +Now supports react-native 0.78 and React 19 + +## Components + +### MaskedInput +Only the newer version is now available (the `migrate` prop is removed) + +## Utils + +### modifiers +extractOwnProps - removed +extractComponentProps - removed diff --git a/expoDemo/package.json b/expoDemo/package.json index 549f9f6169..d4ad8dd4c8 100644 --- a/expoDemo/package.json +++ b/expoDemo/package.json @@ -36,7 +36,7 @@ "@react-native-community/cli": "15.0.1", "@react-native-community/cli-platform-android": "15.0.1", "@react-native-community/cli-platform-ios": "15.0.1", - "@types/react": "~18.3.24", + "@types/react": "19.0.0", "typescript": "^4.9.5" }, "private": true diff --git a/lib/package.json b/lib/package.json index c16d58f453..0c61b6a28d 100644 --- a/lib/package.json +++ b/lib/package.json @@ -10,8 +10,7 @@ "author": "Ethan Sharabi ", "license": "MIT", "dependencies": { - "lodash": "^4.17.21", - "prop-types": "^15.5.10" + "lodash": "^4.17.21" }, "devDependencies": { "shell-utils": "^1.0.10" diff --git a/package.json b/package.json index e8d7aeaac7..afa75f8de9 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "ios": "yarn workspace react-native-ui-lib ios", "android": "yarn workspace react-native-ui-lib android", "iPad": "yarn workspace react-native-ui-lib iPad", - "test": "yarn lint && yarn workspace react-native-ui-lib test", + "test": "yarn workspace react-native-ui-lib test", + "pretest": "yarn lint", "lint": "eslint packages -c .eslintrc.js --ext .tsx,.ts,.js", "lint:fix": "eslint packages -c .eslintrc.js --fix", "build:dev": "tsc --p tsconfig.dev.json", @@ -40,11 +41,10 @@ "@react-native/metro-config": "0.78.3", "@react-native/typescript-config": "0.78.3", "@shopify/flash-list": "1.7.6", - "@testing-library/react-native": "^11.5.1", - "@types/hoist-non-react-statics": "^3.3.1", + "@testing-library/react-native": "^13.3.3", + "@types/hoist-non-react-statics": "^3.3.7", "@types/jest": "^29.5.13", "@types/lodash": "^4.0.0", - "@types/prop-types": "^15.5.3", "@types/react": "19.0.0", "@types/react-test-renderer": "^19.0.0", "@types/tinycolor2": "^1.4.2", diff --git a/packages/react-native-ui-lib/package.json b/packages/react-native-ui-lib/package.json index f78eaa5d91..462e5cb44c 100644 --- a/packages/react-native-ui-lib/package.json +++ b/packages/react-native-ui-lib/package.json @@ -32,11 +32,9 @@ "color": "^3.1.0", "commons-validator-js": "^1.0.237", "date-fns": "^2.29.3", - "deprecated-react-native-prop-types": "^2.3.0", "hoist-non-react-statics": "^3.0.0", "lodash": "^4.17.21", "memoize-one": "^5.0.5", - "prop-types": "^15.5.10", "react-freeze": "^1.0.0", "react-native-redash": "^12.0.3", "semver": "^5.5.0", @@ -66,11 +64,10 @@ "@react-native/metro-config": "0.78.3", "@react-native/typescript-config": "0.78.3", "@shopify/flash-list": "1.7.6", - "@testing-library/react-native": "^11.5.1", - "@types/hoist-non-react-statics": "^3.3.1", + "@testing-library/react-native": "^13.3.3", + "@types/hoist-non-react-statics": "^3.3.7", "@types/jest": "^29.5.13", "@types/lodash": "^4.0.0", - "@types/prop-types": "^15.5.3", "@types/react": "19.0.0", "@types/react-test-renderer": "19.0.0", "@types/tinycolor2": "^1.4.2", diff --git a/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js b/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js index e527c514f2..310a601b27 100644 --- a/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js +++ b/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js @@ -1,14 +1,9 @@ -import PropTypes from 'prop-types'; import {ThemeManager, Colors, Typography, BorderRadiuses, Spacings} from '../../style'; import * as uut from '../modifiers'; describe('Modifiers', () => { const SampleComponent = () => {}; SampleComponent.displayName = 'SampleComponent'; - SampleComponent.propTypes = { - prop1: PropTypes.string, - prop2: PropTypes.number - }; describe('extractColorValue', () => { it('should return color value according to modifier', () => { @@ -287,24 +282,6 @@ describe('Modifiers', () => { }); }); - // describe('extractOwnProps', () => { - // it('should extract the component props from a props object', () => { - // const props = {color: 'red', topShadow: 1, bottomShadow: 2}; - // expect(MultipleShadow.extractOwnProps(props)).toEqual({ - // topShadow: 1, - // bottomShadow: 2, - // }); - // }); - - // it('should omit props that were required to ignore', () => { - // const props = {color: 'red', topShadow: 1, bottomShadow: 2}; - // expect(MultipleShadow.extractOwnProps(props, 'topShadow')).toEqual({ - // bottomShadow: 2, - // }); - // expect(MultipleShadow.extractOwnProps(props, ['topShadow', 'bottomShadow'])).toEqual({}); - // }); - // }); - describe('extractModifiersProps', () => { it('should return all modifiers props', () => { expect(uut.extractModifierProps({ @@ -348,24 +325,6 @@ describe('Modifiers', () => { }); }); - describe('extractOwnProps', () => { - it('should extract the component props from a props object', () => { - const props = {color: 'red', prop1: 'text', prop2: 2}; - expect(uut.extractOwnProps.bind(SampleComponent)(props)).toEqual({ - prop1: 'text', - prop2: 2 - }); - }); - - it('should omit props that were required to ignore', () => { - const props = {color: 'red', prop1: 'text', prop2: 2}; - expect(uut.extractOwnProps.bind(SampleComponent)(props, 'prop1')).toEqual({ - prop2: 2 - }); - expect(uut.extractOwnProps.bind(SampleComponent)(props, ['prop1', 'prop2'])).toEqual({}); - }); - }); - describe('getThemeProps', () => { beforeEach(() => { ThemeManager.setComponentTheme('SampleComponent', undefined); diff --git a/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx b/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx index 26c1704a89..bcdb696f42 100644 --- a/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx +++ b/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx @@ -55,7 +55,7 @@ function asBaseComponent(WrappedCompone }; static getDerivedStateFromError(error: any) { - UIComponent.defaultProps?.onError?.(error, WrappedComponent.defaultProps); + UIComponent.defaultProps?.onError?.(error); return {error: true}; } @@ -80,6 +80,7 @@ function asBaseComponent(WrappedCompone hoistStatics(BaseComponent, WrappedComponent); BaseComponent.displayName = WrappedComponent.displayName; BaseComponent.propTypes = WrappedComponent.propTypes; + // @ts-expect-error class component have defaultProps and functions do not and so should not be affected by this BaseComponent.defaultProps = WrappedComponent.defaultProps; const ThemeContext = ThemeManager.getThemeContext(); if (ThemeContext) { diff --git a/packages/react-native-ui-lib/src/commons/baseComponent.tsx b/packages/react-native-ui-lib/src/commons/baseComponent.tsx index 180129297c..73bdad4672 100644 --- a/packages/react-native-ui-lib/src/commons/baseComponent.tsx +++ b/packages/react-native-ui-lib/src/commons/baseComponent.tsx @@ -1,5 +1,4 @@ import React, {ComponentType} from 'react'; -// import PropTypes from 'prop-types'; import {StyleSheet} from 'react-native'; import _ from 'lodash'; import {Colors} from '../style'; @@ -8,17 +7,9 @@ import * as Modifiers from './modifiers'; export default function baseComponent(usePure: boolean): ComponentType { const parent = usePure ? React.PureComponent : React.Component; class BaseComponent extends parent { - // static propTypes = { - // ..._.mapValues(Typography, () => PropTypes.bool), - // ..._.mapValues(Colors, () => PropTypes.bool), - // useNativeDriver: PropTypes.bool, - // }; - styles: any; view: any; - static extractOwnProps = Modifiers.extractOwnProps; - constructor(props: any) { super(props); if (!this.styles) { diff --git a/packages/react-native-ui-lib/src/commons/forwardRef.tsx b/packages/react-native-ui-lib/src/commons/forwardRef.tsx index 38b08d8bfa..526b7469c8 100644 --- a/packages/react-native-ui-lib/src/commons/forwardRef.tsx +++ b/packages/react-native-ui-lib/src/commons/forwardRef.tsx @@ -17,10 +17,7 @@ export default function forwardRef(WrappedC const ForwardedComponent = React.forwardRef(forwardRef); hoistStatics(ForwardedComponent, WrappedComponent); - //@ts-ignore ForwardedComponent.displayName = WrappedComponent.displayName; - //@ts-ignore - ForwardedComponent.defaultProps = WrappedComponent.defaultProps; return ForwardedComponent as typeof ForwardedComponent & STATICS; } diff --git a/packages/react-native-ui-lib/src/commons/modifiers.ts b/packages/react-native-ui-lib/src/commons/modifiers.ts index 1815b21305..7117654191 100644 --- a/packages/react-native-ui-lib/src/commons/modifiers.ts +++ b/packages/react-native-ui-lib/src/commons/modifiers.ts @@ -338,27 +338,6 @@ export function extractModifierProps(props: Dictionary) { return modifierProps; } -/** - * TODO: - * @deprecated switch to Modifiers#extractComponentProps - */ -export function extractOwnProps(props: Dictionary, ignoreProps: string[]) { - //@ts-ignore - const ownPropTypes = this.propTypes; - const ownProps = _.flow((props: Dictionary) => _.pickBy(props, (_value, key) => _.includes(Object.keys(ownPropTypes), key)), - props => _.omit(props, ignoreProps))(props); - - return ownProps; -} - -export function extractComponentProps(component: any, props: Dictionary, ignoreProps: string[] = []) { - const componentPropTypes = component.propTypes; - const componentProps = _.flow((props: Dictionary) => _.pickBy(props, (_value, key) => _.includes(Object.keys(componentPropTypes), key)), - props => _.omit(props, ignoreProps))(props); - - return componentProps; -} - export function getComponentName(componentDisplayName: string) { //@ts-ignore return componentDisplayName || this.displayName || this.constructor.displayName || this.constructor.name; diff --git a/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx b/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx index 2bdc77ebdc..8cd4e34fbb 100644 --- a/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx +++ b/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx @@ -69,8 +69,6 @@ function withScrollEnabler(WrappedComponent: React.Componen hoistStatics(ScrollEnabler, WrappedComponent); ScrollEnabler.displayName = WrappedComponent.displayName; - //@ts-ignore - ScrollEnabler.defaultProps = WrappedComponent.defaultProps; return forwardRef(ScrollEnabler) as any; } diff --git a/packages/react-native-ui-lib/src/commons/withScrollReached.tsx b/packages/react-native-ui-lib/src/commons/withScrollReached.tsx index ea1da67579..56fde6f8ef 100644 --- a/packages/react-native-ui-lib/src/commons/withScrollReached.tsx +++ b/packages/react-native-ui-lib/src/commons/withScrollReached.tsx @@ -92,8 +92,6 @@ function withScrollReached(WrappedComponent: React.Componen hoistStatics(ScrollReachedDetector, WrappedComponent); ScrollReachedDetector.displayName = WrappedComponent.displayName; - //@ts-ignore - ScrollReachedDetector.defaultProps = WrappedComponent.defaultProps; return forwardRef(ScrollReachedDetector) as any; } diff --git a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js index 0a456af5d1..5ecdb2e7d4 100644 --- a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js +++ b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js @@ -1,6 +1,5 @@ import _ from 'lodash'; import {Component} from 'react'; -import PropTypes from 'prop-types'; import ReactNative, {DeviceEventEmitter, Keyboard} from 'react-native'; export default class KeyboardAwareBase extends Component { @@ -22,12 +21,6 @@ export default class KeyboardAwareBase extends Component { this._addKeyboardEventListeners(); } - static propTypes = { - startScrolledToBottom: PropTypes.bool, - scrollToBottomOnKBShow: PropTypes.bool, - scrollToInputAdditionalOffset: PropTypes.number - }; - static defaultProps = { startScrolledToBottom: false, scrollToBottomOnKBShow: false, diff --git a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js index 55b4bb6ed3..ca59e294c3 100644 --- a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js +++ b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {FlatList} from 'react-native'; import KeyboardAwareBase from './KeyboardAwareBase'; @@ -10,11 +9,6 @@ import KeyboardAwareBase from './KeyboardAwareBase'; export default class KeyboardAwareFlatList extends KeyboardAwareBase { static displayName = 'KeyboardAwareFlatList'; - static PropTypes = { - getTextInputRefs: PropTypes.func, - onScroll: PropTypes.func - }; - static defaultProps = { ...KeyboardAwareBase.defaultProps, getTextInputRefs: () => { diff --git a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js index 5bfa0518b6..9dd8dbba1b 100644 --- a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js +++ b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {ScrollView} from 'react-native'; import KeyboardAwareBase from './KeyboardAwareBase'; @@ -10,11 +9,6 @@ import KeyboardAwareBase from './KeyboardAwareBase'; export default class KeyboardAwareScrollView extends KeyboardAwareBase { static displayName = 'KeyboardAwareScrollView'; - static PropTypes = { - getTextInputRefs: PropTypes.func, - onScroll: PropTypes.func - }; - static defaultProps = { ...KeyboardAwareBase.defaultProps, getTextInputRefs: () => { diff --git a/packages/react-native-ui-lib/src/components/animatedScanner/index.js b/packages/react-native-ui-lib/src/components/animatedScanner/index.js index 3fc6291f7c..bf480c76ae 100644 --- a/packages/react-native-ui-lib/src/components/animatedScanner/index.js +++ b/packages/react-native-ui-lib/src/components/animatedScanner/index.js @@ -1,8 +1,6 @@ import _ from 'lodash'; -import PropTypes from 'prop-types'; import React from 'react'; import {StyleSheet, Animated} from 'react-native'; -import {ViewPropTypes} from 'deprecated-react-native-prop-types'; import {Colors} from '../../style'; import {BaseComponent} from '../../commons'; import View from '../../components/view'; @@ -16,41 +14,6 @@ import View from '../../components/view'; */ export default class AnimatedScanner extends BaseComponent { static displayName = 'AnimatedScanner'; - static propTypes = { - /** - * animated value between 0 and 100 - */ - // progress: PropTypes.object, - progress: PropTypes.number, - /** - * Duration of current break (can be change between breaks) - */ - duration: PropTypes.number, - /** - * scanner opacity - */ - opacity: PropTypes.number, - /** - * scanner background color - */ - backgroundColor: PropTypes.string, - /** - * breakpoint callback - ({progress, isDone}) => {} - */ - onBreakpoint: PropTypes.func, - /** - * should hide the scanner line - */ - hideScannerLine: PropTypes.bool, - /** - * the container style - */ - containerStyle: ViewPropTypes.style, - /** - * Used as a testing identifier - */ - testID: PropTypes.string - }; static defaultProps = { progress: 0, diff --git a/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js b/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js index 722978bfa2..61b6820f48 100644 --- a/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js +++ b/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js @@ -1,5 +1,5 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import {render} from '@testing-library/react-native'; import Button from '../index'; import View from '../../view'; import {Colors, ThemeManager} from '../../../style'; @@ -12,54 +12,54 @@ describe('Button', () => { }); it('should render default button', () => { - const tree = renderer.create(