diff --git a/native/account/registration/registration-text-input.react.js b/native/account/registration/registration-text-input.react.js index 517833ee0..ba4373afd 100644 --- a/native/account/registration/registration-text-input.react.js +++ b/native/account/registration/registration-text-input.react.js @@ -1,80 +1,95 @@ // @flow import * as React from 'react'; import { TextInput } from 'react-native'; -import { useStyles, useColors } from '../../themes/colors.js'; +import { + useStyles, + useColors, + useKeyboardAppearance, +} from '../../themes/colors.js'; type Props = React.ElementConfig; function ForwardedRegistrationTextInput(props: Props, ref): React.Node { - const { onFocus, onBlur, style, placeholderTextColor, ...rest } = props; + const { + onFocus, + onBlur, + style, + placeholderTextColor, + keyboardAppearance, + ...rest + } = props; const [focused, setFocused] = React.useState(false); const ourOnFocus = React.useCallback( event => { setFocused(true); onFocus?.(event); }, [onFocus], ); const ourOnBlur = React.useCallback( event => { 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;