@bigbinary/neetoui-rn 0.0.223 → 0.0.225

package/src/components/{SegmentedTopBar.js → SegmentedTopBar.jsx}

@@ -1,12 +1,13 @@
-/* eslint-disable react/prop-types */
-import PropTypes from "prop-types";
 import React, { useEffect } from "react";
 import { Dimensions, Platform, StyleSheet } from "react-native";
+
+import PropTypes from "prop-types";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring,
 } from "react-native-reanimated";
+
 import { Typography, Touchable } from "@components";
 import { theme } from "@theme";
 
@@ -88,17 +89,14 @@ export const SegmentedTopBar = ({
   const tabTranslateValue = useSharedValue(0);
   useEffect(() => {
     tabTranslateValue.value = withSpring(
-      index * (translateValue * 1),
+      index * Number(translateValue),
       DEFAULT_SPRING_CONFIG
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index]);
 
-  const tabTranslateAnimatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateX: tabTranslateValue.value }],
-    };
-  });
+  const tabTranslateAnimatedStyles = useAnimatedStyle(() => ({
+    transform: [{ translateX: tabTranslateValue.value }],
+  }));
 
   return (
     <Animated.View
@@ -129,20 +127,20 @@ export const SegmentedTopBar = ({
 
         return (
           <Touchable
-            onPress={() => navigation.navigate(route.name)}
-            key={i}
+            alignItems="center"
+            elevation={Platform.OS === "android" ? 9 : null}
             flex={1}
             height={height}
-            alignItems="center"
             justifyContent="center"
-            elevation={Platform.OS === "android" ? 9 : null}
+            key={i}
+            onPress={() => navigation.navigate(route.name)}
             {...currentIndexTextStyle}
           >
             <Typography
-              fontSize="xs"
-              textAlign="center"
               color="font.grey800"
               fontFamily="sf500"
+              fontSize="xs"
+              textAlign="center"
             >
               {label}
             </Typography>
@@ -159,7 +157,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     borderRadius: 8,
-    width: width,
+    width,
   },
   defaultSegmentedControlWrapper: {
     position: "relative",
@@ -168,7 +166,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     borderRadius: 8,
     backgroundColor: "#F6F6FA",
-    width: width,
+    width,
     marginBottom: 5,
   },
   movingSegmentStyle: {

package/src/components/{Select.js → Select.jsx}

@@ -1,6 +1,8 @@
 import React, { useState, useContext, useEffect } from "react";
-import Icon from "react-native-remix-icon";
+import { TouchableWithoutFeedback, Keyboard } from "react-native";
+
 import PropTypes from "prop-types";
+import { ScrollView } from "react-native-gesture-handler";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -8,9 +10,8 @@ import Animated, {
   Easing,
   runOnJS,
 } from "react-native-reanimated";
-import { TouchableWithoutFeedback, Keyboard } from "react-native";
+import Icon from "react-native-remix-icon";
 import { ThemeContext } from "styled-components/native";
-import { ScrollView } from "react-native-gesture-handler";
 
 import {
   Card,
@@ -40,9 +41,9 @@ const DropdownItem = ({
       {...(isSelectedItem && selectedItemContainerStyle)}
     >
       <Typography
+        color={isSelectedItem ? "font.white" : "font.grey"}
         fontFamily="sf400"
         fontSize="s"
-        color={isSelectedItem ? "font.white" : "font.grey"}
         {...itemLabelStyle}
         {...(isSelectedItem && selectedItemLabelStyle)}
       >
@@ -146,6 +147,7 @@ export const Select = ({
   const filteredOptions = options.filter((item, index) => {
     const label = labelExtractor(item, index);
     if (searchQuery?.length === 0) return true;
+
     return formatStr(label).includes(formatStr(searchQuery));
   });
 
@@ -170,8 +172,8 @@ export const Select = ({
   const selectedOptionLabel = labelExtractor(value || {});
   const selectedOptionValue = valueExtractor(value || {});
 
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
+  const animatedStyles = useAnimatedStyle(
+    () => ({
       height: withTiming(
         dropdownAnimatedHeight.value,
         {
@@ -184,8 +186,9 @@ export const Select = ({
           }
         }
       ),
-    };
-  }, []);
+    }),
+    []
+  );
 
   const toggleAnimation = () => {
     dropdownAnimatedHeight.value =
@@ -198,6 +201,7 @@ export const Select = ({
     if (!showDropdown) {
       setShowDropdown(true);
     }
+
     if (showDropdown) {
       toggleAnimation();
     }
@@ -212,16 +216,15 @@ export const Select = ({
     if (showDropdown) {
       dropdownAnimatedHeight.value = dropdownHeight;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showDropdown, dropdownHeight]);
 
   return (
     <Container {...containerStyle}>
       <Typography
+        color="font.base"
         fontFamily="sf400"
-        mb={1}
         fontSize="s"
-        color="font.base"
+        mb={1}
         {...labelStyle}
       >
         {label}
@@ -231,25 +234,25 @@ export const Select = ({
         onPress={handleOpenDropdown}
       >
         <Container
-          borderWidth={1}
+          alignItems="center"
           borderColor="border.grey400"
-          p={2}
+          borderWidth={1}
           flexDirection="row"
           justifyContent="space-between"
-          alignItems="center"
+          p={2}
           {...inputContainerStyle}
           {...rest}
         >
-          <Typography fontFamily="sf400" fontSize="s" color="font.grey">
+          <Typography color="font.grey" fontFamily="sf400" fontSize="s">
             {selectedOptionLabel || placeholder}
           </Typography>
           {isLoading ? (
             <Loader color={theme.colors.background.base} />
           ) : (
             <Icon
+              color="grey"
               name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
               size="20"
-              color="grey"
             />
           )}
         </Container>
@@ -259,37 +262,36 @@ export const Select = ({
           <Animated.View style={animatedStyles}>
             <Card
               bg="background.white"
-              borderWidth={1}
               borderColor="border.grey400"
+              borderWidth={1}
               maxHeight={dropdownHeight}
               {...dropdownContainerStyle}
             >
               {isSearchable && (
                 <Container p={1} {...searchInputContainerStyle}>
                   <Input
-                    placeholder="Search"
-                    onChangeText={setSearchQuery}
                     fontSize="s"
-                    // eslint-disable-next-line react-native/no-inline-styles
+                    placeholder="Search"
                     containerStyles={{
                       height: searchInputHeight,
                       justifyContent: "center",
                     }}
+                    onChangeText={setSearchQuery}
                     {...searchInputStyle}
                   />
                 </Container>
               )}
               {isOptionsEmpty && !(isSearchedOptionsEmpty && showCreateOption) && (
                 <Container
+                  alignItems="center"
                   height={emptyOptionsPlaceholderHeight}
                   justifyContent="center"
-                  alignItems="center"
                   {...emptyOptionsContainerStyle}
                 >
                   <Typography
+                    color="font.grey"
                     fontFamily="sf400"
                     fontSize="s"
-                    color="font.grey"
                     {...emptyOptionsLabelStyle}
                   >
                     {emptyOptionsPlaceholder || "No Options"}
@@ -298,19 +300,19 @@ export const Select = ({
               )}
               {isSearchedOptionsEmpty && showCreateOption && (
                 <Touchable
+                  alignItems="center"
                   height={emptySearchedOptionsHeight}
                   justifyContent="center"
-                  alignItems="center"
                   onPress={() => onPressCreateOption(searchQuery)}
                   {...createSearchedOptionContainerStyle}
                 >
                   {showCreateOptionLoader ? (
-                    <Loader size="s" color={theme.colors.background.base} />
+                    <Loader color={theme.colors.background.base} size="s" />
                   ) : (
                     <Typography
+                      color="font.grey"
                       fontFamily="sf400"
                       fontSize="s"
-                      color="font.grey"
                       {...createSearchedOptionLabelStyle}
                     >
                       {createOptionLabel || `Create ${searchQuery} option`}
@@ -328,17 +330,18 @@ export const Select = ({
                   const optionValue = valueExtractor(item, index);
                   const isSelectedItem =
                     selectedOptionValue && selectedOptionValue === optionValue;
+
                   return (
                     <DropdownItem
-                      key={index}
-                      label={optionLabel}
-                      isSelectedItem={isSelectedItem}
                       defaultDropdownItemHeight={defaultDropdownItemHeight}
-                      onPress={() => handleItemSelection(item, index)}
+                      isSelectedItem={isSelectedItem}
                       itemContainerStyle={itemContainerStyle}
-                      selectedItemContainerStyle={selectedItemContainerStyle}
                       itemLabelStyle={itemLabelStyle}
+                      key={index}
+                      label={optionLabel}
+                      selectedItemContainerStyle={selectedItemContainerStyle}
                       selectedItemLabelStyle={selectedItemLabelStyle}
+                      onPress={() => handleItemSelection(item, index)}
                     />
                   );
                 })}

package/src/components/{SocialButton.js → SocialButton.jsx}

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
@@ -44,30 +45,30 @@ export const SocialButton = ({
 
   return (
     <Touchable
-      rippleColor={theme.colors.background.grey800}
-      disabled={disabled}
+      alignItems="center"
       bg="transparent"
-      height={48}
-      width="100%"
+      borderColor={theme.colors.border.grey800}
       borderRadius={8}
       borderWidth={1}
-      borderColor={theme.colors.border.grey800}
-      alignItems="center"
+      disabled={disabled}
+      height={48}
       justifyContent="center"
+      rippleColor={theme.colors.background.grey800}
+      width="100%"
       {...rest}
     >
       {isLoading ? (
         <Loader color={theme.colors.background.grey800} />
       ) : (
         <>
-          <Container position="absolute" left={17}>
+          <Container left={17} position="absolute">
             {variant === "apple" && <AppleLogo />}
             {variant === "google" && <GoogleLogo />}
           </Container>
           <Typography
             color={theme.colors.font.primary}
-            fontSize="m"
             fontFamily={theme.fonts.sf500}
+            fontSize="m"
             {...labelStyle}
           >
             Continue with {capitalize(variant)}

package/src/components/{Toast.js → Toast.jsx}

@@ -1,18 +1,19 @@
 import * as React from "react";
-import PropTypes from "prop-types";
-import T from "react-native-toast-message";
-import { defaultToasterConfig } from "@config";
 import { useContext } from "react";
-import { ThemeContext } from "styled-components/native";
 import { useWindowDimensions } from "react-native";
-import CloseIcon from "react-native-remix-icon";
+
+import PropTypes from "prop-types";
 import DeviceInfo from "react-native-device-info";
+import CloseIcon from "react-native-remix-icon";
+import T from "react-native-toast-message";
+import { ThemeContext } from "styled-components/native";
 
+import ErrorIcon from "@assets/icons/error.svg";
+import InfoIcon from "@assets/icons/info.svg";
 import SuccessIcon from "@assets/icons/success.svg";
 import WarningIcon from "@assets/icons/warning.svg";
-import InfoIcon from "@assets/icons/info.svg";
-import ErrorIcon from "@assets/icons/error.svg";
 import { Container, Typography, Touchable } from "@components";
+import { defaultToasterConfig } from "@config";
 
 const ToastComponent = ({ type, text1, text2, hide }) => {
   const theme = useContext(ThemeContext);
@@ -28,60 +29,62 @@ const ToastComponent = ({ type, text1, text2, hide }) => {
       case "error":
         return <ErrorIcon />;
     }
+
+    return null;
   };
+
   return (
     <Container
-      width={width - 20}
-      minHeight={60}
-      borderRadius={16}
+      alignItems="center"
       bg={theme.colors.background.secondary}
+      borderRadius={16}
       flexDirection="row"
-      alignItems="center"
-      px={10}
-      mx={10}
+      minHeight={60}
       mt={DeviceInfo.hasDynamicIsland() ? 10 : 0}
+      mx={10}
+      px={10}
+      width={width - 20}
     >
       <Container
-        height={42}
-        width={42}
-        borderRadius={10}
-        bg={theme.colors.toast[type]}
         alignItems="center"
+        bg={theme.colors.toast[type]}
+        borderRadius={10}
+        height={42}
         justifyContent="center"
+        width={42}
       >
         <Icon />
       </Container>
-
       <Container flex={1} ml={10} py={3}>
         {text1 && (
           <Typography
+            fontColor={theme.colors.font.primary}
             fontFamily={theme.fonts.sf600}
             fontSize="l"
-            fontColor={theme.colors.font.primary}
           >
             {text1}
           </Typography>
         )}
         {text2 && (
           <Typography
+            fontColor={theme.colors.font.secondary}
             fontFamily={theme.fonts.sf400}
             fontSize="xs"
-            fontColor={theme.colors.font.secondary}
           >
             {text2}
           </Typography>
         )}
       </Container>
       <Touchable
-        onPress={hide}
         hitSlop={{
           top: 5,
           right: 5,
           bottom: 5,
           left: 5,
         }}
+        onPress={hide}
       >
-        <CloseIcon name="ri-close-line" color={theme.colors.font.grey500} />
+        <CloseIcon color={theme.colors.font.grey500} name="ri-close-line" />
       </Touchable>
     </Container>
   );

package/src/components/{ToggleSwitch.js → ToggleSwitch.jsx}

@@ -1,8 +1,9 @@
 import React, { useContext, useEffect, useRef } from "react";
-import { ThemeContext } from "styled-components/native";
 import { Animated } from "react-native";
+
 import PropTypes from "prop-types";
 import Icon from "react-native-remix-icon";
+import { ThemeContext } from "styled-components/native";
 
 import { Container, Touchable } from "@components";
 
@@ -39,7 +40,6 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
 
   useEffect(() => {
     startAnimation();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   const startAnimation = () => {
@@ -53,35 +53,36 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
   const containerBg = value
     ? theme.colors.background.purple500
     : "background.grey300";
+
   const iconColor = value
     ? theme.colors.background.purple500
     : theme.colors.font.grey500;
 
   return (
     <Touchable
+      bg={containerBg}
+      borderRadius={70}
       disabled={disabled}
-      onPress={() => onValueChange(!value)}
-      width={44}
       height={24}
-      bg={containerBg}
       justifyContent="center"
-      px={1}
-      borderRadius={70}
       opacity={disabled ? 0.5 : 1}
+      px={1}
+      width={44}
+      onPress={() => onValueChange(!value)}
     >
       <Animated.View style={{ transform: [{ translateX: animatedPosition }] }}>
         <Container
+          alignItems="center"
           bg="background.white"
-          width={16}
-          height={16}
           borderRadius={8}
+          height={16}
           justifyContent="center"
-          alignItems="center"
+          width={16}
         >
           <Icon
+            color={iconColor}
             name={`ri-${value ? "check" : "close"}-line`}
             size={12}
-            color={iconColor}
           />
         </Container>
       </Animated.View>

package/src/components/{TopBar.js → TopBar.jsx}

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { ScrollView, StyleSheet } from "react-native";
+
 import PropTypes from "prop-types";
 
 import { Container, Touchable, Typography } from "@components";
@@ -58,7 +59,6 @@ export const TopBar = ({
 
   useEffect(() => {
     onActiveTabChange(selectedIndex);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedIndex]);
 
   useEffect(() => {
@@ -73,8 +73,9 @@ export const TopBar = ({
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {data.map((item, index) => (
           <Touchable
+            alignItems="center"
+            justifyContent="center"
             key={index}
-            onPress={() => setSelectedIndex(index)}
             style={
               selectedIndex === index
                 ? {
@@ -86,8 +87,7 @@ export const TopBar = ({
                     ...inActiveTabContainerStyle,
                   }
             }
-            justifyContent="center"
-            alignItems="center"
+            onPress={() => setSelectedIndex(index)}
           >
             <Typography
               style={

package/src/components/{Touchable.js → Touchable.jsx}

@@ -1,6 +1,7 @@
 import * as React from "react";
-import PropTypes from "prop-types";
+
 import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 import Ripple from "react-native-material-ripple";
 import styled from "styled-components/native";
 import {
@@ -11,6 +12,7 @@ import {
   color,
   layout,
 } from "styled-system";
+
 import { getShadowStyles } from "../utils/utils";
 
 const StyledRipple = styled(Ripple)`
@@ -61,13 +63,14 @@ const StyledRipple = styled(Ripple)`
 export const Touchable = React.forwardRef((props, ref) => {
   const { children, elevation, ...rest } = props;
   const shadowStyles = elevation ? getShadowStyles(elevation) : {};
+
   return (
     <StyledRipple
-      rippleOpacity={0.09}
-      rippleDuration={600}
+      ref={ref}
       rippleContainerBorderRadius={rest.borderRadius ? rest.borderRadius : 0}
+      rippleDuration={600}
+      rippleOpacity={0.09}
       style={shadowStyles}
-      ref={ref}
       {...rest}
     >
       {children}
@@ -86,3 +89,5 @@ Touchable.propTypes = {
   children: PropTypes.node,
   elevation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
+
+Touchable.displayName = "Touchable";

package/src/components/{Typography.js → Typography.jsx}

@@ -1,4 +1,7 @@
 import * as React from "react";
+
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 import styled from "styled-components/native";
 import {
   space,
@@ -10,8 +13,6 @@ import {
   position,
   system,
 } from "styled-system";
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
 
 export const Text = styled.Text`
   ${textStyle}
@@ -73,9 +74,9 @@ export const Text = styled.Text`
  * @extends StyledSystems props /styled-system
  */
 
-export const Typography = ({ children, ...rest }) => {
-  return <Text {...rest}>{children}</Text>;
-};
+export const Typography = ({ children, ...rest }) => (
+  <Text {...rest}>{children}</Text>
+);
 
 Typography.propTypes = {
   ...propTypes.space,