react-native-platform-components 1.4.0 → 1.6.0

package/src/TextFieldNativeComponent.ts

@@ -1,6 +1,6 @@
 // TextFieldNativeComponent.ts
 import type * as React from 'react';
-import type { HostComponent, ViewProps } from 'react-native';
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
 import type { BubblingEventHandler, Double, Int32 } from './codegenTypes';
 
@@ -10,6 +10,7 @@ import type { BubblingEventHandler, Double, Int32 } from './codegenTypes';
 export type TextFieldIconProps = Readonly<{
   iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
   iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconRequest: string;
   iconUri: string; // Resolved image URI when iconType === 'image'
   iconScale: Double; // Resolved image scale when iconType === 'image'
   iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
@@ -40,6 +41,37 @@ export type TextFieldTextEvent = Readonly<{
   text: string;
 }>;
 
+/** The cursor or selection, as UTF-16 offsets into the text. */
+export type TextFieldSelectionEvent = Readonly<{
+  start: Int32;
+  end: Int32;
+}>;
+
+/** A press on a keyboard toolbar button (iOS). */
+export type TextFieldToolbarPressEvent = Readonly<{
+  itemId: string;
+}>;
+
+/**
+ * A keyboard toolbar item (iOS). Icons are pre-resolved on the JS side (see
+ * icons.ts); empty strings mean "none".
+ */
+export type TextFieldToolbarItem = Readonly<{
+  kind: string; // 'button' | 'done' | 'flexibleSpace'
+  itemId: string;
+  title: string;
+  systemItem: string; // '' | UIBarButtonItem.SystemItem name
+  iconType: string; // '' | 'sfSymbol' | 'image'
+  iconName: string;
+  iconRequest: string;
+  iconUri: string;
+  iconScale: Double;
+  iconTinted: string; // 'true' | 'false'
+  prominent: string; // 'true' | 'false'
+  accessibilityLabel: string;
+  testID: string;
+}>;
+
 /**
  * iOS-specific configuration. Every field is '' for the platform default.
  */
@@ -62,6 +94,8 @@ export type TextFieldIOSProps = Readonly<{
   labelPlacement?: string;
   /** Width of a leading label column in points; 0 = default */
   labelWidth?: Double;
+  /** UITextInputPasswordRules descriptor; '' = none */
+  passwordRules?: string;
 }>;
 
 /**
@@ -70,7 +104,7 @@ export type TextFieldIOSProps = Readonly<{
 export type TextFieldAndroidProps = Readonly<{
   /** 'm3' | 'system' (AndroidMaterialMode) */
   material?: string;
-  /** 'outlined' | 'filled' */
+  /** 'outlined' | 'filled' | 'plain' */
   variant?: string;
   /** 'standard' | 'dense' */
   density?: string;
@@ -140,6 +174,15 @@ export interface TextFieldNativeProps extends ViewProps {
   /** 'single' | 'multiline' */
   lines?: string;
 
+  /**
+   * What the return key does: 'submit' | 'blurAndSubmit' | 'newline',
+   * resolved on the JS side ('newline' only for multi-line fields).
+   */
+  submitBehavior?: string;
+
+  /** iOS: the keyboard toolbar (inputAccessoryView); empty = none. */
+  keyboardToolbarItems?: ReadonlyArray<TextFieldToolbarItem>;
+
   /** 'enabled' | 'disabled' */
   interactivity?: string;
 
@@ -164,6 +207,49 @@ export interface TextFieldNativeProps extends ViewProps {
    */
   spokenLabel?: string;
 
+  /** E2E identifier of the leading icon. */
+  leadingIconTestID?: string;
+
+  /** Screen-reader label of the leading icon. */
+  leadingIconSpokenLabel?: string;
+
+  /** E2E identifier of the trailing icon. */
+  trailingIconTestID?: string;
+
+  /** Screen-reader label of the trailing icon. */
+  trailingIconSpokenLabel?: string;
+
+  /** Focused outline, focused label and cursor color. */
+  activeColor?: ColorValue;
+
+  /** Unfocused outline (underline for the filled variant) color. */
+  outlineColor?: ColorValue;
+
+  /** Error outline, label and message color. */
+  errorColor?: ColorValue;
+
+  /** Background of the field's box. */
+  containerColor?: ColorValue;
+
+  /** Input text color. */
+  textColor?: ColorValue;
+
+  /** Placeholder color. */
+  placeholderTextColor?: ColorValue;
+
+  /** Largest font scale the text may reach; 0 = no cap. */
+  maxFontSizeMultiplier?: Double;
+
+  /** '' (natural) | 'left' | 'center' | 'right' */
+  textAlign?: string;
+
+  /** Multi-line: minimum and maximum visible lines; 0 = unset. */
+  minLines?: Int32;
+  maxLines?: Int32;
+
+  /** 'none' | 'button': a non-editable field that fires onFieldPress. */
+  pressMode?: string;
+
   ios?: TextFieldIOSProps;
   android?: TextFieldAndroidProps;
 
@@ -176,11 +262,20 @@ export interface TextFieldNativeProps extends ViewProps {
   /** Fired when the field loses focus. */
   onFieldBlur?: BubblingEventHandler<TextFieldTextEvent>;
 
-  /** Fired when the keyboard's return key is pressed (single-line). */
+  /** Fired when the return key submits (see submitBehavior). */
   onFieldSubmit?: BubblingEventHandler<TextFieldTextEvent>;
 
+  /** Fired when the cursor moves or the selection changes. */
+  onFieldSelectionChange?: BubblingEventHandler<TextFieldSelectionEvent>;
+
+  /** iOS: fired when a keyboard toolbar button (other than Done) is pressed. */
+  onKeyboardToolbarPress?: BubblingEventHandler<TextFieldToolbarPressEvent>;
+
   /** Fired when the trailing icon is pressed. */
   onTrailingIconPress?: BubblingEventHandler<Readonly<{}>>;
+
+  /** Fired when a field with pressMode 'button' is pressed. */
+  onFieldPress?: BubblingEventHandler<Readonly<{}>>;
 }
 
 type NativeTextFieldComponent = HostComponent<TextFieldNativeProps>;
@@ -207,10 +302,21 @@ interface NativeCommands {
     eventCount: Int32,
     text: string
   ) => void;
+
+  /**
+   * Selects `start`..`end` (UTF-16 offsets, clamped to the text), unless the
+   * user has edited since `eventCount` was reported, as for `setText`.
+   */
+  setSelection: (
+    viewRef: React.ElementRef<NativeTextFieldComponent>,
+    eventCount: Int32,
+    start: Int32,
+    end: Int32
+  ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['focus', 'blur', 'clear', 'setText'],
+  supportedCommands: ['focus', 'blur', 'clear', 'setText', 'setSelection'],
 });
 
 export default codegenNativeComponent<TextFieldNativeProps>(

package/src/focusRegistry.ts

@@ -1,3 +1,4 @@
+/// <reference path="./reactNativeInternals.d.ts" />
 // focusRegistry.ts
 //
 // TextField's link to React Native's focused-input bookkeeping. The core

package/src/haptics.ts

@@ -0,0 +1,31 @@
+// haptics.ts
+//
+// The `haptics` prop shared by the interactive components.
+
+/**
+ * Haptic feedback a control plays when the user acts on it: a press, a
+ * selection change or a menu pick. Unset plays nothing beyond what the
+ * platform control does itself.
+ *
+ * | Value       | iOS                                        | Android (`HapticFeedbackConstants`)    |
+ * | ----------- | ------------------------------------------ | -------------------------------------- |
+ * | `selection` | `UISelectionFeedbackGenerator`             | `SEGMENT_TICK` (API 34+), else `CLOCK_TICK` |
+ * | `light`     | `UIImpactFeedbackGenerator` `.light`       | `CONTEXT_CLICK`                        |
+ * | `medium`    | `UIImpactFeedbackGenerator` `.medium`      | `VIRTUAL_KEY`                          |
+ * | `heavy`     | `UIImpactFeedbackGenerator` `.heavy`       | `LONG_PRESS`                           |
+ * | `success`   | `UINotificationFeedbackGenerator` `.success` | `CONFIRM` (API 30+), else `VIRTUAL_KEY` |
+ * | `warning`   | `UINotificationFeedbackGenerator` `.warning` | `REJECT` (API 30+), else `LONG_PRESS` |
+ * | `error`     | `UINotificationFeedbackGenerator` `.error` | `REJECT` (API 30+), else `LONG_PRESS`  |
+ * | `none`      | Nothing                                    | Nothing, and turns off the view's own haptic (`isHapticFeedbackEnabled`) |
+ *
+ * Both platforms follow the system haptics setting. Web ignores the prop.
+ */
+export type Haptics =
+  | 'selection'
+  | 'light'
+  | 'medium'
+  | 'heavy'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'none';

package/src/icons.ts

@@ -19,7 +19,11 @@ import {
  *   Android only; ignored on iOS.
  * - `{ type: 'image' }`: an image asset (`require('./icon.png')`) or a
  *   `{ uri }` source. Works on both platforms. Images are drawn as tinted
- *   templates unless `tinted` is `false`.
+ *   templates unless `tinted` is `false`. Native loaders forward `headers`,
+ *   `method` and `body`. `cache` controls the decoded in-memory image cache:
+ *   `reload` bypasses it, `only-if-cached` never fetches, and `default` /
+ *   `force-cache` reuse a matching cached request. HTTP redirects carrying
+ *   custom request options are not followed.
  */
 export type PlatformIconSource =
   | string
@@ -50,6 +54,8 @@ export type NativeIconFields = {
   iconName: string;
   /** Resolved image URI when iconType === 'image' */
   iconUri: string;
+  /** Serialized HTTP request options; empty for ordinary image assets. */
+  iconRequest: string;
   /** Resolved image scale when iconType === 'image' */
   iconScale: number;
   /** 'true' | 'false': draw the image as a tinted template */
@@ -60,6 +66,7 @@ export const NO_ICON: NativeIconFields = {
   iconType: '',
   iconName: '',
   iconUri: '',
+  iconRequest: '',
   iconScale: 1,
   iconTinted: 'true',
 };
@@ -102,10 +109,30 @@ export function resolveIcon(icon: PlatformIcon | undefined): NativeIconFields {
     case 'image': {
       const resolved = Image.resolveAssetSource(source.source);
       if (!resolved?.uri) return NO_ICON;
+      const request =
+        typeof source.source === 'object' ? source.source : undefined;
+      const headers = request?.headers
+        ? Object.fromEntries(
+            Object.entries(request.headers).sort(([a], [b]) =>
+              a.localeCompare(b)
+            )
+          )
+        : undefined;
+      const requestOptions = {
+        headers,
+        method: request?.method,
+        body: request?.body,
+        cache: request?.cache,
+      };
       return {
         iconType: 'image',
         iconName: '',
         iconUri: resolved.uri,
+        iconRequest: Object.values(requestOptions).some(
+          (value) => value !== undefined
+        )
+          ? JSON.stringify(requestOptions)
+          : '',
         iconScale: resolved.scale > 0 ? resolved.scale : 1,
         iconTinted: source.tinted === false ? 'false' : 'true',
       };

package/src/index.tsx

@@ -2,12 +2,19 @@ export * from './DatePicker';
 export * from './SelectionMenu';
 export * from './ContextMenu';
 export * from './SegmentedControl';
+export * from './TabBar';
+export * from './FloatingActionButton';
+export * from './NavigationRail';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './SplitButton';
 export * from './FloatingToolbar';
 export * from './LiquidGlass';
+export * from './LiquidGlassContainer';
 export * from './TextField';
 export * from './icons';
 export * from './labelStyle';
 export * from './sharedTypes';
+export * from './haptics';
 export * from './NativeTheme';
+export * from './PlatformComponentsProvider';