@ledgerhq/native-ui 0.3.0 → 0.6.1

package/components/Text/index.d.ts

@@ -1,21 +1,19 @@
 import React from "react";
-import { TextProps } from "react-native";
-import { FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps } from "styled-system";
+import { TextProps, TextStyle } from "react-native";
+import { FontSizeProps, TextAlignProps, LineHeightProps } from "styled-system";
+import { BaseStyledProps } from "../styled";
 import { FontWeightTypes } from "./getTextStyle";
 import { TextVariants } from "../../styles/theme";
-export interface BaseTextProps extends TextProps, FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps {
+export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps, TextAlignProps, LineHeightProps {
     variant?: TextVariants;
     fontWeight?: FontWeightTypes;
     fontFamily?: string;
     fontSize?: number | string | TextVariants;
     color?: string;
-    mt?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mr?: number | string;
-    paddingTop?: number;
     lineHeight?: number;
     bracket?: boolean;
+    textTransform?: TextStyle["textTransform"];
+    uppercase?: boolean;
     children: React.ReactNode;
 }
 declare const Text: ({ children, bracket, ...props }: BaseTextProps) => JSX.Element;

package/components/Text/index.js

@@ -11,25 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import { fontSize, textAlign, color, space, lineHeight, border, } from "styled-system";
+import { compose, fontSize, textAlign, lineHeight, system, } from "styled-system";
+import baseStyled from "../styled";
 import BracketRight from "../../icons/BracketLeft";
 import BracketLeft from "../../icons/BracketRight";
 import { getColor } from "../../styles";
 import { getTextStyle } from "./getTextStyle";
-const Base = styled.Text.attrs((p) => {
+const uppercase = system({
+    uppercase: {
+        property: "textTransform",
+        transform: (value) => (value ? "uppercase" : "none"),
+    },
+});
+const textTransform = system({
+    textTransform: {
+        property: "textTransform",
+    },
+});
+const Base = baseStyled.Text.attrs((p) => {
     var _a;
     return ({
         fontSize: p.fontSize ? p.fontSize : (_a = p.variant) !== null && _a !== void 0 ? _a : "paragraph",
-        color: p.color || "palette.neutral.c100",
+        color: p.color || "neutral.c100",
     });
 }) `
   ${(p) => getTextStyle(p)}
-  ${lineHeight};
-  ${fontSize};
-  ${textAlign};
-  ${color};
-  ${space};
-  ${border};
+  ${compose(lineHeight, fontSize, textAlign, uppercase, textTransform)}
   justify-content: center;
   align-items: center;
 `;
@@ -39,7 +46,7 @@ const T = styled.View `
   align-items: center;
 `;
 const BracketText = (_a) => {
-    var { children, color = "palette.neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
+    var { children, color = "neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
     const size = lineHeight || getTextStyle(props).lineHeight;
     const theme = useTheme();
     const c = theme ? getColor(theme, color) : "transparent";

package/components/chart/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Item } from "./types";
 export declare type ChartProps = {
     data: Array<Item>;

package/components/chart/index.js

@@ -6,7 +6,7 @@ import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryScatter, }
 import { hex } from "../../styles/helpers";
 import Flex from "../Layout/Flex";
 const Container = styled(Flex) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
 `;
 const sortByDate = (a, b) => {
     if (a.date.getTime() < b.date.getTime())
@@ -22,7 +22,7 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
         React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { x: [0, 5], y: [30, 10] } },
             React.createElement(VictoryAxis, { dependentAxis: true, crossAxis: true, style: {
                     grid: {
-                        stroke: theme.colors.palette.neutral.c40,
+                        stroke: theme.colors.neutral.c40,
                         strokeDasharray: "4 4",
                     },
                     axisLabel: { display: "none" },
@@ -32,11 +32,11 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
                 } }),
             React.createElement(VictoryAxis, { crossAxis: false, tickFormat: (timestamp) => moment(timestamp).format(tickFormat), style: {
                     axis: {
-                        stroke: theme.colors.palette.neutral.c40,
+                        stroke: theme.colors.neutral.c40,
                         strokeDasharray: "4 4",
                     },
                     tickLabels: {
-                        fill: theme.colors.palette.neutral.c80,
+                        fill: theme.colors.neutral.c80,
                         fontSize: 12,
                         lineHeight: 14.52,
                     },
@@ -45,14 +45,14 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
             React.createElement(Defs, null,
                 React.createElement(LinearGradient, { id: "chartGradient", x1: "0.5", x2: "0.5", y1: "0", y2: "1" },
                     React.createElement(Stop, { stopColor: hex(color), stopOpacity: "0.11" }),
-                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.palette.neutral.c00), stopOpacity: "0" }))),
+                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.neutral.c00), stopOpacity: "0" }))),
             React.createElement(VictoryArea, { data: sortData, interpolation: "monotoneX", sortKey: "date", x: "date", y: valueKey, style: { data: { fill: `url(#chartGradient)` } }, standalone: false }),
             React.createElement(VictoryLine, { data: sortData, interpolation: "monotoneX", x: "date", y: valueKey, style: { data: { stroke: color } } }),
             React.createElement(VictoryScatter, { style: {
                     data: {
                         stroke: color,
                         strokeWidth: 3,
-                        fill: theme.colors.palette.background.main,
+                        fill: theme.colors.background.main,
                     },
                 }, size: 5, data: [sortData[sortData.length - 1]], x: "date", y: valueKey }))));
 };

package/components/cta/Button/getButtonStyle.js

@@ -1,29 +1,29 @@
 export function getButtonColors(colors) {
     return {
         default: {
-            primaryColor: colors.palette.neutral.c100,
+            primaryColor: colors.neutral.c100,
             secondaryColor: "rgba(0,0,0,0)",
         },
         disabled: {
-            primaryColor: colors.palette.neutral.c50,
-            secondaryColor: colors.palette.neutral.c30,
+            primaryColor: colors.neutral.c50,
+            secondaryColor: colors.neutral.c30,
         },
         main: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.neutral.c100,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.neutral.c100,
         },
         shade: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.neutral.c100,
-            tertiaryColor: colors.palette.neutral.c40,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.neutral.c100,
+            tertiaryColor: colors.neutral.c40,
         },
         error: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.error.c100,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.error.c100,
         },
         color: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.primary.c80,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.primary.c80,
         },
     };
 }

