@ledgerhq/native-ui 0.23.3-nightly.2 → 0.23.4-nightly.0

package/lib/components/Form/TabSelector/index.js

@@ -5,32 +5,38 @@ import styled, { useTheme } from "styled-components/native";
 import { TouchableOpacity } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
 const StyledTouchableOpacity = styled(TouchableOpacity) `
+  width: ${(p) => p.width}px;
   flex: 1;
-  overflow: hidden;
+  height: 100%;
 `;
 const StyledFlex = styled(Flex) `
-  width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
 `;
 const StyledText = styled(Text) `
   line-height: 14.52px;
+  overflow: visible;
   text-align: center;
   font-size: 12px;
   color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
 `;
-const OptionButton = ({ option, selectedOption, handleSelectOption, label, }) => {
+const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
     const isSelected = selectedOption === option;
-    return (React.createElement(StyledTouchableOpacity, { onPress: () => handleSelectOption(option) },
+    return (React.createElement(StyledTouchableOpacity, { width: width, onPress: () => handleSelectOption(option) },
         React.createElement(StyledFlex, { isSelected: isSelected },
-            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, ellipsizeMode: "tail", numberOfLines: 1 }, label))));
+            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, numberOfLines: 1 }, label))));
 };
 export default function TabSelector({ options, selectedOption, handleSelectOption, labels, }) {
     const { colors } = useTheme();
-    const translateX = useSharedValue(-39);
+    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+    const widthFactor = 8;
+    const margin = 20;
+    const width = labels[longuestLabel].length * widthFactor + margin;
+    const semiWidth = width / 2;
+    const translateX = useSharedValue(-semiWidth);
     useEffect(() => {
-        translateX.value = withSpring(selectedOption === options[0] ? -40 : 40, {
+        translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
             damping: 30,
             stiffness: 80,
         });
@@ -40,16 +46,16 @@ export default function TabSelector({ options, selectedOption, handleSelectOptio
             transform: [{ translateX: translateX.value }],
         };
     });
-    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: "157px", height: "35px", borderRadius: "40px", padding: "2px", bg: colors.opacityDefault.c05 },
+    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
         React.createElement(Animated.View, { style: [
                 {
                     position: "absolute",
-                    width: "48%",
-                    height: "96%",
+                    width: width - 2,
+                    height: "90%",
                     backgroundColor: colors.primary.c80,
                     borderRadius: 40,
                 },
                 animatedStyle,
             ] }),
-        options.map((option) => (React.createElement(OptionButton, { key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+        options.map((option) => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.23.3-nightly.2",
+  "version": "0.23.4-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -40,8 +40,8 @@
     "react-native-modal": "^13.0.0",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.4.0-nightly.1",
-    "@ledgerhq/icons-ui": "^0.7.1",
+    "@ledgerhq/crypto-icons-ui": "^1.4.0",
+    "@ledgerhq/icons-ui": "^0.7.2",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {