react-native-ui-lib 7.37.2 → 7.38.0-snapshot.6221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.37.2",
+  "version": "7.38.0-snapshot.6221",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/searchInput.d.ts

@@ -0,0 +1,2 @@
+import {SearchInput} from './src';
+export default SearchInput;

package/searchInput.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/searchInput').default;

package/src/components/avatar/index.js

@@ -58,6 +58,7 @@ const Avatar = forwardRef((props, ref) => {
     onPress,
     children
   } = themeProps;
+  const hitTargetPadding = Math.max(0, (48 - size) / 2);
   const {
     size: _badgeSize,
     borderWidth: badgeBorderWidth = 0
@@ -174,7 +175,7 @@ const Avatar = forwardRef((props, ref) => {
     }
   };
   const Container = onPress ? TouchableOpacity : View;
-  return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} {...accessibilityProps}>
+  return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
         {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
             {text}

package/src/components/colorSwatch/index.js

@@ -10,6 +10,7 @@ const transparentImage = require("./assets/transparentSwatch/TransparentSwatch.p
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
 export const SWATCH_MARGIN = 12;
 export const SWATCH_SIZE = DEFAULT_SIZE;
+const DEFAULT_COLOR = Colors.grey30;
 
 /**
  * @description: A color swatch component
@@ -83,9 +84,8 @@ class ColorSwatch extends PureComponent {
       value,
       index
     } = this.props;
-    const color = this.color ?? '';
     const tintColor = this.getTintColor(value);
-    const result = value || color;
+    const result = value || this.color || '';
     const hexString = Colors.getHexString(result);
     this.props.onPress?.(result, {
       tintColor,
@@ -102,10 +102,14 @@ class ColorSwatch extends PureComponent {
     }
   }
   getAccessibilityInfo() {
-    const color = this.color;
+    const color = this.color || DEFAULT_COLOR;
+    const defaultText = !this.color ? 'default' : '';
     return {
-      accessibilityLabel: color && Colors.getColorName(color),
-      accessibilityStates: this.props.selected ? ['selected'] : []
+      accessible: true,
+      accessibilityLabel: `${defaultText} color ${Colors.getColorName(color)}`,
+      accessibilityState: {
+        selected: this.props.selected
+      }
     };
   }
   getLayout() {
@@ -122,13 +126,11 @@ class ColorSwatch extends PureComponent {
       size = DEFAULT_SIZE,
       ...others
     } = this.props;
-    const color = this.color;
     const {
       isSelected
     } = this.state;
     const Container = onPress ? TouchableOpacity : View;
-    const tintColor = this.getTintColor(color);
-    const accessibilityInfo = Constants.accessibility.isScreenReaderEnabled && this.getAccessibilityInfo();
+    const tintColor = this.getTintColor(this.color);
     return <Container {...others} center activeOpacity={1} throttleTime={0} hitSlop={{
       top: 10,
       bottom: 10,
@@ -138,8 +140,8 @@ class ColorSwatch extends PureComponent {
       width: size,
       height: size,
       borderRadius: size / 2
-    }, style]} onLayout={this.onLayout} {...accessibilityInfo}>
-        {Colors.isTransparent(color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
+    }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
+        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
       }]} /> : <Animated.Image source={Assets.icons.check} style={{
@@ -181,12 +183,12 @@ class ColorSwatch extends PureComponent {
 }
 export default asBaseComponent(ColorSwatch);
 function createStyles({
-  color = Colors.grey30
+  color = DEFAULT_COLOR
 }) {
   return StyleSheet.create({
     container: {
       backgroundColor: color,
-      borderWidth: color === 'transparent' ? undefined : 1,
+      borderWidth: Colors.isTransparent(color) ? undefined : 1,
       borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2),
       margin: SWATCH_MARGIN,
       overflow: 'hidden'

package/src/components/index.js

@@ -137,6 +137,9 @@ export default {
   get ProgressiveImage() {
     return require('./progressiveImage').default;
   },
+  get SearchInput() {
+    return require('./searchInput').default;
+  },
   get StateScreen() {
     return require('./stateScreen').default;
   },

package/src/components/searchInput/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SearchInputPresets, SearchInputProps, SearchInputRef } from './types';
+declare const SearchInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    onClear?: (() => void) | undefined;
+    onDismiss?: (() => void) | undefined;
+    cancelButtonProps?: import("../button").ButtonProps | undefined;
+    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    title?: string | undefined;
+    showLoader?: boolean | undefined;
+    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
+    renderLoaderElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    invertColors?: boolean | undefined;
+    inaccessible?: boolean | undefined;
+    useSafeArea?: boolean | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    containerStyle?: import("react-native").StyleProp<import("react-native").TextStyle | import("react-native").ViewStyle>;
+    preset?: "default" | "prominent" | SearchInputPresets | undefined;
+} & React.RefAttributes<any>>;
+interface StaticMembers {
+    presets: typeof SearchInputPresets;
+}
+export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
+declare const _default: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    onClear?: (() => void) | undefined;
+    onDismiss?: (() => void) | undefined;
+    cancelButtonProps?: import("../button").ButtonProps | undefined;
+    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    title?: string | undefined;
+    showLoader?: boolean | undefined;
+    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
+    renderLoaderElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    invertColors?: boolean | undefined;
+    inaccessible?: boolean | undefined;
+    useSafeArea?: boolean | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    containerStyle?: import("react-native").StyleProp<import("react-native").TextStyle | import("react-native").ViewStyle>;
+    preset?: "default" | "prominent" | SearchInputPresets | undefined;
+} & React.RefAttributes<any>> & StaticMembers;
+export default _default;

package/src/components/searchInput/index.js

@@ -0,0 +1,220 @@
+import _isEmpty from "lodash/isEmpty";
+import React, { useImperativeHandle, forwardRef, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Animated, TextInput, ActivityIndicator } from 'react-native';
+import { SearchInputPresets, SearchInputProps, SearchInputRef } from "./types";
+import { Colors, BorderRadiuses, Spacings, Typography } from "../../style";
+import { Constants, asBaseComponent } from "../../commons/new";
+import Button from "../button";
+import Icon from "../icon";
+import View from "../view";
+import Assets from "../../assets";
+const ICON_SIZE = 24;
+const INPUT_HEIGHT = 60;
+const TOP_INPUT_HEIGHT = Constants.isIOS ? 40 : 56;
+const PROMINENT_INPUT_HEIGHT = 48;
+const INVERTED_TEXT_COLOR = Colors.$textDefaultLight;
+const INVERTED_ICON_COLOR = Colors.$iconDefaultLight;
+const HIT_SLOP_VALUE = 20;
+const SearchInput = forwardRef((props, ref) => {
+  const {
+    preset = SearchInputPresets.DEFAULT,
+    onDismiss,
+    useSafeArea,
+    invertColors,
+    testID,
+    showLoader,
+    loaderProps,
+    value: controlledValue,
+    onChangeText,
+    onClear,
+    containerStyle,
+    renderCustomRightElement,
+    style,
+    inaccessible
+  } = props;
+  const currentAnimatedValue = useRef();
+  const searchInputRef = useRef(null);
+  const [hasValue, setHasValue] = useState(Boolean(controlledValue));
+  const [value, setValue] = useState(controlledValue);
+  const [valueState] = useState(new Animated.Value(_isEmpty(controlledValue) ? 0 : 1));
+  const [isAnimatingClearButton, setIsAnimatingClearButton] = useState(!_isEmpty(controlledValue));
+  useImperativeHandle(ref, () => {
+    return {
+      blur: () => searchInputRef.current?.blur(),
+      focus: () => searchInputRef.current?.focus(),
+      clear: () => {
+        searchInputRef.current?.clear();
+        onChangeText?.('');
+        onClear?.();
+      }
+    };
+  });
+  useEffect(() => {
+    if (controlledValue !== value) {
+      setValue(controlledValue);
+      setHasValue(Boolean(controlledValue));
+    }
+  }, [controlledValue]);
+  useEffect(() => {
+    if (hasValue) {
+      animatedValueState(1);
+    } else {
+      animatedValueState(0);
+    }
+  }, [hasValue]);
+  useEffect(() => {
+    return () => {
+      currentAnimatedValue.current?.stop();
+    };
+  }, []);
+  const animatedValueState = value => {
+    setIsAnimatingClearButton(true);
+    if (currentAnimatedValue.current) {
+      currentAnimatedValue.current.stop();
+    }
+    currentAnimatedValue.current = Animated.timing(valueState, {
+      toValue: value,
+      duration: 160,
+      useNativeDriver: true
+    });
+    currentAnimatedValue.current.start(() => {
+      if (!hasValue) {
+        setIsAnimatingClearButton(false);
+      }
+    });
+  };
+  const getHeight = () => {
+    const isProminent = preset === SearchInputPresets.PROMINENT;
+    if (isProminent) {
+      return PROMINENT_INPUT_HEIGHT;
+    }
+    return useSafeArea ? TOP_INPUT_HEIGHT : INPUT_HEIGHT;
+  };
+  const onChangeTextHandler = text => {
+    console.log(`onChangeTextHandler, text:`, text);
+    onChangeText?.(text);
+    setValue(text);
+    setHasValue(!_isEmpty(text));
+  };
+  const clearInput = () => {
+    searchInputRef?.current?.clear();
+    onChangeTextHandler('');
+    onClear?.();
+  };
+  const renderClearButton = () => {
+    const transform = [{
+      translateY: valueState.interpolate({
+        inputRange: [0, 1],
+        outputRange: [50, 1]
+      })
+    }];
+    const clearButtonStyle = !isDismissible() && isAnimatingClearButton && styles.clearButton;
+    const iconStyle = {
+      tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40,
+      width: 12,
+      height: 12
+    };
+    return <Animated.View style={[{
+      transform
+    }, clearButtonStyle]}>
+        <Button link grey10 text80 iconSource={Assets.icons.x} iconStyle={iconStyle} onPress={clearInput} hitSlop={HIT_SLOP_VALUE} accessible={Boolean(hasValue)} accessibilityLabel={'clear'} testID={`${testID}.clearButton`} />
+      </Animated.View>;
+  };
+  const renderCancelButton = () => {
+    const {
+      cancelButtonProps
+    } = props;
+    if (onDismiss) {
+      return <Button style={styles.cancelButton} link color={invertColors ? INVERTED_TEXT_COLOR : undefined} $textDefault text65M {...cancelButtonProps} onPress={onDismiss} testID={`${testID}.cancelButton`} />;
+    }
+  };
+  const renderTextInput = () => {
+    const {
+      placeholder
+    } = props;
+    const height = getHeight();
+    const placeholderTextColor = invertColors ? INVERTED_TEXT_COLOR : Colors.$textDefault;
+    const selectionColor = invertColors ? INVERTED_TEXT_COLOR : Colors.$textDefault;
+    return <View style={[styles.inputContainer, {
+      height
+    }]}>
+        <TextInput accessibilityRole={'search'} placeholder={placeholder} placeholderTextColor={placeholderTextColor} underlineColorAndroid="transparent" selectionColor={selectionColor} ref={searchInputRef} value={value} allowFontScaling={false} style={[styles.input, containerStyle, invertColors && {
+        color: INVERTED_TEXT_COLOR
+      }, (!isDismissible() || isAnimatingClearButton) && styles.emptyInput]} onChangeText={onChangeTextHandler} testID={testID} />
+        {isAnimatingClearButton && renderClearButton()}
+        {isDismissible() && renderCancelButton()}
+        {!isDismissible() && renderCustomRightElement && renderCustomRightElement()}
+      </View>;
+  };
+  const isDismissible = () => {
+    return typeof onDismiss !== 'undefined';
+  };
+  const renderIcon = (icon, left = true) => {
+    const invertedColor = invertColors ? {
+      tintColor: INVERTED_ICON_COLOR
+    } : undefined;
+    return <View>
+        <Icon tintColor={invertedColor?.tintColor} style={[styles.icon, invertedColor, left && styles.leftIcon]} source={icon} size={ICON_SIZE} />
+      </View>;
+  };
+  const renderLoader = () => {
+    const {
+      renderLoaderElement
+    } = props;
+    return <View>
+        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator style={styles.loader} {...loaderProps} />}
+      </View>;
+  };
+  const topInputTopMargin = useSafeArea && {
+    marginTop: Constants.isIOS ? Constants.statusBarHeight : 0
+  };
+  const isProminent = preset === SearchInputPresets.PROMINENT;
+  return <View inaccessible={inaccessible} row centerV style={[style, isProminent && styles.prominentContainer, topInputTopMargin]} testID={`${testID}.searchBox`}>
+      {showLoader ? renderLoader() : renderIcon(Assets.icons.search)}
+      {renderTextInput()}
+    </View>;
+});
+const styles = StyleSheet.create({
+  inputContainer: {
+    height: INPUT_HEIGHT,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden'
+  },
+  prominentContainer: {
+    borderWidth: 1,
+    borderColor: Colors.$outlineDefault,
+    borderRadius: BorderRadiuses.br20,
+    marginHorizontal: Spacings.s5
+  },
+  input: {
+    flex: 1,
+    ...Typography.body,
+    lineHeight: undefined,
+    color: Colors.$textDefault,
+    textAlign: Constants.isRTL ? 'right' : 'left'
+  },
+  emptyInput: {
+    marginRight: Spacings.s4
+  },
+  cancelButton: {
+    marginLeft: Spacings.s4,
+    marginRight: Spacings.s4
+  },
+  clearButton: {
+    marginRight: Spacings.s4
+  },
+  icon: {
+    marginRight: Spacings.s4
+  },
+  leftIcon: {
+    marginLeft: Spacings.s4
+  },
+  loader: {
+    marginHorizontal: Spacings.s4
+  }
+});
+SearchInput.displayName = 'SearchInput';
+export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
+export default asBaseComponent(SearchInput);

package/src/components/searchInput/searchInput.api.json

@@ -0,0 +1,60 @@
+{
+  "name": "SearchInput",
+  "category": "form",
+  "description": "Search input for filtering purpose",
+  "example": "https://github.com/wix-private/wix-react-native-ui-lib/blob/master/example/screens/components/SearchInputScreen.tsx",
+  "extends": ["TextInput"],
+  "extendsLink": "https://reactnative.dev/docs/textinput",
+  "props": [
+    {"name": "onDismiss", "type": "() => void", "description": "callback for dismiss action"},
+    {"name": "onClear", "type": "() => void", "description": "On clear button callback."},
+    {"name": "title", "type": "string", "description": "Title prop."},
+    {"name": "showFilterIcon", "type": "boolean", "description": "Pass true to add filter icon on the right."},
+    {
+      "name": "showLoader",
+      "type": "boolean",
+      "description": "Whether to show a loader instead of the left search icon."
+    },
+    {
+      "name": "renderLoaderElement",
+      "type": " () => React.ReactElement",
+      "description": "custom loader element to render instead of the default loader"
+    },
+    {
+      "name": "renderLoaderElement",
+      "type": " () => React.ReactElement",
+      "description": "custom loader element to render instead of the default loader"
+    },
+    {
+      "name": "cancelButtonProps",
+      "type": "ButtonProps",
+      "description": "Props for the cancel button"
+    },
+    {
+      "name": "schemeColor",
+      "type": "string | null",
+      "description": "The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)"
+    },
+    {
+      "name": "inaccessible",
+      "type": "boolean",
+      "description": "Turn off accessibility for this view and its nested children"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "in case the SearchInput is rendered in a safe area (top of the screen)"
+    },
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Override styles for the input"},
+    {"name": "style", "type": "ViewStyle", "description": "Override styles for container"}
+  ],
+  "snippet": [
+    "<SearchInput",
+    "  ref={searchInputRef$1}",
+    "  testID={'searchInput'$2}",
+    "  placeholder={'Search'$3}",
+    "  onDismiss={onDismiss$4}",
+    "  showFilterIcon={showFilterIcon$5}",
+    "/>"
+  ]
+}

package/src/components/searchInput/types.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import { TextInputProps, StyleProp, ViewStyle, TextStyle, ActivityIndicatorProps } from 'react-native';
+import { ButtonProps } from '../button';
+export declare enum SearchInputPresets {
+    DEFAULT = "default",
+    PROMINENT = "prominent"
+}
+export interface SearchInputRef {
+    blur: () => void;
+    clear: () => void;
+    focus: () => void;
+}
+export type SearchInputProps = TextInputProps & {
+    /**
+     * On clear button callback.
+     */
+    onClear?: () => void;
+    /**
+     * callback for dismiss action
+     */
+    onDismiss?: () => void;
+    /**
+     * Props for the cancel button
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Custom right element
+     */
+    renderCustomRightElement?: () => React.ReactElement;
+    /**
+     * Title prop
+     */
+    title?: string;
+    /**
+     * Whether to show a loader instead of the left search icon
+     */
+    showLoader?: boolean;
+    /**
+     * Loader props
+     */
+    loaderProps?: ActivityIndicatorProps;
+    /**
+     * custom loader element
+     */
+    renderLoaderElement?: () => React.ReactElement;
+    /**
+     * converts the colors of the search's input elements, icons and button to white
+     */
+    invertColors?: boolean;
+    /**
+     * Turn off accessibility for this view and its nested children
+     */
+    inaccessible?: boolean;
+    /**
+     * in case the SearchInput is rendered in a safe area (top of the screen)
+     */
+    useSafeArea?: boolean;
+    /**
+     * Override styles for container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Override styles for the input
+     */
+    containerStyle?: StyleProp<ViewStyle | TextStyle>;
+    /**
+     * The preset for the search input: default or prominent
+     */
+    preset?: SearchInputPresets | `${SearchInputPresets}`;
+};

package/src/components/searchInput/types.js

@@ -0,0 +1,5 @@
+export let SearchInputPresets = /*#__PURE__*/function (SearchInputPresets) {
+  SearchInputPresets["DEFAULT"] = "default";
+  SearchInputPresets["PROMINENT"] = "prominent";
+  return SearchInputPresets;
+}({});

package/src/components/switch/index.js

@@ -36,10 +36,7 @@ class Switch extends Component {
       accessibilityRole: 'switch',
       accessibilityState: {
         disabled,
-        checked: value ? 'checked' : 'unchecked'
-      },
-      accessibilityValue: {
-        text: value ? '1' : '0'
+        checked: value
       }
     };
   }
@@ -114,13 +111,27 @@ class Switch extends Component {
     };
     return <Animated.View style={[this.styles.thumb, thumbPositionStyle, thumbStyle]} />;
   }
