diff --git a/src/components/scenes/InputTesterScene.tsx b/src/components/scenes/InputTesterScene.tsx index bcd8a33e8a7..b73e7bfb30f 100644 --- a/src/components/scenes/InputTesterScene.tsx +++ b/src/components/scenes/InputTesterScene.tsx @@ -29,6 +29,8 @@ export function InputTesterScene() { const [filledTextInputValue2, setFilledTextInputValue2] = useState('') const [filledTextInputValue3, setFilledTextInputValue3] = useState('') const [filledTextInputValue4, setFilledTextInputValue4] = useState('') + const [filledTextInputValue5, setFilledTextInputValue5] = useState('') + const [filledTextInputValue6, setFilledTextInputValue6] = useState('') const walletId = selectedWallet?.wallet.id ?? '' const tokenId = selectedWallet?.tokenId ?? null const exchangedFlipInputRef = React.useRef(null) @@ -80,6 +82,25 @@ export function InputTesterScene() { return ( + + void @@ -124,6 +125,7 @@ export const FilledTextInput = React.forwardRef {placeholder == null ? null : ( - + {placeholder} @@ -239,6 +241,7 @@ export const FilledTextInput = React.forwardRef }>(theme const androidVShift = isAndroid ? rem / 16 : 0 return [ { + // backgroundColor: 'green', position: 'absolute', top: androidVShift, left: rem * 0.4, @@ -432,8 +437,10 @@ const PlaceholderText = styled(Animated.Text)<{ focusAnimation: SharedValue scale: SharedValue shift: SharedValue -}>(theme => ({ disableAnimation, focusAnimation, scale, shift }) => { - const fontSizeBase = theme.rem(scale.value) + textsizeRem?: number +}>(theme => ({ disableAnimation, focusAnimation, scale, shift, textsizeRem }) => { + const fontSizeBase = theme.rem(textsizeRem ?? scale.value) + const fontSizeScaled = theme.rem(scale.value) * 0.75 const interpolatePlaceholderTextColor = useAnimatedColorInterpolateFn( theme.textInputPlaceholderColor, theme.textInputPlaceholderColorFocused, @@ -449,7 +456,7 @@ const PlaceholderText = styled(Animated.Text)<{ useAnimatedStyle(() => { return { color: interpolatePlaceholderTextColor(focusAnimation, disableAnimation), - fontSize: interpolate(shift.value, [0, 1], [fontSizeBase, 0.75 * fontSizeBase]) + fontSize: interpolate(shift.value, [0, 1], [fontSizeBase, fontSizeScaled]) } }) ] @@ -459,8 +466,9 @@ const StyledAnimatedTextInput = styledWithRef(AnimatedTextInput)<{ disableAnimation: SharedValue focusAnimation: SharedValue scale: SharedValue -}>(theme => ({ disableAnimation, focusAnimation, scale }) => { - const rem = theme.rem(1) + textsizeRem?: number +}>(theme => ({ disableAnimation, focusAnimation, scale, textsizeRem }) => { + const rem = theme.rem(textsizeRem ?? 1) const interpolateTextColor = useAnimatedColorInterpolateFn(theme.textInputTextColor, theme.textInputTextColorFocused, theme.textInputTextColorDisabled) return [ @@ -484,8 +492,9 @@ const StyledNumericInput = styledWithRef(NumericInput)<{ disableAnimation: SharedValue focusAnimation: SharedValue scale: SharedValue -}>(theme => ({ disableAnimation, focusAnimation, scale }) => { - const rem = theme.rem(1) + textsizeRem?: number +}>(theme => ({ disableAnimation, focusAnimation, textsizeRem, scale }) => { + const rem = theme.rem(textsizeRem ?? 1) const interpolateTextColor = useAnimatedColorInterpolateFn(theme.textInputTextColor, theme.textInputTextColorFocused, theme.textInputTextColorDisabled) return [