package/components/cta/Button/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { SpaceProps } from "styled-system";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-export declare type ButtonProps = TouchableOpacityProps & SpaceProps & {
+import { BaseStyledProps } from "../../styled";
+export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
@@ -17,19 +17,8 @@ export declare type ButtonProps = TouchableOpacityProps & SpaceProps & {
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;
-} & TouchableOpacityProps & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    Icon?: React.ComponentType<{
-        size: number;
-        color: string;
-    }> | null | undefined;
-    type?: "default" | "main" | "shade" | "error" | "color" | undefined;
-    size?: "large" | "small" | "medium" | undefined;
-    iconPosition?: "left" | "right" | undefined;
-    outline?: boolean | undefined;
-    disabled?: boolean | undefined;
-    pressed?: boolean | undefined;
-    children?: React.ReactNode;
-}, never>;
+    sizeVariant?: ButtonProps["size"];
+} & Omit<ButtonProps, "size">, never>;
 declare const Button: (props: ButtonProps) => React.ReactElement;
 export declare const PromisableButton: (props: ButtonProps) => React.ReactElement;
 export default Button;

package/components/cta/Button/index.js

@@ -9,11 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useState } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { color, border, space } from "styled-system";
 import { ActivityIndicator, TouchableOpacity, } from "react-native";
 import { buttonSizeStyle, getButtonColorStyle, } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
