react-native-ui-lib 7.36.0 → 7.37.0-snapshot.6100

package/README.md

@@ -15,6 +15,13 @@
 [![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
 <a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
 
+## Notes
+
+#### React Native New Arc
+
+We are working on upgrading our UI Library to support the new React Native Architecture.
+Currently, we support React Native 0.73, and we plan to support React Native 0.77 next.
+While we don’t have a timeline yet, this is part of our roadmap.
 
 ## Links
 - [Docs](https://wix.github.io/react-native-ui-lib/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.36.0",
+  "version": "7.37.0-snapshot.6100",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -70,7 +70,7 @@
     "@formatjs/intl-locale": "^3.0.3",
     "@formatjs/intl-numberformat": "^8.0.4",
     "@formatjs/intl-pluralrules": "^5.0.3",
-    "@react-native-community/blur": "4.3.0",
+    "@react-native-community/blur": "4.4.1",
     "@react-native-community/datetimepicker": "^3.4.6",
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native/babel-preset": "0.73.21",

package/src/components/floatingButton/index.js

@@ -138,7 +138,6 @@ class FloatingButton extends PureComponent {
 }
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
     top: undefined,
     zIndex: Constants.isAndroid ? 99 : undefined
   },

package/src/components/picker/PickerItemsList.js

@@ -1,7 +1,7 @@
 import _times from "lodash/times";
 import _throttle from "lodash/throttle";
 import _isFunction from "lodash/isFunction";
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { StyleSheet, FlatList, TextInput, ActivityIndicator } from 'react-native';
 import { Typography, Colors } from "../../style";
 import Assets from "../../assets";
@@ -66,13 +66,19 @@ const PickerItemsList = props => {
   }) => {
     return <PickerItem {...item} />;
   }, []);
+  const _listProps = useMemo(() => {
+    return {
+      ...listProps,
+      style: [styles.list, listProps?.style]
+    };
+  }, [listProps]);
   const renderList = () => {
     if (items) {
-      return <FlatList testID={`${testID}.list`} data={items} renderItem={renderPropItems} keyExtractor={keyExtractor} {...listProps} />;
+      return <FlatList testID={`${testID}.list`} data={items} renderItem={renderPropItems} keyExtractor={keyExtractor} {..._listProps} />;
     }
     return <FlatList data={_times(React.Children.count(children))}
     // @ts-expect-error
-    renderItem={renderItem} keyExtractor={keyExtractor} testID={`${testID}.list`} {...listProps} />;
+    renderItem={renderItem} keyExtractor={keyExtractor} testID={`${testID}.list`} {..._listProps} />;
   };
   const renderCancel = () => {
     const {
@@ -158,6 +164,9 @@ const styles = StyleSheet.create({
     paddingRight: 16,
     flex: 1,
     ...Typography.text70
+  },
+  list: {
+    height: '100%'
   }
 });
 export default PickerItemsList;

package/src/components/tabController/TabBar.js

@@ -149,7 +149,8 @@ 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>
+        {/* TODO: Might need to change role to tablist, when upgrading rn77. It didn't work now (rn73) */}
+        <View style={tabBarContainerStyle} accessibilityRole="tabbar">{tabBarItems}</View>
         {itemsCount > 1 && <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]} />}
       </FadedScrollView>
     </View>;

package/src/components/tabController/TabBarItem.js

@@ -133,7 +133,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">
         {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]}>