alambre 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Marcos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# alambre

package/dist/components/animations/ToggleLightDark.d.ts

@@ -0,0 +1,18 @@
+import type { ColorValue } from 'react-native';
+import type { DefaultReact } from '../../types';
+type Colors = {
+    background?: ColorValue;
+    border?: ColorValue;
+    circle?: ColorValue;
+};
+type ThemeColors = {
+    light?: Colors;
+    dark?: Colors;
+};
+type ToggleProps = DefaultReact.ViewProps & {
+    toggle: () => void;
+    setLeft?: boolean;
+    colors?: ThemeColors;
+};
+declare const _default: ({ setLeft, toggle, colors, ...props }: ToggleProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/animations/ToggleLightDark.js

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import Animated, { useSharedValue, useAnimatedProps, useAnimatedStyle, withTiming, interpolateColor, withSpring, } from 'react-native-reanimated';
+import Svg from 'react-native-svg';
+import Sun from '../icons/Sun';
+import Moon from '../icons/Moon';
+import { AnimatedCircle } from '../icons/utils';
+const RADIUS = 13;
+const getColorConfig = (colors) => {
+    const { light = {}, dark = {} } = colors !== null && colors !== void 0 ? colors : {};
+    const safe = (c, fallback) => typeof c === 'string' ? c : fallback;
+    return {
+        light: {
+            background: safe(light.background, '#fff'),
+            border: safe(light.border, '#222'),
+            circle: safe(light.circle, '#222'),
+        },
+        dark: {
+            background: safe(dark.background, '#222'),
+            border: safe(dark.border, '#fff'),
+            circle: safe(dark.circle, '#fff'),
+        },
+    };
+};
+export default ({ setLeft = true, toggle, colors = {}, ...props }) => {
+    // Default colors.
+    const { light, dark } = getColorConfig(colors);
+    // Hooks.
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const [side, setSide] = useState(setLeft ? 1 : 0);
+    // Animation values.
+    const cx = useSharedValue(0);
+    const r = useSharedValue(0);
+    const progress = useSharedValue(setLeft ? 1 : 0);
+    useEffect(() => {
+        setSide(setLeft ? 0 : 1);
+    }, [setLeft]);
+    useEffect(() => {
+        progress.value = withSpring(side);
+        const offset = 73;
+        const leftOffset = offset;
+        const rightOffset = 300 - offset;
+        const { width, height } = size;
+        cx.value = withTiming(side === 0 ? leftOffset : rightOffset, { duration: 400 });
+        r.value = withTiming((width / height) * RADIUS, { duration: 300 });
+    }, [cx, progress, r, side, size]);
+    // Set width and circle variables.
+    const onLayout = (e) => {
+        const { width, height } = e.nativeEvent.layout;
+        setSize({ width, height });
+    };
+    // On press events.
+    const onBegin = () => (r.value = withTiming(r.value * 1.25, { duration: 200 }));
+    const onFinalize = () => {
+        const change = side === 0 ? 1 : 0;
+        setSide(change);
+        toggle();
+    };
+    // Animated props.
+    const circleAnimatedProps = useAnimatedProps(() => ({
+        cx: cx.value,
+        r: r.value,
+        fill: interpolateColor(progress.value, [0, 1], [light.circle, dark.circle]),
+    }));
+    const containerStyle = useAnimatedStyle(() => ({
+        backgroundColor: interpolateColor(progress.value, [0, 1], [light.background, dark.background]),
+        borderColor: interpolateColor(progress.value, [0, 1], [light.border, dark.border]),
+    }));
+    const drawAnimation = (v) => withTiming(v, { duration: 1700 });
+    return (<Pressable onPressIn={onBegin} onPressOut={onFinalize} {...props}>
+      <Animated.View onLayout={onLayout} style={[styles.container, containerStyle]}>
+        <Svg width="100%" height="100%" viewBox={'0 0 300 100'} style={styles.svg}>
+          <AnimatedCircle animatedProps={circleAnimatedProps} cy={50} opacity={0.4} fill={setLeft ? light.circle : dark.circle}/>
+        </Svg>
+        <View style={styles.row}>
+          <Sun drawIt={side === 0} style={styles.icon} iconAnimation={{ drawAnimation }}/>
+          <Moon drawIt={side === 1} style={styles.icon} iconAnimation={{ drawAnimation }}/>
+        </View>
+      </Animated.View>
+    </Pressable>);
+};
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 25,
+        borderWidth: 2,
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    svg: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 0,
+    },
+    row: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        zIndex: 1,
+    },
+    icon: {
+        height: '60%',
+        aspectRatio: 1,
+    },
+});

