diff --git a/native/account/log-in-panel.react.js b/native/account/log-in-panel.react.js --- a/native/account/log-in-panel.react.js +++ b/native/account/log-in-panel.react.js @@ -24,7 +24,7 @@ import PasswordInput from './password-input.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import type { KeyPressEvent } from '../types/react-native.js'; +import type { TextInputKeyPressEvent } from '../types/react-native.js'; import type { ViewStyle } from '../types/styles.js'; import { appOutOfDateAlertDetails, @@ -191,7 +191,7 @@ this.props.logInState.setState({ usernameInputText: text.trim() }); }; - onUsernameKeyPress: (event: KeyPressEvent) => void = event => { + onUsernameKeyPress: (event: TextInputKeyPressEvent) => void = event => { const { key } = event.nativeEvent; if ( key.length > 1 && diff --git a/native/account/registration/password-selection.react.js b/native/account/registration/password-selection.react.js --- a/native/account/registration/password-selection.react.js +++ b/native/account/registration/password-selection.react.js @@ -16,7 +16,7 @@ AvatarSelectionRouteName, } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; -import type { KeyPressEvent } from '../../types/react-native.js'; +import type { TextInputKeyPressEvent } from '../../types/react-native.js'; import AuthButtonContainer from '../auth-components/auth-button-container.react.js'; import AuthContainer from '../auth-components/auth-container.react.js'; import AuthContentContainer from '../auth-components/auth-content-container.react.js'; @@ -123,7 +123,7 @@ const iosPasswordBeingAutoFilled = React.useRef(false); const confirmPasswordEmpty = confirmPassword.length === 0; const onPasswordKeyPress = React.useCallback( - (event: KeyPressEvent) => { + (event: TextInputKeyPressEvent) => { const { key } = event.nativeEvent; // On iOS, paste doesn't trigger onKeyPress, but password autofill does // Password autofill calls onKeyPress with `key` set to the whole password diff --git a/native/account/registration/registration-text-input.react.js b/native/account/registration/registration-text-input.react.js --- a/native/account/registration/registration-text-input.react.js +++ b/native/account/registration/registration-text-input.react.js @@ -8,7 +8,10 @@ useColors, useKeyboardAppearance, } from '../../themes/colors.js'; -import type { FocusEvent, BlurEvent } from '../../types/react-native.js'; +import type { + TextInputFocusEvent, + TextInputBlurEvent, +} from '../../types/react-native.js'; type Props = React.ElementConfig; @@ -27,14 +30,14 @@ const [focused, setFocused] = React.useState(false); const ourOnFocus = React.useCallback( - (event: FocusEvent) => { + (event: TextInputFocusEvent) => { setFocused(true); onFocus?.(event); }, [onFocus], ); const ourOnBlur = React.useCallback( - (event: BlurEvent) => { + (event: TextInputBlurEvent) => { setFocused(false); onBlur?.(event); }, diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js --- a/native/calendar/entry.react.js +++ b/native/calendar/entry.react.js @@ -81,7 +81,7 @@ import { ThreadPickerModalRouteName } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { colors, useStyles } from '../themes/colors.js'; -import type { LayoutEvent } from '../types/react-native.js'; +import type { LayoutChangeEvent } from '../types/react-native.js'; import Alert from '../utils/alert.js'; import { waitForInteractions } from '../utils/timers.js'; @@ -580,7 +580,7 @@ this.dispatchSave(this.props.entryInfo.id, this.state.text); }; - onTextContainerLayout: (event: LayoutEvent) => void = event => { + onTextContainerLayout: (event: LayoutChangeEvent) => void = event => { this.guardedSetState({ height: Math.ceil(event.nativeEvent.layout.height), }); diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js --- a/native/chat/chat-input-bar.react.js +++ b/native/chat/chat-input-bar.react.js @@ -105,7 +105,10 @@ } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { useColors, useStyles } from '../themes/colors.js'; -import type { ImagePasteEvent, LayoutEvent } from '../types/react-native.js'; +import type { + ImagePasteEvent, + LayoutChangeEvent, +} from '../types/react-native.js'; import { AnimatedView, type ViewStyle } from '../types/styles.js'; import Alert from '../utils/alert.js'; import { exitEditAlert } from '../utils/edit-messages-utils.js'; @@ -249,7 +252,7 @@ type ConnectedChatInputBarBaseProps = { ...BaseProps, - +onInputBarLayout?: (event: LayoutEvent) => mixed, + +onInputBarLayout?: (event: LayoutChangeEvent) => mixed, +openCamera: () => mixed, +navigation?: ChatNavigationProp<'MessageList'>, }; @@ -1197,7 +1200,7 @@ function DummyChatInputBar(props: DummyChatInputBarProps): React.Node { const { onHeightMeasured, ...restProps } = props; const onInputBarLayout = React.useCallback( - (event: LayoutEvent) => { + (event: LayoutChangeEvent) => { const { height } = event.nativeEvent.layout; onHeightMeasured(height); }, @@ -1267,7 +1270,7 @@ invariant(chatContext, 'should be set'); const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext; const onInputBarLayout = React.useCallback( - (event: LayoutEvent) => { + (event: LayoutChangeEvent) => { const { height } = event.nativeEvent.layout; setChatInputBarHeight(threadInfo.id, height); }, diff --git a/native/chat/message.react.js b/native/chat/message.react.js --- a/native/chat/message.react.js +++ b/native/chat/message.react.js @@ -21,7 +21,7 @@ import type { NavigationRoute } from '../navigation/route-names.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; import { type VerticalBounds } from '../types/layout-types.js'; -import type { LayoutEvent } from '../types/react-native.js'; +import type { LayoutChangeEvent } from '../types/react-native.js'; type Props = { +item: ChatMessageInfoItemWithHeight, @@ -64,7 +64,7 @@ ); const onLayout = React.useCallback( - (event: LayoutEvent) => { + (event: LayoutChangeEvent) => { if (focused) { return; } diff --git a/native/chat/settings/thread-settings-description.react.js b/native/chat/settings/thread-settings-description.react.js --- a/native/chat/settings/thread-settings-description.react.js +++ b/native/chat/settings/thread-settings-description.react.js @@ -35,8 +35,8 @@ import { useSelector } from '../../redux/redux-utils.js'; import { type Colors, useColors, useStyles } from '../../themes/colors.js'; import type { - ContentSizeChangeEvent, - LayoutEvent, + TextInputContentSizeChangeEvent, + LayoutChangeEvent, } from '../../types/react-native.js'; import { unknownErrorAlertDetails } from '../../utils/alert-messages.js'; import Alert from '../../utils/alert.js'; @@ -216,11 +216,11 @@ this.textInput = textInput; }; - onLayoutText = (event: LayoutEvent) => { + onLayoutText = (event: LayoutChangeEvent) => { this.props.setDescriptionTextHeight(event.nativeEvent.layout.height); }; - onTextInputContentSizeChange = (event: ContentSizeChangeEvent) => { + onTextInputContentSizeChange = (event: TextInputContentSizeChangeEvent) => { this.props.setDescriptionTextHeight(event.nativeEvent.contentSize.height); }; diff --git a/native/components/clearable-text-input.react.ios.js b/native/components/clearable-text-input.react.ios.js --- a/native/components/clearable-text-input.react.ios.js +++ b/native/components/clearable-text-input.react.ios.js @@ -6,7 +6,7 @@ import type { ClearableTextInputProps } from './clearable-text-input.js'; import TextInput from './text-input.react.js'; -import type { KeyPressEvent } from '../types/react-native.js'; +import type { TextInputKeyPressEvent } from '../types/react-native.js'; type State = { +textInputKey: number, @@ -80,7 +80,7 @@ this.props.onChangeText(newValue); } - onOldInputKeyPress: (event: KeyPressEvent) => void = event => { + onOldInputKeyPress: (event: TextInputKeyPressEvent) => void = event => { const { key } = event.nativeEvent; if (this.lastKeyPressed && this.lastKeyPressed.length > key.length) { return; diff --git a/native/components/keyboard-avoiding-view.react.js b/native/components/keyboard-avoiding-view.react.js --- a/native/components/keyboard-avoiding-view.react.js +++ b/native/components/keyboard-avoiding-view.react.js @@ -16,8 +16,8 @@ } from '../keyboard/keyboard-state.js'; import type { ScreenRect } from '../keyboard/keyboard.js'; import type { - Layout, - LayoutEvent, + LayoutRectangle, + LayoutChangeEvent, EventSubscription, KeyboardEvent, } from '../types/react-native.js'; @@ -50,7 +50,7 @@ bottom: 0, }; subscriptions: EventSubscription[] = []; - viewFrame: ?Layout; + viewFrame: ?LayoutRectangle; keyboardFrame: ?ScreenRect; defaultViewFrameHeight = 0; waitingForLayout: Array<() => mixed> = []; @@ -128,7 +128,7 @@ return Math.max(viewFrame.y + viewFrame.height - keyboardFrame.screenY, 0); } - onLayout = (event: LayoutEvent) => { + onLayout = (event: LayoutChangeEvent) => { this.viewFrame = event.nativeEvent.layout; const { keyboardState } = this.props; diff --git a/native/components/node-height-measurer.react.js b/native/components/node-height-measurer.react.js --- a/native/components/node-height-measurer.react.js +++ b/native/components/node-height-measurer.react.js @@ -9,7 +9,10 @@ addLifecycleListener, getCurrentLifecycleState, } from '../lifecycle/lifecycle.js'; -import type { LayoutEvent, EventSubscription } from '../types/react-native.js'; +import type { + LayoutChangeEvent, + EventSubscription, +} from '../types/react-native.js'; const measureBatchSize = 50; @@ -466,7 +469,7 @@ } } - onContainerLayout: (event: LayoutEvent) => void = event => { + onContainerLayout: (event: LayoutChangeEvent) => void = event => { const { width, height } = event.nativeEvent.layout; if (width > height) { // We currently only use NodeHeightMeasurer on interfaces that are @@ -485,7 +488,11 @@ } }; - onDummyLayout(measureKey: string, iteration: number, event: LayoutEvent) { + onDummyLayout( + measureKey: string, + iteration: number, + event: LayoutChangeEvent, + ) { if (iteration !== this.state.iteration) { return; } @@ -499,7 +506,7 @@ const dummies = currentlyMeasuring.map(({ measureKey, dummy }) => { const { children } = dummy.props; const style = [dummy.props.style, styles.dummy]; - const onLayout = (event: LayoutEvent) => + const onLayout = (event: LayoutChangeEvent) => this.onDummyLayout(measureKey, iteration, event); const node = React.cloneElement(dummy, { style, diff --git a/native/components/selectable-text-input.react.ios.js b/native/components/selectable-text-input.react.ios.js --- a/native/components/selectable-text-input.react.ios.js +++ b/native/components/selectable-text-input.react.ios.js @@ -11,7 +11,7 @@ SelectableTextInputProps, SelectableTextInputRef, } from './selectable-text-input.js'; -import type { SelectionChangeEvent } from '../types/react-native.js'; +import type { TextInputSelectionChangeEvent } from '../types/react-native.js'; const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput( props: SelectableTextInputProps, @@ -101,7 +101,7 @@ [sendPendingSelectionEvent], ); const onSelectionChangeOverride = React.useCallback( - (event: SelectionChangeEvent) => { + (event: TextInputSelectionChangeEvent) => { if (numNextSelectionEventsToIgnoreRef.current <= 1) { // If after this tick we will start allowing selection events through, // then we will drop control of selection diff --git a/native/components/selectable-text-input.react.js b/native/components/selectable-text-input.react.js --- a/native/components/selectable-text-input.react.js +++ b/native/components/selectable-text-input.react.js @@ -8,7 +8,7 @@ SelectableTextInputProps, SelectableTextInputRef, } from './selectable-text-input.js'; -import type { SelectionChangeEvent } from '../types/react-native.js'; +import type { TextInputSelectionChangeEvent } from '../types/react-native.js'; const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput( props: SelectableTextInputProps, @@ -55,7 +55,7 @@ // - To prevent render cycles where the data isn't in sync, we defer text // change events until the corresponding selection event comes in const onSelectionChangeOverride = React.useCallback( - (event: SelectionChangeEvent) => { + (event: TextInputSelectionChangeEvent) => { setControlSelection(false); onSelectionChange?.(event); onUpdateSyncedSelectionData({ diff --git a/native/components/tag-input.react.js b/native/components/tag-input.react.js --- a/native/components/tag-input.react.js +++ b/native/components/tag-input.react.js @@ -17,9 +17,9 @@ import { useSelector } from '../redux/redux-utils.js'; import { useColors, type Colors } from '../themes/colors.js'; import type { - LayoutEvent, - KeyPressEvent, - BlurEvent, + LayoutChangeEvent, + TextInputKeyPressEvent, + TextInputBlurEvent, } from '../types/react-native.js'; import type { ViewStyle, TextStyle } from '../types/styles.js'; @@ -154,7 +154,7 @@ } } - measureWrapper: (event: LayoutEvent) => void = event => { + measureWrapper: (event: LayoutChangeEvent) => void = event => { const wrapperWidth = event.nativeEvent.layout.width; if (wrapperWidth !== this.state.wrapperWidth) { this.setState({ wrapperWidth }); @@ -166,7 +166,7 @@ this.props.onChangeText(text); }; - onBlur: (event: BlurEvent) => void = event => { + onBlur: (event: TextInputBlurEvent) => void = event => { invariant(Platform.OS === 'ios', 'only iOS gets text on TextInput.onBlur'); const nativeEvent: $ReadOnly<{ target: number, @@ -175,7 +175,7 @@ this.onChangeText(nativeEvent.text); }; - onKeyPress: (event: KeyPressEvent) => void = event => { + onKeyPress: (event: TextInputKeyPressEvent) => void = event => { const { lastChange } = this; let { text } = this.props; if ( @@ -331,7 +331,7 @@ this.setState({ contentHeight: h }, callback); }; - onScrollViewLayout: (event: LayoutEvent) => void = event => { + onScrollViewLayout: (event: LayoutChangeEvent) => void = event => { this.scrollViewHeight = event.nativeEvent.layout.height; if (this.scrollToBottomAfterNextScrollViewLayout) { this.scrollToBottom(); @@ -404,7 +404,7 @@ this.props.removeIndex(this.props.index); }; - onLayoutLastTag = (event: LayoutEvent) => { + onLayoutLastTag = (event: LayoutChangeEvent) => { const layout = event.nativeEvent.layout; this.curPos = layout.width + layout.x; if (this.props.isLastTag) { diff --git a/native/media/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js --- a/native/media/media-gallery-keyboard.react.js +++ b/native/media/media-gallery-keyboard.react.js @@ -33,7 +33,7 @@ import { useSelector } from '../redux/redux-utils.js'; import { type Colors, useColors, useStyles } from '../themes/colors.js'; import type { - LayoutEvent, + LayoutChangeEvent, ViewableItemsChange, } from '../types/react-native.js'; import type { ViewStyle } from '../types/styles.js'; @@ -559,7 +559,7 @@ this.flatList = flatList; }; - onContainerLayout = (event: LayoutEvent) => { + onContainerLayout = (event: LayoutChangeEvent) => { this.guardedSetState({ containerHeight: event.nativeEvent.layout.height }); }; diff --git a/native/navigation/tab-bar.react.js b/native/navigation/tab-bar.react.js --- a/native/navigation/tab-bar.react.js +++ b/native/navigation/tab-bar.react.js @@ -20,7 +20,7 @@ } from '../keyboard/keyboard-state.js'; import { updateDimensionsActiveType } from '../redux/action-types.js'; import { useSelector } from '../redux/redux-utils.js'; -import type { LayoutEvent } from '../types/react-native.js'; +import type { LayoutChangeEvent } from '../types/react-native.js'; const tabBarAnimationDuration = 200; @@ -83,7 +83,7 @@ const [tabBarHeight, setTabBarHeight] = React.useState(0); const insets = useSafeArea(); const handleLayout = React.useCallback( - (e: LayoutEvent) => { + (e: LayoutChangeEvent) => { const rawHeight = Math.round(e.nativeEvent.layout.height); if (rawHeight > 100 || rawHeight <= 0) { return; diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js --- a/native/tooltip/tooltip.react.js +++ b/native/tooltip/tooltip.react.js @@ -36,7 +36,7 @@ type VerticalBounds, type LayoutCoordinates, } from '../types/layout-types.js'; -import type { LayoutEvent } from '../types/react-native.js'; +import type { LayoutChangeEvent } from '../types/react-native.js'; import { AnimatedView, type ViewStyle, @@ -387,7 +387,7 @@ }, [styles.icon]); const onTooltipContainerLayout = React.useCallback( - (event: LayoutEvent) => { + (event: LayoutChangeEvent) => { const { x, width } = params.initialCoordinates; const extraLeftSpace = x; diff --git a/native/types/react-native.js b/native/types/react-native.js --- a/native/types/react-native.js +++ b/native/types/react-native.js @@ -7,21 +7,19 @@ import type { ____ViewStyle_Internal } from 'react-native/Libraries/StyleSheet/StyleSheetTypes.js'; export type { - Layout, - LayoutEvent, + LayoutRectangle, + LayoutChangeEvent, ScrollEvent, } from 'react-native/Libraries/Types/CoreEventTypes.js'; export type { - ContentSizeChangeEvent, - KeyPressEvent, - FocusEvent, - BlurEvent, - SelectionChangeEvent, + TextInputContentSizeChangeEvent, + TextInputKeyPressEvent, + TextInputFocusEvent, + TextInputBlurEvent, + TextInputSelectionChangeEvent, } from 'react-native/Libraries/Components/TextInput/TextInput.js'; -export type { NativeMethods } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes.js'; - export type { KeyboardEvent } from 'react-native/Libraries/Components/Keyboard/Keyboard.js'; export type { EventSubscription } from 'react-native/Libraries/vendor/emitter/EventEmitter.js';