@bigbinary/neetoui-rn 0.0.223 → 0.0.225

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

@@ -1,8 +1,7 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { StyleSheet } from "react-native";
 
-import { Typography, Container } from "@components";
+import PropTypes from "prop-types";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -10,6 +9,8 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 
+import { Typography, Container } from "@components";
+
 /**
  * Avatars can be used to represent people in a graphical way.
  *
@@ -66,46 +67,42 @@ export const Avatar = ({
 
   const [avatarSize, avatarFontSize] = getSizes();
 
-  const profileImageStyle = useAnimatedStyle(() => {
-    return {
-      opacity: withTiming(opacity.value, {
-        duration: 300,
-        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-      }),
-      height: avatarSize,
-      width: avatarSize,
-      alignSelf: "center",
-      borderRadius: avatarSize / 2,
-    };
-  });
+  const profileImageStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(opacity.value, {
+      duration: 300,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+    }),
+    height: avatarSize,
+    width: avatarSize,
+    alignSelf: "center",
+    borderRadius: avatarSize / 2,
+  }));
 
   return (
-    <>
-      <Container
-        bg={bgColor}
-        width={avatarSize}
-        height={avatarSize}
-        borderRadius={avatarSize / 2}
-        {...rest}
-        flexDirection="row"
-      >
-        <Container style={styles.acronym}>
-          <Typography
-            fontFamily="sf400"
-            fontSize={avatarFontSize}
-            color={fontColor}
-          >
-            {acronym.toUpperCase()}
-          </Typography>
-        </Container>
-        <Animated.Image
-          onLoad={() => (opacity.value = 1)}
-          style={profileImageStyle}
-          source={{ uri: imageUrl }}
-          {...rest}
-        />
+    <Container
+      bg={bgColor}
+      borderRadius={avatarSize / 2}
+      height={avatarSize}
+      width={avatarSize}
+      {...rest}
+      flexDirection="row"
+    >
+      <Container style={styles.acronym}>
+        <Typography
+          color={fontColor}
+          fontFamily="sf400"
+          fontSize={avatarFontSize}
+        >
+          {acronym.toUpperCase()}
+        </Typography>
       </Container>
-    </>
+      <Animated.Image
+        source={{ uri: imageUrl }}
+        style={profileImageStyle}
+        onLoad={() => (opacity.value = 1)}
+        {...rest}
+      />
+    </Container>
   );
 };
 

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

@@ -1,5 +1,7 @@
 import React from "react";
+
 import PropTypes from "prop-types";
+
 import { Typography, Container } from "@components";
 
 /**
@@ -47,27 +49,24 @@ export const Badge = ({
   fontFamily = "sf400",
   color = "font.white",
   ...rest
-}) => {
-  return (
-    size > 0 && (
-      <Container
-        px={3}
-        py={1}
-        bg={badgeColor}
-        borderRadius={15}
-        justifyContent="center"
-        alignItems="center"
-        {...rest}
-      >
-        {!!content && (
-          <Typography fontSize={fontSize} fontFamily={fontFamily} color={color}>
-            {content}
-          </Typography>
-        )}
-      </Container>
-    )
+}) =>
+  size > 0 && (
+    <Container
+      alignItems="center"
+      bg={badgeColor}
+      borderRadius={15}
+      justifyContent="center"
+      px={3}
+      py={1}
+      {...rest}
+    >
+      {!!content && (
+        <Typography color={color} fontFamily={fontFamily} fontSize={fontSize}>
+          {content}
+        </Typography>
+      )}
+    </Container>
   );
-};
 
 Badge.propTypes = {
   /**

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { StyleSheet, FlatList, Keyboard } from "react-native";
+
 import PropTypes from "prop-types";
 import Modal from "react-native-modal";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -11,6 +12,7 @@ import {
   SearchBar,
   Loader,
 } from "@components";
+
 import { theme } from "../theme";
 
 const Title = ({
@@ -33,51 +35,49 @@ const Title = ({
   }, [isVisible, setSearchText]);
 
   return (
-    <>
-      <Container
-        bg={bg}
-        onTouchStart={e => (touchY = e.nativeEvent.pageY)}
-        onTouchEnd={e => {
-          // Swipe Down Detection
-          if (e.nativeEvent.pageY - touchY > 20) hide();
-        }}
-        pb={12}
-        borderRadius={20}
-        {...titleContainerStyle}
-      >
-        <Container mb={16} flexDirection="row" justifyContent="space-between">
-          {title && (
-            <Typography textStyle="modalHeader" {...titleTextStyle}>
-              {title}
-            </Typography>
-          )}
-          {contentType && (
-            <Touchable
-              onPress={() => {
-                hide();
-                onDonePress();
-              }}
-            >
-              <Typography textStyle="modalHeader" color="font.purple500">
-                Done
-              </Typography>
-            </Touchable>
-          )}
-        </Container>
-        {canSearch && (
-          <SearchBar
-            debounceDelay={200}
-            placeholder="Search"
-            onChangeText={setSearchText}
-            onCancel={() => {
-              setSearchText("");
+    <Container
+      bg={bg}
+      borderRadius={20}
+      pb={12}
+      onTouchStart={e => (touchY = e.nativeEvent.pageY)}
+      onTouchEnd={e => {
+        // Swipe Down Detection
+        if (e.nativeEvent.pageY - touchY > 20) hide();
+      }}
+      {...titleContainerStyle}
+    >
+      <Container flexDirection="row" justifyContent="space-between" mb={16}>
+        {title && (
+          <Typography textStyle="modalHeader" {...titleTextStyle}>
+            {title}
+          </Typography>
+        )}
+        {contentType && (
+          <Touchable
+            onPress={() => {
+              hide();
+              onDonePress();
             }}
-            showCancelButton={false}
-            {...searchBarProps}
-          />
+          >
+            <Typography color="font.purple500" textStyle="modalHeader">
+              Done
+            </Typography>
+          </Touchable>
         )}
       </Container>
-    </>
+      {canSearch && (
+        <SearchBar
+          debounceDelay={200}
+          placeholder="Search"
+          showCancelButton={false}
+          onChangeText={setSearchText}
+          onCancel={() => {
+            setSearchText("");
+          }}
+          {...searchBarProps}
+        />
+      )}
+    </Container>
   );
 };
 
@@ -173,18 +173,17 @@ export const BottomSheet = ({
 }) => {
   const [searchText, setSearchText] = useState("");
 
-  const getLabel = (item, index) => {
-    return item?.label || labelExtractor(item, index) || item;
-  };
+  const getLabel = (item, index) =>
+    item?.label || labelExtractor(item, index) || item;
 
   const generateData = () => {
     if (searchText.length) {
       return data.filter(item =>
         getLabel(item).toLowerCase().includes(searchText.toLowerCase())
       );
-    } else {
-      return data;
     }
+
+    return data;
   };
 
   const hideCreateComponent = () => {
@@ -200,52 +199,55 @@ export const BottomSheet = ({
     const itemValue = item?.value || valueExtractor(item) || item;
     const selectedItemValue =
       selectedItem?.value || valueExtractor(selectedItem) || selectedItem;
+
     return itemValue === selectedItemValue;
   };
 
   return (
     <Modal
-      style={styles.modalStyle}
+      avoidKeyboard
+      hideModalContentWhileAnimating
+      useNativeDriver
       isVisible={isVisible}
+      style={styles.modalStyle}
+      onRequestClose={hide}
       onBackdropPress={() => {
         onBackdropPress();
         hide();
       }}
-      useNativeDriver
-      avoidKeyboard
-      hideModalContentWhileAnimating
-      onRequestClose={hide}
       {...modalParams}
     >
       <SafeAreaView style={styles.safeAreaView}>
         <Container
           bg={bg}
-          borderTopRightRadius={20}
           borderTopLeftRadius={20}
-          p={16}
+          borderTopRightRadius={20}
           flexShrink={1}
+          p={16}
           {...rest}
         >
           {title && (
             <Title
-              bg={bg}
-              title={title}
-              isVisible={isVisible}
-              hide={hide}
-              titleContainerStyle={titleContainerStyle}
-              titleTextStyle={titleTextStyle}
               HeaderComponent={HeaderComponent}
-              contentType={contentType}
+              bg={bg}
               canSearch={canSearch}
+              contentType={contentType}
+              hide={hide}
+              isVisible={isVisible}
+              searchBarProps={searchBarProps}
               searchText={searchText}
               setSearchText={setSearchText}
+              title={title}
+              titleContainerStyle={titleContainerStyle}
+              titleTextStyle={titleTextStyle}
               onDonePress={onDonePress}
-              searchBarProps={searchBarProps}
             />
           )}
-
           {data && (
             <FlatList
+              data={generateData()}
+              initialNumToRender={data.length}
+              keyExtractor={(_item, index) => index}
               ListFooterComponent={
                 <Container>
                   {children}
@@ -257,21 +259,20 @@ export const BottomSheet = ({
                     ) : (
                       <Container
                         alignItems="center"
-                        py={2}
                         mb={2}
+                        py={2}
                         {...noResultsLabelContainerStyle}
                       >
                         <Typography
+                          color="font.grey"
                           fontFamily="sf600"
                           fontSize="s"
-                          color="font.grey"
                           {...noResultsLabelStyle}
                         >
                           {noResultsLabel || "No options found"}
                         </Typography>
                       </Container>
                     ))}
-
                   {!disabled &&
                     !hideCreateComponent() &&
                     (showCreateOptionLoader ? (
@@ -284,16 +285,16 @@ export const BottomSheet = ({
                             <CreateItemComponent searchText={searchText} />
                           ) : (
                             <Touchable
+                              alignItems="center"
                               height={40}
                               justifyContent="center"
-                              alignItems="center"
                               onPress={() => onPressCreateOption(searchText)}
                               {...createSearchedOptionContainerStyle}
                             >
                               <Typography
+                                color="font.grey"
                                 fontFamily="sf400"
                                 fontSize="s"
-                                color="font.grey"
                                 {...createSearchedOptionLabelStyle}
                               >
                                 {createOptionLabel ||
@@ -306,26 +307,19 @@ export const BottomSheet = ({
                     ))}
                 </Container>
               }
-              initialNumToRender={data.length}
+              renderItem={({ item, index }) => (
+                <ContentRow
+                  index={index}
+                  isSelected={checkIsSelected(item)}
+                  item={item}
+                  key={index}
+                  onPress={() => {
+                    !contentType && hide();
+                    onItemPress({ index, item });
+                  }}
+                />
+              )}
               onScrollBeginDrag={Keyboard.dismiss}
-              data={generateData()}
-              renderItem={({ item, index }) => {
-                return (
-                  <ContentRow
-                    isSelected={checkIsSelected(item)}
-                    key={index}
-                    onPress={() => {
-                      !contentType && hide();
-                      onItemPress({ index, item });
-                    }}
-                    index={index}
-                    item={item}
-                  />
-                );
-              }}
-              keyExtractor={(item, index) => {
-                return index;
-              }}
             />
           )}
         </Container>

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

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from "react";
-import Icon from "react-native-remix-icon";
-import PropTypes from "prop-types";
 import { StyleSheet, Platform, TouchableWithoutFeedback } from "react-native";
+
+import PropTypes from "prop-types";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -9,11 +9,12 @@ import Animated, {
   interpolate,
   Extrapolation,
 } from "react-native-reanimated";
+import Icon from "react-native-remix-icon";
+import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography } from "@components";
-import { ThemeContext } from "styled-components/native";
 
-function TabElement({
+const TabElement = ({
   isFocused,
   onPress,
   label,
@@ -21,7 +22,7 @@ function TabElement({
   tabBarInactiveTintColor,
   icon,
   size,
-}) {
+}) => {
   const theme = useContext(ThemeContext);
   const offset = useSharedValue(isFocused ? 1 : 0);
 
@@ -31,46 +32,41 @@ function TabElement({
     } else {
       offset.value = withTiming(0, { duration: 0 });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocused]);
 
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(offset.value, [0, 1], [1, 0], {
-        extrapolateRight: Extrapolation.CLAMP,
-      }),
-    };
-  });
+  const animatedStyles = useAnimatedStyle(() => ({
+    opacity: interpolate(offset.value, [0, 1], [1, 0], {
+      extrapolateRight: Extrapolation.CLAMP,
+    }),
+  }));
 
-  const animatedStyles2 = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(offset.value, [0, 0.9, 1], [0, 0.5, 1], {
-        extrapolateRight: Extrapolation.CLAMP,
-      }),
-      transform: [
-        {
-          scale: interpolate(offset.value, [0, 0.8, 1], [1, 1.2, 1], {
-            extrapolateRight: Extrapolation.CLAMP,
-          }),
-        },
-      ],
-    };
-  });
+  const animatedStyles2 = useAnimatedStyle(() => ({
+    opacity: interpolate(offset.value, [0, 0.9, 1], [0, 0.5, 1], {
+      extrapolateRight: Extrapolation.CLAMP,
+    }),
+    transform: [
+      {
+        scale: interpolate(offset.value, [0, 0.8, 1], [1, 1.2, 1], {
+          extrapolateRight: Extrapolation.CLAMP,
+        }),
+      },
+    ],
+  }));
 
   return (
     <TouchableWithoutFeedback onPress={onPress}>
       <Container
-        flex={1}
         alignItems="center"
-        borderTopWidth={1}
         borderColor="background.grey200"
+        borderTopWidth={1}
+        flex={1}
       >
-        <Container height={35} width={48} alignItems="center" mb={1}>
+        <Container alignItems="center" height={35} mb={1} width={48}>
           <Animated.View style={[styles.iconContainer, animatedStyles]}>
-            <Icon size={size} color={theme.colors.font.grey500} name={icon} />
+            <Icon color={theme.colors.font.grey500} name={icon} size={size} />
           </Animated.View>
           <Animated.View style={[styles.iconContainer, animatedStyles2]}>
-            <Icon size={size} color={theme.colors.font.base} name={icon} />
+            <Icon color={theme.colors.font.base} name={icon} size={size} />
           </Animated.View>
         </Container>
         <Typography
@@ -83,7 +79,7 @@ function TabElement({
       </Container>
     </TouchableWithoutFeedback>
   );
-}
+};
 
 const styles = StyleSheet.create({
   iconContainer: {
@@ -154,53 +150,51 @@ const styles = StyleSheet.create({
  *
  */
 