+  getAccessibleHitSlop() {
+    const {
+      width = DEFAULT_WIDTH,
+      height = DEFAULT_HEIGHT
+    } = this.props;
+    const verticalPadding = Math.max(0, (48 - height) / 2);
+    const horizontalPadding = Math.max(0, (48 - width) / 2);
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding,
+      left: horizontalPadding,
+      right: horizontalPadding
+    };
+  }
   render() {
     const {
       ...others
     } = this.props;
     return (
       // @ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} {...others} style={this.getSwitchStyle()} onPress={this.onPress}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} hitSlop={this.getAccessibleHitSlop()} {...others} style={this.getSwitchStyle()} onPress={this.onPress}>
         {this.renderThumb()}
       </TouchableOpacity>
     );

package/src/components/switch/switch.driver.d.ts

@@ -2,9 +2,8 @@ import { ViewStyle } from 'react-native';
 import { ComponentProps } from '../../testkit/new/Component.driver';
 export declare const SwitchDriver: (props: ComponentProps) => {
     getStyle: () => ViewStyle;
-    getAccessibilityValue: () => boolean;
     isDisabled: () => boolean;
-    isChecked: () => boolean;
+    isChecked: () => any;
     press: () => void;
     hasOnPress: () => boolean;
     onPressIn: () => void;

package/src/components/switch/switch.driver.js

@@ -3,13 +3,11 @@ import { usePressableDriver } from "../../testkit/new/usePressable.driver";
 export const SwitchDriver = props => {
   const driver = usePressableDriver(useComponentDriver(props));
   const getStyle = () => driver.getElement().props.style;
-  const getAccessibilityValue = () => driver.getElement().props.accessibilityValue?.text === '1';
   const isDisabled = () => driver.getElement().props.accessibilityState?.disabled === true;
-  const isChecked = () => driver.getElement().props.accessibilityValue?.text === '1';
+  const isChecked = () => driver.getElement().props.accessibilityState?.checked;
   return {
     ...driver,
     getStyle,
-    getAccessibilityValue,
     isDisabled,
     isChecked
   };

package/src/components/tabController/TabBar.js

@@ -149,7 +149,7 @@ const TabBar = props => {
   }, [labelColor, selectedLabelColor]);
   return <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView ref={tabBar} horizontal showsHorizontalScrollIndicator={false} showStartFader startFaderProps={faderProps} showEndFader endFaderProps={faderProps} contentContainerStyle={scrollViewContainerStyle} testID={testID} onContentSizeChange={onContentSizeChange} onLayout={onLayout}>
-        <View style={tabBarContainerStyle}>{tabBarItems}</View>
+        <View style={tabBarContainerStyle} accessibilityRole={Constants.isIOS ? 'tabbar' : 'tablist'}>{tabBarItems}</View>
         {itemsCount > 1 && <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]} />}
       </FadedScrollView>
     </View>;