+import baseStyled from "../../styled";
 const IconContainer = styled.View `
   ${(p) => p.iconButton
     ? ""
@@ -21,12 +21,11 @@ const IconContainer = styled.View `
         ? `margin-right: 10px;`
         : `margin-left: 10px;`}
 `;
-export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, getButtonColorStyle(p.theme.colors, p).button))) `
-  ${color};
-  ${border};
-  ${space};
+export const Base = baseStyled(TouchableOpacity).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
+    // Avoid conflict with styled-system's size property by nulling size and renaming it
+    size: undefined, sizeVariant: p.size }))) `
+
   border-radius: ${(p) => p.theme.space[10]}px;
-  height: ${(p) => p.theme.space[10]}px;
   padding: 0 ${(p) => p.theme.space[7]}px;
   flex-direction: row;
   border-style: solid;
@@ -36,7 +35,7 @@ export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, get
   align-content: center;
   overflow: hidden;
   position: relative;
-  ${(p) => buttonSizeStyle[p.size || "medium"]}
+  ${(p) => buttonSizeStyle[p.sizeVariant || "medium"]}
 
   ${(p) => (p.iconButton ? `padding: 0; width: ${p.theme.space[10]}px;` : "")}
 `;
@@ -69,12 +68,12 @@ const ButtonContainer = (props) => {
         iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
 };
 const Button = (props) => {
-    const { Icon, children, type = "default", size = "medium" } = props;
-    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size }))));
+    const { Icon, children, type = "default" } = props;
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type }))));
 };
 export const PromisableButton = (props) => {
-    const { Icon, children, onPress, type = "main", size = "medium", disabled = false, } = props;
+    const { Icon, children, onPress, type = "main", disabled = false } = props;
     const [spinnerOn, setSpinnerOn] = useState(false);
     const theme = useTheme();
     const onPressHandler = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
@@ -88,9 +87,9 @@ export const PromisableButton = (props) => {
             setSpinnerOn(false);
         }
     }), [onPress]);
-    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size, hide: spinnerOn })),
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: spinnerOn })),
         React.createElement(SpinnerContainer, null,
-            React.createElement(ActivityIndicator, { color: theme.colors.palette.neutral.c50, animating: spinnerOn }))));
+            React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn }))));
 };
 export default Button;

package/components/cta/Link/getLinkStyle.js

@@ -1,16 +1,16 @@
 export function getLinkColors(colors) {
     return {
         default: {
-            disabled: colors.palette.neutral.c50,
-            main: colors.palette.neutral.c100,
-            color: colors.palette.primary.c80,
-            shade: colors.palette.neutral.c70,
+            disabled: colors.neutral.c50,
+            main: colors.neutral.c100,
+            color: colors.primary.c80,
+            shade: colors.neutral.c70,
         },
         reversed: {
-            disabled: colors.palette.neutral.c80,
-            main: colors.palette.neutral.c00,
-            color: colors.palette.primary.c60,
-            shade: colors.palette.neutral.c50,
+            disabled: colors.neutral.c80,
+            main: colors.neutral.c00,
+            color: colors.primary.c60,
+            shade: colors.neutral.c50,
         },
     };
 }

package/components/index.d.ts

@@ -1,10 +1,13 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export * from "./Loader";
+export { default as ProgressBar } from "./ProgressBar";
+export * as Transitions from "./transitions";

package/components/index.js

@@ -1,10 +1,14 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export * from "./Loader";
+export { default as ProgressBar } from "./ProgressBar";
+import * as Transitions_1 from "./transitions";
+export { Transitions_1 as Transitions };