-export const BottomTabBar = ({ state, descriptors, navigation }) => {
-  return (
-    <Container
-      flexDirection="row"
-      height={Platform.OS === "android" ? 63 : 83}
-      bg="background.white"
-    >
-      {state.routes.map(({ key, name }, index) => {
-        const { options } = descriptors[key];
-        const isFocused = state.index === index;
-        const { icon, size } = options?.customTabBarProps;
-        const { tabBarActiveTintColor, tabBarInactiveTintColor } = options;
-        const onPress = () => {
-          const event = navigation.emit({
-            type: "tabPress",
-            target: key,
-            canPreventDefault: true,
-          });
+export const BottomTabBar = ({ state, descriptors, navigation }) => (
+  <Container
+    bg="background.white"
+    flexDirection="row"
+    height={Platform.OS === "android" ? 63 : 83}
+  >
+    {state.routes.map(({ key, name }, index) => {
+      const { options } = descriptors[key];
+      const isFocused = state.index === index;
+      const { icon, size } = options?.customTabBarProps || {};
+      const { tabBarActiveTintColor, tabBarInactiveTintColor } = options;
+      const onPress = () => {
+        const event = navigation.emit({
+          type: "tabPress",
+          target: key,
+          canPreventDefault: true,
+        });
 
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate({ name: name, merge: true });
-          }
-        };
+        if (!isFocused && !event.defaultPrevented) {
+          navigation.navigate({ name, merge: true });
+        }
+      };
 
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : name;
+      const label =
+        options.tabBarLabel !== undefined
+          ? options.tabBarLabel
+          : options.title !== undefined
+          ? options.title
+          : name;
 
-        return (
-          <TabElement
-            key={index}
-            onPress={onPress}
-            isFocused={isFocused}
-            label={label}
-            tabBarActiveTintColor={tabBarActiveTintColor}
-            tabBarInactiveTintColor={tabBarInactiveTintColor}
-            icon={icon}
-            size={size}
-          />
-        );
-      })}
-    </Container>
-  );
-};
+      return (
+        <TabElement
+          icon={icon}
+          isFocused={isFocused}
+          key={index}
+          label={label}
+          size={size}
+          tabBarActiveTintColor={tabBarActiveTintColor}
+          tabBarInactiveTintColor={tabBarInactiveTintColor}
+          onPress={onPress}
+        />
+      );
+    })}
+  </Container>
+);
 
 TabElement.propTypes = {
   isFocused: PropTypes.bool,