package/src/components/tabController/TabBarItem.js

@@ -3,9 +3,9 @@ import _isEmpty from "lodash/isEmpty";
 import _isUndefined from "lodash/isUndefined";
 import _cloneDeep from "lodash/cloneDeep";
 // TODO: support commented props
-import React, { useCallback, useContext, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useMemo, useState } from 'react';
 import { StyleSheet } from 'react-native';
-import Reanimated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import Reanimated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { Colors, Typography, Spacings } from "../../style";
 import Badge from "../badge";
@@ -52,6 +52,7 @@ export default function TabBarItem({
   // JSON.parse(JSON.stringify is due to an issue with reanimated
   const sharedLabelStyle = useSharedValue(JSON.parse(JSON.stringify(StyleSheet.flatten(labelStyle))));
   const sharedSelectedLabelStyle = useSharedValue(JSON.parse(JSON.stringify(StyleSheet.flatten(selectedLabelStyle))));
+  const [isSelected, setIsSelected] = useState(currentPage.value === index);
 
   // NOTE: We clone these color values in refs because they might contain a PlatformColor value
   //       which throws an error (see https://github.com/software-mansion/react-native-reanimated/issues/3164)
@@ -71,6 +72,11 @@ export default function TabBarItem({
       }, index);
     }
   }, []);
