[pull] main from expo:main

apps/native-component-list/src/screens/UI/TextFieldScreen.android.tsx

@@ -33,6 +33,11 @@ export default function TextFieldScreen() {
     selection: { start: 0, end: 0 },
   });
 
+  const imperativeText = useNativeState('Select me!');
+  const imperativeSelection = useNativeState<{ start: number; end: number }>({ start: 0, end: 0 });
+  const imperativeRef = React.useRef<TextFieldRef>(null);
+  const [imperativeSelDisplay, setImperativeSelDisplay] = React.useState({ start: 0, end: 0 });
+
   const [outlined, setOutlined] = React.useState(false);
   const [enabled, setEnabled] = React.useState(true);
   const [readOnly, setReadOnly] = React.useState(false);
@@ -179,6 +184,38 @@ export default function TextFieldScreen() {
           </Column>
         </Card>
 
+        {/* Imperative Selection */}
+        <Card modifiers={cardModifiers}>
+          <Column modifiers={[p]} verticalArrangement={{ spacedBy: 8 }}>
+            <ComposeText style={{ typography: 'labelLarge' }}>Imperative Selection</ComposeText>
+            <TextField
+              ref={imperativeRef}
+              value={imperativeText}
+              selection={imperativeSelection}
+              onSelectionChange={setImperativeSelDisplay}
+              modifiers={[fillMaxWidth()]}>
+              <TextField.Placeholder>
+                <ComposeText>Type something...</ComposeText>
+              </TextField.Placeholder>
+            </TextField>
+            <ComposeText style={{ typography: 'bodySmall' }}>
+              {`Selection: ${imperativeSelDisplay.start}–${imperativeSelDisplay.end}`}
+            </ComposeText>
+            <Row horizontalArrangement={{ spacedBy: 8 }}>
+              <Button onClick={() => imperativeRef.current?.setSelection(0, 7)}>
+                <ComposeText>Select 0–7</ComposeText>
+              </Button>
+              <Button
+                onClick={() => {
+                  const len = imperativeText.value.length;
+                  imperativeRef.current?.setSelection(len, len);
+                }}>
+                <ComposeText>Cursor to end</ComposeText>
+              </Button>
+            </Row>
+          </Column>
+        </Card>
+
         {/* Props */}
         <Card modifiers={cardModifiers}>
           <Column modifiers={[p]} verticalArrangement={{ spacedBy: 2 }}>

apps/native-component-list/src/screens/UI/TextFieldScreen.ios.tsx

@@ -3,6 +3,7 @@ import {
   Host,
   TextField,
   TextFieldRef,
+  TextFieldSelection,
   SecureField,
   Form,
   Section,
@@ -29,16 +30,23 @@ import { runOnJS } from 'react-native-worklets';
 
 export default function TextFieldScreen() {
   const textRef = React.useRef<TextFieldRef>(null);
-  const phoneRef = React.useRef<TextFieldRef>(null);
-  const [selection, setSelection] = React.useState<{ start: number; end: number } | null>(null);
-
-  const setPhoneCursor = React.useCallback((position: number) => {
-    phoneRef.current?.setSelection(position, position);
-  }, []);
 
   const username = useNativeState('johndoe');
   const imperativeText = useNativeState('Select me!');
+  const imperativeSelection = useNativeState<TextFieldSelection>({ start: 0, end: 0 });
+  const [imperativeSelDisplay, setImperativeSelDisplay] = React.useState<TextFieldSelection>({
+    start: 0,
+    end: 0,
+  });
   const maskedPhone = useNativeState('');
+  const phoneSelection = useNativeState<TextFieldSelection>({ start: 0, end: 0 });
+
+  const setPhoneCursor = React.useCallback(
+    (position: number) => {
+      phoneSelection.value = { start: position, end: position };
+    },
+    [phoneSelection]
+  );
 
   const submitLabelOptions = [
     'continue',
@@ -101,8 +109,8 @@ export default function TextFieldScreen() {
         {/* Worklet-based phone masking — updates synchronously on the UI thread */}
         <Section title="Worklet Phone Masking">
           <TextField
-            ref={phoneRef}
             text={maskedPhone}
+            selection={phoneSelection}
             placeholder="(555) 123-4567"
             modifiers={[keyboardType('phone-pad')]}
             onTextChange={(v) => {
@@ -175,12 +183,13 @@ export default function TextFieldScreen() {
           <TextField
             ref={textRef}
             text={imperativeText}
+            selection={imperativeSelection}
+            onSelectionChange={setImperativeSelDisplay}
             placeholder="Imperative field"
             modifiers={[autocorrectionDisabled()]}
-            onSelectionChange={setSelection}
           />
           <Text modifiers={[foregroundStyle('secondary')]}>
-            Selection: {selection ? `${selection.start}–${selection.end}` : 'none'}
+            {`Selection: ${imperativeSelDisplay.start}–${imperativeSelDisplay.end}`}
           </Text>
           <HStack spacing={12}>
             <Button
@@ -200,7 +209,10 @@ export default function TextFieldScreen() {
             />
             <Button
               modifiers={[buttonStyle('bordered')]}
-              onPress={() => textRef.current?.setSelection(0, 7)}
+              onPress={async () => {
+                await textRef.current?.focus();
+                textRef.current?.setSelection(0, 7);
+              }}
               label="Select"
             />
           </HStack>