package/dist/components/animations/animado/AnimadoText.d.ts

@@ -0,0 +1,3 @@
+import type { AnimadoTextProps } from '../../../types/animado';
+declare const _default: ({ style, text, animation, ...props }: AnimadoTextProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/animations/animado/AnimadoText.js

@@ -0,0 +1,12 @@
+import Animated from 'react-native-reanimated';
+import { useEffect } from 'react';
+import useAnimado from './use-animado';
+export default ({ style, text, animation, ...props }) => {
+    const { animatedStyle, animateTo, } = useAnimado(style);
+    useEffect(() => {
+        animateTo(style, animation);
+    }, [animateTo, animation, style]);
+    return (<Animated.Text style={[style, animatedStyle]} {...props}>
+      {text}
+    </Animated.Text>);
+};

package/dist/components/animations/animado/AnimadoView.d.ts

@@ -0,0 +1,3 @@
+import type { AnimadoProps } from '../../../types/animado';
+declare const _default: ({ style, animation, children, ...props }: AnimadoProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/animations/animado/AnimadoView.js

@@ -0,0 +1,12 @@
+import Animated from 'react-native-reanimated';
+import { useEffect } from 'react';
+import useAnimado from './use-animado';
+export default ({ style, animation, children, ...props }) => {
+    const { animatedStyle, animateTo, } = useAnimado(style);
+    useEffect(() => {
+        animateTo(style, animation);
+    }, [animateTo, animation, style]);
+    return (<Animated.View style={[style, animatedStyle]} {...props}>
+      {children}
+    </Animated.View>);
+};

package/dist/components/animations/animado/use-animado.d.ts

@@ -0,0 +1,10 @@
+import type { State } from '../../../types/animado';
+declare const _default: (initialState: State) => {
+    animatedStyle: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    animateTo: (setNextState: State, animation?: (value: number) => number) => void;
+};
+export default _default;

package/dist/components/animations/animado/use-animado.js

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+import { useSharedValue, useAnimatedStyle, withTiming, interpolateColor, } from 'react-native-reanimated';
+const filterTargets = (state) => {
+    const flat = StyleSheet.flatten(state);
+    const { backgroundColor, borderColor, color } = flat;
+    return { backgroundColor, borderColor, color };
+};
+export default (initialState) => {
+    const targets = filterTargets(initialState);
+    const prevState = useSharedValue(targets);
+    const nextState = useSharedValue(targets);
+    const progress = useSharedValue(0);
+    const defaultAnimation = (v) => withTiming(v, { duration: 300 });
+    const animateTo = (setNextState, animation = defaultAnimation) => {
+        prevState.value = nextState.value;
+        nextState.value = filterTargets(setNextState);
+        progress.value = 0;
+        progress.value = animation(1);
+    };
+    const animatedStyle = useAnimatedStyle(() => {
+        const from = prevState.value;
+        const to = nextState.value;
+        const interpolate = (from = 'transparent', to = 'transparent') => (interpolateColor(progress.value, [0, 1], [String(from), String(to)]));
+        return {
+            backgroundColor: interpolate(from.backgroundColor, to.backgroundColor),
+            borderColor: interpolate(from.borderColor, to.borderColor),
+            color: interpolate(from.color, to.color),
+        };
+    });
+    return {
+        animatedStyle,
+        animateTo,
+    };
+};

package/dist/components/animations/reanimated/Circle.d.ts

@@ -0,0 +1,3 @@
+import 'react-native-gesture-handler';
+import React from 'react';
+export default function App(): React.JSX.Element;

package/dist/components/animations/reanimated/Circle.js

@@ -0,0 +1,57 @@
+import 'react-native-gesture-handler';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+import { Gesture, GestureDetector, } from 'react-native-gesture-handler';
+const INITIAL = { translationX: 0, translationY: 0 };
+const DELETE = { translationX: 100, translationY: 100 };
+export default function App() {
+    const pressed = useSharedValue(false);
+    const deletePosition = useSharedValue(false);
+    const offset = useSharedValue(INITIAL);
+    const pan = Gesture.Pan()
+        .onBegin(() => {
+        pressed.value = true;
+    })
+        .onChange(({ translationX, translationY }) => {
+        deletePosition.value =
+            translationX >= DELETE.translationX
+                || translationY >= DELETE.translationY;
+        offset.value = { translationX, translationY };
+    })
+        .onFinalize(() => {
+        offset.value = withSpring(INITIAL);
+        pressed.value = false;
+        deletePosition.value = false;
+    });
+    const animatedStyles = useAnimatedStyle(() => ({
+        backgroundColor: withSpring(deletePosition.value
+            ? 'red'
+            : pressed.value
+                ? '#FFE04B'
+                : '#B58DF1'),
+        transform: [
+            { scale: withTiming(pressed.value ? 1.2 : 1) },
+            { translateX: withSpring(offset.value.translationX) },
+            { translateY: withSpring(offset.value.translationY) },
+        ],
+    }));
+    return (<View style={styles.container}>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[styles.circle, animatedStyles]}/>
+      </GestureDetector>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    circle: {
+        height: 120,
+        width: 120,
+        borderRadius: 500,
+    },
+});

package/dist/components/animations/reanimated/Pop.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultReact } from '../../../types';
+declare const _default: ({ children, ...props }: DefaultReact.ViewProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/animations/reanimated/Pop.js

@@ -0,0 +1,18 @@
+import { Button } from 'react-native';
+import Animated, { LinearTransition, useSharedValue, withSpring } from 'react-native-reanimated';
+export default ({ children, ...props }) => {
+    const scale = useSharedValue(1);
+    const handlePress = () => {
+        scale.value = withSpring(scale.value + 0.2);
+    };
+    return (<Animated.View layout={LinearTransition.springify()} style={{
+            transform: [
+                {
+                    scale,
+                },
+            ],
+        }} {...props}>
+      {children}
+      <Button onPress={handlePress} title="Click me"/>
+    </Animated.View>);
+};

package/dist/components/animations/reanimated/Shake.d.ts

@@ -0,0 +1 @@
+export default function App(): import("react").JSX.Element;

package/dist/components/animations/reanimated/Shake.js

@@ -0,0 +1,37 @@
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, withRepeat, withSequence, withSpring, } from 'react-native-reanimated';
+import { View, Button, StyleSheet } from 'react-native';
+export default function App() {
+    const offset = useSharedValue(0);
+    const style = useAnimatedStyle(() => ({
+        transform: [{ translateX: offset.value }],
+    }));
+    const OFFSET = 40;
+    const TIME = 250;
+    const handlePress = () => {
+        offset.value = withSequence(
+        // start from -OFFSET
+        withTiming(-OFFSET, { duration: TIME / 2 }), 
+        // shake between -OFFSET and OFFSET 5 times
+        withRepeat(withTiming(OFFSET, { duration: TIME }), 5, true), 
+        // go back to 0 at the end
+        withSpring(0));
+    };
+    return (<View style={styles.container}>
+      <Animated.View style={[styles.box, style]}/>
+      <Button title="shake" onPress={handlePress}/>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    box: {
+        width: 100,
+        height: 100,
+        margin: 50,
+        borderRadius: 15,
+        backgroundColor: '#b58df1',
+    },
+});