+  useAnimatedReaction(() => currentPage.value === index, (isSelected, prevIsSelected) => {
+    if (isSelected !== prevIsSelected) {
+      runOnJS(setIsSelected)(isSelected);
+    }
+  });
   const onLayout = useCallback(event => {
     const {
       width
@@ -120,6 +126,9 @@ export default function TabBarItem({
       flex
     }, style, constantWidthStyle, pressStyle];
   }, [style, spreadItems]);
+  const accessibilityState = useMemo(() => ({
+    selected: isSelected
+  }), [isSelected]);
   const gesture = Gesture.Tap().maxDuration(60000).onEnd(() => {
     if (!ignore) {
       setCurrentIndex(index);
@@ -133,7 +142,7 @@ export default function TabBarItem({
   return <GestureDetector gesture={gesture}>
       <View reanimated
     // @ts-expect-error
-    ref={itemRef} style={_style} onLayout={onLayout} testID={testID}>
+    ref={itemRef} style={_style} onLayout={onLayout} testID={testID} accessible accessibilityRole="tab" accessibilityState={accessibilityState}>
         {leadingAccessory}
         {icon && <Reanimated.Image source={icon} style={[!_isUndefined(label) && styles.tabItemIconWithLabel, animatedIconStyle]} />}
         {!_isEmpty(label) && <Reanimated.Text {...labelProps} fsTagName={'unmask'} style={[styles.tabItemLabel, labelStyle, animatedLabelStyle, animatedLabelColorStyle]}>

package/src/components/textField/index.js

@@ -159,7 +159,10 @@ const TextField = props => {
                   {placeholder}
                 </Text>}
               {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
-              <Input placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
+              <Input hitSlop={{
+            top: 20,
+            bottom: 20
+          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
             </View>}
           {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}

package/src/incubator/expandableOverlay/index.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useCallback, useState, forwardRef, useImperativeHandle, useRef } from 'react';
+import { AccessibilityInfo, findNodeHandle } from 'react-native';
 import TouchableOpacity from "../../components/touchableOpacity";
 import View from "../../components/view";
 import Modal from "../../components/modal";
@@ -23,14 +24,22 @@ const ExpandableOverlay = (props, ref) => {
     ...others
   } = props;
   const [visible, setExpandableVisible] = useState(false);
+  const containerRef = useRef(null);
+  const focusAccessibility = useCallback(() => {
+    const reactTag = findNodeHandle(containerRef.current);
+    if (reactTag) {
+      AccessibilityInfo.setAccessibilityFocus(reactTag);
+    }
+  }, []);
   const openExpandable = useCallback(() => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
   const closeExpandable = useCallback(() => {
     setExpandableVisible(false);
+    focusAccessibility();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss]);
+  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
   const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
   useImperativeHandle(ref, () => ({
     openExpandable,
@@ -61,7 +70,7 @@ const ExpandableOverlay = (props, ref) => {
       return useDialog ? renderDialog() : renderModal();
     }
   };
-  return <TouchableOpacity {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
+  return <TouchableOpacity ref={containerRef} {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
       <View pointerEvents="none">{children}</View>
       {renderOverlay()}
     </TouchableOpacity>;

package/src/incubator/toast/index.js

@@ -57,11 +57,9 @@ const Toast = props => {
   });
   const playAccessibilityFeatures = () => {
     if (visible) {
-      if (viewRef.current && action) {
+      if (viewRef.current && (action || message)) {
         const reactTag = findNodeHandle(viewRef.current);
         AccessibilityInfo.setAccessibilityFocus(reactTag);
-      } else if (message) {
-        AccessibilityInfo.announceForAccessibility?.(toastPreset.accessibilityMessage);
       }
     }
   };

package/src/index.d.ts

@@ -68,7 +68,7 @@ export { default as PanningProvider, PanningDirections, PanLocationProps, PanAmo
 export { default as PanResponderView, PanResponderViewProps } from './components/panningViews/panResponderView';
 export { default as asPanViewConsumer } from './components/panningViews/asPanViewConsumer';
 export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './components/picker';
-export { default as PieChart, PieChartSegmentProps } from './components/pieChart';
+export { default as PieChart, type PieChartProps, PieChartSegmentProps } from './components/pieChart';
 export { default as ProgressBar, ProgressBarProps } from './components/progressBar';
 export { default as ProgressiveImage, ProgressiveImageProps } from './components/progressiveImage';
 export { default as RadioButton, RadioButtonProps } from './components/radioButton';
@@ -76,6 +76,7 @@ export { default as RadioGroup, RadioGroupProps } from './components/radioGroup'
 export type { RecorderProps } from './typings/recorderTypes';
 export type { ComponentStatics } from './typings/common';
 export { default as ScrollBar, ScrollBarProps } from './components/scrollBar';
+export { default as SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets } from './components/searchInput';
 export { default as SectionsWheelPicker, SectionsWheelPickerProps } from './components/sectionsWheelPicker';
 export { default as SegmentedControl, SegmentedControlProps, SegmentedControlItemProps, SegmentedControlPreset } from './components/segmentedControl';
 export { default as SharedTransition } from './components/sharedTransition';

package/src/index.js

@@ -178,6 +178,10 @@ var _exportNames = {
   RadioGroupProps: true,
   ScrollBar: true,
   ScrollBarProps: true,
+  SearchInput: true,
+  SearchInputProps: true,
+  SearchInputRef: true,
+  SearchInputPresets: true,
   SectionsWheelPicker: true,
   SectionsWheelPickerProps: true,
   SegmentedControl: true,
@@ -1206,6 +1210,30 @@ Object.defineProperty(exports, "ScrollBarProps", {
     return _scrollBar().ScrollBarProps;
   }
 });
+Object.defineProperty(exports, "SearchInput", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().default;
+  }
+});
+Object.defineProperty(exports, "SearchInputPresets", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().SearchInputPresets;
+  }
+});
+Object.defineProperty(exports, "SearchInputProps", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().SearchInputProps;
+  }
+});
+Object.defineProperty(exports, "SearchInputRef", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().SearchInputRef;
+  }
+});
 Object.defineProperty(exports, "SectionsWheelPicker", {
   enumerable: true,
   get: function () {
@@ -2193,6 +2221,13 @@ function _scrollBar() {
   };
   return data;
 }
+function _searchInput() {
+  const data = _interopRequireWildcard(require("./components/searchInput"));
+  _searchInput = function () {
+    return data;
+  };
+  return data;
+}
 function _sectionsWheelPicker() {
   const data = _interopRequireWildcard(require("./components/sectionsWheelPicker"));
   _sectionsWheelPicker = function () {

package/src/style/colors.js

@@ -145,6 +145,9 @@ export class Colors {
     return Scheme.getScheme(schemeType)[colorKey];
   }
   getColorName(colorValue) {
+    if (this.isTransparent(colorValue)) {
+      return 'transparent';
+    }
     const color = colorStringValue(colorValue);
     return ColorName.name(color)[1];
   }