package/components/message/Alert/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type AlertType = "info" | "warning" | "error";
 export interface AlertProps {
     type?: AlertType;

package/components/message/Alert/index.js

@@ -13,16 +13,16 @@ const icons = {
 };
 const alertColors = {
     info: {
-        backgroundColor: "palette.primary.c20",
-        color: "palette.primary.c90",
+        backgroundColor: "primary.c20",
+        color: "primary.c90",
     },
     warning: {
-        backgroundColor: "palette.warning.c30",
-        color: "palette.warning.c100",
+        backgroundColor: "warning.c30",
+        color: "warning.c100",
     },
     error: {
-        backgroundColor: "palette.error.c30",
-        color: "palette.error.c100",
+        backgroundColor: "error.c30",
+        color: "error.c100",
     },
 };
 const StyledIconContainer = styled.View `
@@ -44,5 +44,5 @@ export default function Alert({ type = "info", title, showIcon = true, }) {
     const textColor = getColor(theme, alertColors[type || "info"].color);
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, icons[type || "info"]({ size: 20, color: textColor }))),
-        React.createElement(Text, { color: textColor }, title)));
+        React.createElement(Text, { color: textColor, flexShrink: 1 }, title)));
 }

package/components/{drawer → message}/Notification/index.d.ts

@@ -1,17 +1,18 @@
 import React from "react";
 import { TextProps, TouchableOpacityProps } from "react-native";
 declare type Props = {
-    Icon: React.ComponentType<{
+    Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
-    color?: string;
+    iconColor?: string;
     variant?: "primary" | "secondary";
     title: string;
     subtitle?: string;
     numberOfLines?: TextProps["numberOfLines"];
     onClose?: TouchableOpacityProps["onPress"];
-    onLearnMore?: TouchableOpacityProps["onPress"];
+    linkText?: string;
+    onLinkPress?: TouchableOpacityProps["onPress"];
 };
-export default function Notification({ Icon, color, variant, numberOfLines, title, subtitle, onClose, onLearnMore, }: Props): React.ReactElement;
+export default function Notification({ Icon, iconColor, variant, numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }: Props): React.ReactElement;
 export {};

package/components/message/Notification/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import styled, { useTheme } from "styled-components/native";
+import FlexBox from "../../Layout/Flex";
+import { TouchableOpacity, } from "react-native";
+import Text from "../../Text";
+import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
+import { Flex } from "../../Layout";
+const NotificationContainer = styled.View `
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  ${(p) => p.variant === "primary" &&
+    `
+     padding: 16px;
+  `}
+  background-color: ${(p) => p.variant === "primary" ? p.theme.colors.primary.c90 : "transparent"};
+  border-radius: ${(p) => `${p.theme.radii[1]}px`};
+`;
+export default function Notification({ Icon, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
+    const { colors } = useTheme();
+    const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
+    return (React.createElement(NotificationContainer, { variant: variant },
+        Icon && (React.createElement(FlexBox, { mr: 16 },
+            React.createElement(Icon, { size: 20, color: iconColor || textColor }))),
+        React.createElement(FlexBox, { flexShrink: 1 },
+            React.createElement(Text, { variant: "body", fontWeight: "medium", color: textColor, numberOfLines: numberOfLines }, title),
+            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: variant === "primary" ? colors.neutral.c00 : colors.neutral.c80, mt: 2 }, subtitle)),
+            linkText && onLinkPress && (React.createElement(Flex, { mt: 3 },
+                React.createElement(TouchableOpacity, { onPress: onLinkPress },
+                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor }, linkText))))),
+        onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
+            React.createElement(TouchableOpacity, { onPress: onClose },
+                React.createElement(CloseMedium, { size: 14, color: textColor }))))));
+}

package/components/message/index.d.ts

@@ -1 +1,2 @@
 export { default as Alert } from "./Alert";
+export { default as Notification } from "./Notification";

package/components/message/index.js

@@ -1 +1,2 @@
 export { default as Alert } from "./Alert";
+export { default as Notification } from "./Notification";

package/components/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="styled-components-react-native" />
+import { ReactNativeStyledInterface, DefaultTheme } from "styled-components/native";
+import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps, BorderProps, BackgroundProps } from "styled-system";
+import { InterpolationFunction } from "styled-components";
+export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & OverflowProps & BorderProps & BackgroundProps & {
+    columnGap?: string | number;
+    rowGap?: string | number;
+    color?: string;
+    display?: string;
+    position?: string;
+    maxHeight?: number;
+};
+export declare const baseStyles: InterpolationFunction<unknown>;
+declare const _default: ReactNativeStyledInterface<DefaultTheme>;
+export default _default;

package/components/styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components/native";
+import { compose, flexbox, space, position, color, layout, overflow, border, background, } from "styled-system";
+export const baseStyles = compose(flexbox, space, position, color, layout, overflow, border, background);
+const proxyStyled = new Proxy(styled, {
+    apply(target, thisArg, argumentsList) {
+        return styled(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get(target, property) {
+        return styled(target[property].apply(styled, [baseStyles]));
+    },
+});
+export default proxyStyled;

package/components/tags/Badge/index.js

@@ -4,22 +4,22 @@ import Text from "../../Text";
 const badgesStyle = {
     main: {
         default: {
-            color: "palette.neutral.c80",
+            color: "neutral.c80",
             borderWidth: 1,
-            borderColor: "palette.neutral.c40",
+            borderColor: "neutral.c40",
         },
         active: {
-            color: "palette.neutral.c00",
-            backgroundColor: "palette.neutral.c100",
+            color: "neutral.c00",
+            backgroundColor: "neutral.c100",
         },
     },
     primary: {
         default: {
-            color: "palette.primary.c90",
+            color: "primary.c90",
         },
         active: {
-            color: "palette.primary.c90",
-            backgroundColor: "palette.primary.c20",
+            color: "primary.c90",
+            backgroundColor: "primary.c20",
         },
     },
 };

package/components/transitions/Fade.d.ts

@@ -0,0 +1,5 @@
+import { TransitionProps } from "./types";
+/**
+ * A fade-in / fade-out transition changing the opacity of its children based on their status.
+ */
+export declare function Fade({ status, duration, style, children }: TransitionProps): JSX.Element;

package/components/transitions/Fade.js

@@ -0,0 +1,32 @@
+import React, { useRef, useMemo, useEffect } from "react";
+import { Animated } from "react-native";
+/**
+ * A fade-in / fade-out transition changing the opacity of its children based on their status.
+ */
+export function Fade({ status, duration, style, children }) {
+    const fadeAnim = useRef(new Animated.Value(status === "entered" ? 1 : 0)).current;
+    const fadeIn = useMemo(() => Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true,
+    }), [duration, fadeAnim]);
+    const fadeOut = useMemo(() => Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+    }), [duration, fadeAnim]);
+    useEffect(() => {
+        if (status === "entering") {
+            fadeIn.start();
+        }
+        if (status === "exiting") {
+            fadeOut.start();
+        }
+    }, [fadeIn, fadeOut, status]);
+    return (React.createElement(Animated.View, { style: [
+            {
+                opacity: fadeAnim,
+            },
+            style,
+        ] }, children));
+}

package/components/transitions/Slide.d.ts

@@ -0,0 +1,11 @@
+import { TransitionProps } from "./types";
+export interface SlideProps extends TransitionProps {
+    /**
+     * The direction of the slide animation.
+     */
+    direction?: "left" | "right";
+}
+/**
+ * A slide left/right transition translating its children based on their status and a given direction.
+ */
+export declare function Slide({ status, duration, style, direction, children, }: SlideProps): JSX.Element;

package/components/transitions/Slide.js

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { Animated, Platform, Dimensions } from "react-native";
+const WEB = Platform.OS === "web";
+/**
+ * A slide left/right transition translating its children based on their status and a given direction.
+ */
+export function Slide({ status, duration, style, direction = "left", children, }) {
+    const [width, setWidth] = useState(Dimensions.get("window").width);
+    const styleRef = useRef(new Animated.Value(0)).current;
+    const previousStatus = useRef(null);
+    useEffect(() => () => {
+        previousStatus.current = status;
+    }, [status]);
+    const animateIn = useMemo(() => Animated.timing(styleRef, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+    }), [duration, styleRef]);
+    const animateOut = useMemo(() => Animated.timing(styleRef, {
+        toValue: direction === "left" ? -1 : 1,
+        duration,
+        useNativeDriver: true,
+    }), [direction, duration, styleRef]);
+    useEffect(() => {
+        if (status === "entering") {
+            if (previousStatus.current !== "exiting") {
+                styleRef.setValue(direction === "left" ? 1 : -1);
+            }
+            animateIn.start();
+        }
+        if (status === "exiting") {
+            animateOut.start();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    return (React.createElement(Animated.View, { style: [
+            {
+                transform: [
+                    {
+                        translateX: styleRef.interpolate({
+                            inputRange: [-1, 1],
+                            outputRange: WEB ? ["-100%", "100%"] : [-width, width],
+                        }),
+                    },
+                ],
+            },
+            style,
+        ], onLayout: ({ nativeEvent }) => setWidth(nativeEvent.layout.width) }, children));
+}