package/dist/components/animations/reanimated/StyledAnimation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface AppProps {
+    width: number;
+}
+declare const _default: ({ width }: AppProps) => React.JSX.Element;
+export default _default;

package/dist/components/animations/reanimated/StyledAnimation.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, withRepeat, } from 'react-native-reanimated';
+const duration = 2000;
+export default ({ width }) => {
+    const defaultAnim = useSharedValue(width / 2 - 160);
+    const linear = useSharedValue(width / 2 - 160);
+    const animatedDefault = useAnimatedStyle(() => ({
+        transform: [{ translateX: defaultAnim.value }],
+    }));
+    const animatedChanged = useAnimatedStyle(() => ({
+        transform: [{ translateX: linear.value }],
+    }));
+    React.useEffect(() => {
+        linear.value = withRepeat(
+        // highlight-next-line
+        withTiming(-linear.value, {
+            duration,
+            easing: Easing.back(3),
+        }), -1, true);
+        defaultAnim.value = withRepeat(
+        // highlight-next-line
+        withTiming(-defaultAnim.value, {
+            duration,
+        }), -1, true);
+    }, [defaultAnim, linear]);
+    return (<View style={styles.container}>
+      <Animated.View style={[styles.box, animatedDefault]}>
+        <Text style={styles.text}>inout</Text>
+      </Animated.View>
+      <Animated.View style={[styles.box, animatedChanged]}>
+        <Text style={styles.text}>linear</Text>
+      </Animated.View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    box: {
+        height: 80,
+        width: 80,
+        margin: 20,
+        borderWidth: 1,
+        borderColor: '#b58df1',
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        color: '#b58df1',
+        textTransform: 'uppercase',
+        fontWeight: 'bold',
+    },
+});

