diff --git a/native/account/registration/registration-text-input.react.js b/native/account/registration/registration-text-input.react.js index a92d911d6..d1e5c082f 100644 --- a/native/account/registration/registration-text-input.react.js +++ b/native/account/registration/registration-text-input.react.js @@ -1,100 +1,101 @@ // @flow import * as React from 'react'; import { TextInput } from 'react-native'; import type { ReactRefSetter } from 'lib/types/react-types.js'; import { useStyles, useColors, useKeyboardAppearance, } from '../../themes/colors.js'; +import type { FocusEvent, BlurEvent } from '../../types/react-native.js'; type Props = React.ElementConfig; function ForwardedRegistrationTextInput( props: Props, ref: ReactRefSetter>, ): React.Node { const { onFocus, onBlur, style, placeholderTextColor, keyboardAppearance, ...rest } = props; const [focused, setFocused] = React.useState(false); const ourOnFocus = React.useCallback( - event => { + (event: FocusEvent) => { setFocused(true); onFocus?.(event); }, [onFocus], ); const ourOnBlur = React.useCallback( - event => { + (event: BlurEvent) => { setFocused(false); onBlur?.(event); }, [onBlur], ); const styles = useStyles(unboundStyles); const ourStyle = React.useMemo( () => focused ? [styles.textInput, styles.focusedTextInput, style] : [styles.textInput, style], [focused, styles.textInput, styles.focusedTextInput, style], ); const colors = useColors(); const ourPlaceholderTextColor = placeholderTextColor ?? colors.panelSecondaryForegroundBorder; const themeKeyboardAppearance = useKeyboardAppearance(); const ourKeyboardAppearance = keyboardAppearance ?? themeKeyboardAppearance; return ( ); } const unboundStyles = { textInput: { color: 'panelForegroundLabel', borderColor: 'panelSecondaryForegroundBorder', borderWidth: 1, borderRadius: 4, padding: 12, }, focusedTextInput: { borderColor: 'panelForegroundLabel', }, }; const RegistrationTextInput: React.AbstractComponent< Props, React.ElementRef, > = React.forwardRef>( ForwardedRegistrationTextInput, ); RegistrationTextInput.displayName = 'RegistrationTextInput'; const MemoizedRegistrationTextInput: typeof RegistrationTextInput = React.memo< Props, React.ElementRef, >(RegistrationTextInput); export default MemoizedRegistrationTextInput; diff --git a/native/types/react-native.js b/native/types/react-native.js index 93eb7ca5f..fd9e16a10 100644 --- a/native/types/react-native.js +++ b/native/types/react-native.js @@ -1,33 +1,34 @@ // @flow import type ReactNativeAnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedValue.js'; import type { ViewToken } from 'react-native/Libraries/Lists/ViewabilityHelper.js'; export type { Layout, LayoutEvent, ScrollEvent, } from 'react-native/Libraries/Types/CoreEventTypes.js'; export type { ContentSizeChangeEvent, KeyPressEvent, + FocusEvent, BlurEvent, SelectionChangeEvent, } 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'; export type AnimatedValue = ReactNativeAnimatedValue; export type ViewableItemsChange = { +viewableItems: ViewToken[], +changed: ViewToken[], ... }; export type EmitterSubscription = { +remove: () => void, ... };