@klyftig/mobile-ui 1.3.8 → 1.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useCallback, memo } from 'react';
|
|
1
|
+
import React, { useState, useCallback, useEffect, useRef, memo } from 'react';
|
|
2
2
|
import { View, TextInput as RNTextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
|
3
3
|
import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
|
|
4
4
|
import { useTheme } from '../hooks/useTheme';
|
|
@@ -60,6 +60,21 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
|
|
|
60
60
|
const { colors } = useTheme();
|
|
61
61
|
const [isSecure, setIsSecure] = useState(secureTextEntry);
|
|
62
62
|
const [isFocused, setIsFocused] = useState(false);
|
|
63
|
+
const inputRef = useRef<RNTextInput>(null);
|
|
64
|
+
|
|
65
|
+
// Reinforces the `selection` prop below: on Android, setting `selection`
|
|
66
|
+
// on the SAME render as a `value` that's longer than the field's width is
|
|
67
|
+
// often ignored — the native EditText hasn't measured/laid out the text
|
|
68
|
+
// yet, so it doesn't know where to scroll to reveal position 0. Re-asserting
|
|
69
|
+
// via setNativeProps a tick after layout commits (not the same frame)
|
|
70
|
+
// reliably forces the scroll where the declarative prop alone doesn't.
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (isFocused || multiline) return;
|
|
73
|
+
const id = setTimeout(() => {
|
|
74
|
+
inputRef.current?.setNativeProps({ selection: SELECTION_START });
|
|
75
|
+
}, 0);
|
|
76
|
+
return () => clearTimeout(id);
|
|
77
|
+
}, [value, isFocused, multiline]);
|
|
63
78
|
|
|
64
79
|
const handleFocus = useCallback(() => {
|
|
65
80
|
setIsFocused(true);
|
|
@@ -92,6 +107,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
|
|
|
92
107
|
<Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
|
|
93
108
|
)}
|
|
94
109
|
<RNTextInput
|
|
110
|
+
ref={inputRef}
|
|
95
111
|
value={value}
|
|
96
112
|
onChangeText={onChangeText}
|
|
97
113
|
placeholder={placeholder}
|