package/dist/components/base/SafeAreaView.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultReact } from '../../types';
+declare const _default: ({ children, ...props }: DefaultReact.SafeAreaViewProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/base/SafeAreaView.js

@@ -0,0 +1,6 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+export default ({ children, ...props }) => {
+    return (<SafeAreaView {...props}>
+      {children}
+    </SafeAreaView>);
+};

package/dist/components/base/SubTitle.d.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from '../../types/default-react';
+declare const _default: ({ style, ...props }: TextProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/base/SubTitle.js

@@ -0,0 +1,11 @@
+import Text from './Text';
+export default ({ style, ...props }) => {
+    return (<Text style={[
+            {
+                fontSize: 18,
+                opacity: 0.8,
+                marginBottom: 6,
+            },
+            style,
+        ]} {...props}/>);
+};

package/dist/components/base/Text.d.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from '../../types/default-react';
+declare const _default: (props: TextProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/base/Text.js

@@ -0,0 +1,4 @@
+import { Text } from 'react-native';
+export default (props) => {
+    return (<Text {...props}/>);
+};

package/dist/components/base/Title.d.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from '../../types/default-react';
+declare const _default: ({ style, ...props }: TextProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/base/Title.js

@@ -0,0 +1,11 @@
+import Text from './Text';
+export default ({ style, ...props }) => {
+    return (<Text style={[
+            {
+                fontSize: 24,
+                fontWeight: 'bold',
+                marginBottom: 8,
+            },
+            style,
+        ]} {...props}/>);
+};

package/dist/components/base/View.d.ts

@@ -0,0 +1,3 @@
+import type { ViewProps } from '../../types/default-react';
+declare const _default: ({ children, ...props }: ViewProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/base/View.js

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+export default ({ children, ...props }) => {
+    return (<View {...props}>
+      {children}
+    </View>);
+};

package/dist/components/base/index.d.ts

@@ -0,0 +1,6 @@
+import SafeAreaView from './SafeAreaView';
+import SubTitle from './SubTitle';
+import Text from './Text';
+import Title from './Title';
+import View from './View';
+export { SafeAreaView, SubTitle, Text, Title, View, };

package/dist/components/base/index.js

@@ -0,0 +1,6 @@
+import SafeAreaView from './SafeAreaView';
+import SubTitle from './SubTitle';
+import Text from './Text';
+import Title from './Title';
+import View from './View';
+export { SafeAreaView, SubTitle, Text, Title, View, };

package/dist/components/base/input/buttons/BorderButton.d.ts

@@ -0,0 +1,8 @@
+import type { TextStyle } from 'react-native';
+import type { PressableProps } from '../../../../types/default-react';
+type BorderButtonProps = PressableProps & {
+    label: string;
+    textStyle: TextStyle;
+};
+declare const _default: ({ label, textStyle, onPressIn, onPressOut, ...props }: BorderButtonProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/base/input/buttons/BorderButton.js

@@ -0,0 +1,20 @@
+import { Pressable } from 'react-native';
+import { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import AnimadoText from '../../../animations/animado/AnimadoText';
+export default ({ label, textStyle, onPressIn, onPressOut, ...props }) => {
+    const scale = useSharedValue(1);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+    }));
+    const handlePressIn = (e) => {
+        scale.value = withSpring(0.75);
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(e);
+    };
+    const handlePressOut = (e) => {
+        scale.value = withSpring(1);
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(e);
+    };
+    return (<Pressable onPressIn={handlePressIn} onPressOut={handlePressOut} {...props}>
+      <AnimadoText text={label} style={[textStyle, animatedStyle]}/>
+    </Pressable>);
+};

package/dist/components/base/input/buttons/index.d.ts

@@ -0,0 +1 @@
+export { default as BorderButton } from './BorderButton';

package/dist/components/base/input/buttons/index.js

@@ -0,0 +1 @@
+export { default as BorderButton } from './BorderButton';

package/dist/components/icons/Arrow.d.ts

@@ -0,0 +1,9 @@
+import type { ColorValue } from 'react-native';
+import type { IconstTypes } from '../../types';
+type ArrowProps = IconstTypes.BaseIcon & {
+    drawIt?: boolean;
+    color: ColorValue;
+    lineWidth: number;
+};
+declare const _default: ({ drawIt, color, lineWidth, rotation, style, ...props }: ArrowProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/icons/Arrow.js

@@ -0,0 +1,43 @@
+import Svg from 'react-native-svg';
+import Line from './base/Line';
+import { View } from '../base';
+const body = {
+    x1: 20, y1: 50,
+    // --------- //
+    x2: 180, y2: 50,
+};
+const arrowUp = {
+    x1: 130, y1: 0,
+    // --------- //
+    x2: 180, y2: 50,
+};
+const arrowDown = {
+    x1: 130, y1: 100,
+    // --------- //
+    x2: 180, y2: 50,
+};
+export default ({ drawIt = false, color, lineWidth, rotation = 0, style, ...props }) => {
+    const baseConfig = {
+        stroke: color,
+        strokeWidth: lineWidth,
+    };
+    const rotationTransform = {
+        transform: [{ rotate: `${rotation}deg` }],
+    };
+    return (<View style={[style, rotationTransform]} {...props}>
+      <Svg height='100%' width='100%' viewBox='0 0 200 100'>
+        <Line line={{
+            ...body,
+            ...baseConfig,
+        }} drawIt={drawIt}/>
+        <Line line={{
+            ...arrowUp,
+            ...baseConfig,
+        }} drawIt={drawIt}/>
+        <Line line={{
+            ...arrowDown,
+            ...baseConfig,
+        }} drawIt={drawIt}/>
+      </Svg>
+    </View>);
+};

package/dist/components/icons/Cross.d.ts

@@ -0,0 +1,8 @@
+import type { IconstTypes } from '../../types';
+import type { ColorValue } from 'react-native';
+type CrossProps = IconstTypes.BaseIcon & {
+    color?: ColorValue;
+    lineWidth?: number;
+};
+declare const _default: ({ drawIt, color, lineWidth, rotation, iconAnimation, style, ...props }: CrossProps) => import("react").JSX.Element;
+export default _default;

package/dist/components/icons/Cross.js

@@ -0,0 +1,37 @@
+import Svg from 'react-native-svg';
+import Line from './base/Line';
+import { View } from '../base';
+import { svgBaseConfig } from './utils';
+export default ({ drawIt = true, color = 'black', lineWidth = 3, rotation = 0, iconAnimation, style, ...props }) => {
+    const baseLineConfig = {
+        stroke: color,
+        strokeWidth: lineWidth,
+    };
+    const topLeft = {
+        line: {
+            ...baseLineConfig,
+            x1: 10, y1: 10,
+            x2: 90, y2: 90,
+        },
+        drawIt,
+        iconAnimation,
+    };
+    const bottomLeft = {
+        line: {
+            ...baseLineConfig,
+            x1: 90, y1: 10,
+            x2: 10, y2: 90,
+        },
+        drawIt,
+        iconAnimation,
+    };
+    const rotationTransform = {
+        transform: [{ rotate: `${rotation}deg` }],
+    };
+    return (<View style={[style, rotationTransform]} {...props}>
+      <Svg {...svgBaseConfig}>
+        <Line {...topLeft}/>
+        <Line {...bottomLeft}/>
+      </Svg>
+    </View>);
+};