@ledgerhq/lumen-ui-rnative 0.1.3 → 0.1.4

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/dist/src/lib/Components/TabBar/TabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,cAAc,KAAK,CAAC;AAGjC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAgGjB;yBAvGe,UAAU;;;AA2G1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAsFb"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,cAAc,KAAK,CAAC;AAGjC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAgGjB;yBAvGe,UAAU;;;AA2G1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Fb"}

package/dist/src/lib/Components/TabBar/TabBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { Platform, StyleSheet, Text, View, } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming, } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { Placeholder } from '../../Symbols';
@@ -127,9 +127,9 @@ export function TabBar({ active, onTabPress, children, ...props }) {
         width: itemWidth.value,
         height: itemHeight.value - PILL_INSET * 2,
     }), [pillProgress, itemWidth, itemHeight]);
-    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, _jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.lg, blurType: colorScheme === 'dark' ? 'dark' : 'light', overlayColor: colorScheme === 'dark'
+    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, Platform.OS === 'android' ? (_jsx(View, { style: styles.androidBackground })) : (_jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.lg, blurType: colorScheme === 'dark' ? 'dark' : 'light', overlayColor: colorScheme === 'dark'
                         ? 'rgba(0,0,0,0.15)'
-                        : 'rgba(255,255,255,0.2)' }), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
+                        : 'rgba(255,255,255,0.2)' })), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
 }
 const useStyles = () => useStyleSheet((t) => ({
     container: {
@@ -144,9 +144,14 @@ const useStyles = () => useStyleSheet((t) => ({
     },
     blur: {
         ...StyleSheet.absoluteFillObject,
-        bottom: -2,
+        height: TAB_BAR_HEIGHT + t.sizes.s16,
         zIndex: -1,
     },
+    androidBackground: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: -1,
+        backgroundColor: t.colors.bg.muted,
+    },
     item: {
         flex: 1,
         paddingVertical: t.spacings.s4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/src/lib/Components/TabBar/TabBar.tsx

@@ -1,6 +1,12 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { LayoutChangeEvent, StyleSheet, Text } from 'react-native';
+import {
+  LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -228,16 +234,20 @@ export function TabBar({
         {...props}
       >
         {children}
-        <BlurView
-          style={styles.blur}
-          blurAmount={theme.blur.lg}
-          blurType={colorScheme === 'dark' ? 'dark' : 'light'}
-          overlayColor={
-            colorScheme === 'dark'
-              ? 'rgba(0,0,0,0.15)'
-              : 'rgba(255,255,255,0.2)'
-          }
-        />
+        {Platform.OS === 'android' ? (
+          <View style={styles.androidBackground} />
+        ) : (
+          <BlurView
+            style={styles.blur}
+            blurAmount={theme.blur.lg}
+            blurType={colorScheme === 'dark' ? 'dark' : 'light'}
+            overlayColor={
+              colorScheme === 'dark'
+                ? 'rgba(0,0,0,0.15)'
+                : 'rgba(255,255,255,0.2)'
+            }
+          />
+        )}
         <Animated.View style={[styles.pill, animatedPillStyle]} />
       </Box>
     </TabBarContextProvider>
@@ -259,9 +269,14 @@ const useStyles = () =>
       },
       blur: {
         ...StyleSheet.absoluteFillObject,
-        bottom: -2,
+        height: TAB_BAR_HEIGHT + t.sizes.s16,
         zIndex: -1,
       },
+      androidBackground: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: -1,
+        backgroundColor: t.colors.bg.muted,
+      },
       item: {
         flex: 1,
         paddingVertical: t.spacings.s4,