@bigbinary/neetoui-rn 0.0.223 → 0.0.224

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

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from "react";
 import { Platform } from "react-native";
+
 import PropTypes from "prop-types";
 
 import { Button, Carousel, Container, Typography } from "@components";
@@ -58,48 +59,44 @@ export const OnBoarding = ({
     } else onComplete();
   };
 
-  const renderItem = ({ item }) => {
-    return (
-      <Container flex={1} justifyContent="space-between">
-        <Container />
-        <Container alignItems="center" mx={24} my={12}>
-          {item.illustration}
-        </Container>
-        <Container alignItems="center" mx={24} my={12}>
-          <Typography fontFamily="sf700" fontSize="4xl" color="font.grey800">
-            {item.title}
-          </Typography>
-          <Typography
-            fontFamily="sf400"
-            fontSize="l"
-            color="font.grey500"
-            textAlign="center"
-          >
-            {item.description}
-          </Typography>
-        </Container>
+  const renderItem = ({ item }) => (
+    <Container flex={1} justifyContent="space-between">
+      <Container />
+      <Container alignItems="center" mx={24} my={12}>
+        {item.illustration}
       </Container>
-    );
-  };
+      <Container alignItems="center" mx={24} my={12}>
+        <Typography color="font.grey800" fontFamily="sf700" fontSize="4xl">
+          {item.title}
+        </Typography>
+        <Typography
+          color="font.grey500"
+          fontFamily="sf400"
+          fontSize="l"
+          textAlign="center"
+        >
+          {item.description}
+        </Typography>
+      </Container>
+    </Container>
+  );
 
   return (
     <Container bg="background.white" flex={1}>
       <Container alignItems="center">
         <AppLogo width={logoWidth} />
       </Container>
-
-      <Container flex={1} justifyContent="center" alignItems="center">
+      <Container alignItems="center" flex={1} justifyContent="center">
         <Carousel
           carouselRef={onBoardingRef}
           itemArray={slides}
+          renderItem={renderItem}
           onSnapToItem={index => {
             setActiveIndex(index);
           }}
-          renderItem={renderItem}
         />
       </Container>
-
-      <Container mx={24} mb={Platform.OS === "android" ? 10 : 0}>
+      <Container mb={Platform.OS === "android" ? 10 : 0} mx={24}>
         <Button
           label={activeIndex !== slides.length - 1 ? "Next" : "Get Started"}
           onPress={handleOnPress}

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

@@ -1,9 +1,10 @@
 import React, { useContext } from "react";
+
 import PropTypes from "prop-types";
 import Icon from "react-native-remix-icon";
+import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography } from "@components";
-import { ThemeContext } from "styled-components/native";
 
 /**
  *
@@ -38,43 +39,44 @@ export const OrganizationItem = ({
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
+
   return (
     <Container
       bg="background.secondary"
-      width="100%"
-      px={16}
-      py={12}
       borderRadius={6}
       justifyContent="space-between"
+      px={16}
+      py={12}
+      width="100%"
       {...rest}
     >
       <Container
-        flexDirection="row"
         alignItems="center"
+        flexDirection="row"
         {...labelContainerProps}
       >
         <Container mr={9} {...iconContainerProps}>
           <Icon
-            size={20}
             color={theme.colors.font.grey800}
             name="building-line"
+            size={20}
             {...iconProps}
           />
         </Container>
         <Typography
           color="font.grey800"
-          fontSize="l"
           fontFamily="sf500"
+          fontSize="l"
           {...labelProps}
         >
           {label || "Organization"}
         </Typography>
       </Container>
       <Typography
-        ml={29}
         color="font.grey"
-        fontSize="m"
         fontFamily="sf500"
+        fontSize="m"
+        ml={29}
         mt="8px"
         {...nameProps}
       >

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

@@ -1,6 +1,8 @@
 import React, { useEffect } from "react";
 import { InteractionManager, Keyboard } from "react-native";
+
 import PropTypes from "prop-types";
+import styled from "styled-components/native";
 import {
   flexbox,
   space,
@@ -9,11 +11,11 @@ import {
   typography,
   color,
 } from "styled-system";
-import styled from "styled-components/native";
 
-import { theme } from "../theme";
 import { Container, Typography } from "@components";
 
+import { theme } from "../theme";
+
 const TextInput = styled.TextInput`
   ${flexbox}
   ${space}
@@ -94,60 +96,59 @@ export const OtpInputs = ({
   return (
     <Container>
       <Container
+        alignItems="center"
+        flexDirection="row"
+        justifyContent="center"
         onTouchEnd={() => {
           Keyboard.dismiss();
           inputRef && inputRef.current.focus();
         }}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="center"
       >
         {Array(numberOfInputs)
           .fill()
-          .map((number, index) => {
-            return (
-              <Container
-                key={index}
-                borderColor={
-                  code.length - 1 === index
-                    ? theme.colors.border.purple500
-                    : theme.colors.border.secondary
+          .map((_number, index) => (
+            <Container
+              borderWidth={code.length - 1 === index ? 1.5 : 1}
+              key={index}
+              borderColor={
+                code.length - 1 === index
+                  ? theme.colors.border.purple500
+                  : theme.colors.border.secondary
+              }
+              {...styles.defaultContainerStyles}
+              {...containerStyles}
+            >
+              <Typography
+                accessibilityLabel="otp"
+                color={
+                  error ? theme.colors.font.danger : theme.colors.font.purple500
                 }
-                borderWidth={code.length - 1 === index ? 1.5 : 1}
-                {...styles.defaultContainerStyles}
-                {...containerStyles}
+                {...styles.defaultTextStyles}
+                {...textStyles}
               >
-                <Typography
-                  accessibilityLabel="otp"
-                  color={
-                    error
-                      ? theme.colors.font.danger
-                      : theme.colors.font.purple500
-                  }
-                  {...styles.defaultTextStyles}
-                  {...textStyles}
-                >
-                  {code[index] || ""}
-                </Typography>
-              </Container>
-            );
-          })}
+                {code[index] || ""}
+              </Typography>
+            </Container>
+          ))}
         <TextInput
+          autoFocus
           keyboardType="phone-pad"
+          ref={inputRef}
           selectionColor="transparent"
-          autoFocus={true}
+          value={code || ""}
           onChangeText={value => {
             if (!isNaN(value)) {
               if (value.length <= numberOfInputs) {
                 handleChange && handleChange(value);
               }
+
               if (value.length >= numberOfInputs) {
                 return Keyboard.dismiss();
               }
             }
+
+            return null;
           }}
-          ref={inputRef}
-          value={code || ""}
           {...styles.inputStyles}
         />
       </Container>

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

@@ -1,13 +1,15 @@
 import React, { useContext } from "react";
 import { Keyboard, StatusBar } from "react-native";
+
 import PropTypes from "prop-types";
-import { ThemeContext } from "styled-components/native";
 import {
   SafeAreaView,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
+import { ThemeContext } from "styled-components/native";
 
 import { Container } from "@components";
+
 import { useKeyboard } from "../hooks/useKeyboard";
 
 /**
@@ -68,7 +70,7 @@ export const ParentView = ({
       {...safeAreaViewProps}
       style={{ backgroundColor: statusBarColor }}
     >
-      <StatusBar barStyle={barStyle} backgroundColor={statusBarColor} />
+      <StatusBar backgroundColor={statusBarColor} barStyle={barStyle} />
       <Container
         {...(shouldDismissKeyboardOnTap
           ? {
@@ -84,8 +86,8 @@ export const ParentView = ({
               },
             }
           : {})}
-        flex={1}
         backgroundColor={newBackgroundColor}
+        flex={1}
         {...rest}
         {...(bottomInset && { pb: insets.bottom })}
       >

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

@@ -1,8 +1,9 @@
 import React, { useRef } from "react";
-import OriginalPopover from "react-native-popover-view";
+import { StyleSheet } from "react-native";
+
 import PropTypes from "prop-types";
+import OriginalPopover from "react-native-popover-view";
 import styled from "styled-components/native";
-import { StyleSheet } from "react-native";
 import { flexbox, space, border, color, layout } from "styled-system";
 
 import { Typography } from "@components";
@@ -20,18 +21,18 @@ const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
 
   return (
     <TouchableOpacity
-      onPress={onPress}
+      alignItems="center"
       flexDirection="row"
       p={2}
       px={3}
-      alignItems="center"
+      onPress={onPress}
     >
       <Icon />
       <Typography
-        px={2}
-        fontSize={fontSize}
         fontColor="font.primary"
         fontFamily={fontFamily}
+        fontSize={fontSize}
+        px={2}
         {...labelProps}
       >
         {label}
@@ -155,28 +156,26 @@ export const Popover = ({
 
   return (
     <OriginalPopover
-      ref={popoverRef}
       popoverStyle={styles.popoverStyle}
+      ref={popoverRef}
+      onCloseComplete={() => onPressItemRef.current()}
       onOpenStart={() => {
         onPressItemRef.current = () => {};
       }}
-      onCloseComplete={() => onPressItemRef.current()}
       {...rest}
     >
-      {data?.map((item, index) => {
-        return (
-          <PopOverItem
-            key={index}
-            item={item}
-            fontFamily={fontFamily}
-            fontSize={fontSize}
-            onPress={() => {
-              popoverRef?.current?.setState({ isVisible: false });
-              onPressItemRef.current = item.onPress;
-            }}
-          />
-        );
-      })}
+      {data?.map((item, index) => (
+        <PopOverItem
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          item={item}
+          key={index}
+          onPress={() => {
+            popoverRef?.current?.setState({ isVisible: false });
+            onPressItemRef.current = item.onPress;
+          }}
+        />
+      ))}
       {children}
     </OriginalPopover>
   );

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

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+
 import Proptypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
 
@@ -67,6 +68,7 @@ export const RadioButton = ({
       color: theme.colors.font.grey400,
     },
   };
+
   const selectedProps = {
     borderWidth: 4,
     borderColor: theme.colors.background.base,
@@ -75,6 +77,7 @@ export const RadioButton = ({
       color: theme.colors.font.primary,
     },
   };
+
   const unselectedProps = {
     borderWidth: 2,
     borderColor: theme.colors.border.secondary,
@@ -83,28 +86,29 @@ export const RadioButton = ({
       color: theme.colors.font.secondary,
     },
   };
+
   return (
     <Touchable
+      alignItems="center"
       disabled={disabled}
-      onPress={onSelect}
       flexDirection="row"
-      alignItems="center"
+      onPress={onSelect}
       {...rest}
     >
       <Container
+        bg={theme.colors.background.white}
+        borderRadius={8}
         height={16}
         width={16}
-        borderRadius={8}
-        bg={theme.colors.background.white}
         {...(selected && selectedProps)}
         {...(!selected && unselectedProps)}
         {...(disabled && disabledProps)}
         {...radioButtonStyle}
       />
       <Typography
-        ml={2}
-        fontSize="m"
         flex={1}
+        fontSize="m"
+        ml={2}
         {...(selected && selectedProps.labelProps)}
         {...(!selected && unselectedProps.labelProps)}
         {...(disabled && disabledProps.labelProps)}

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

@@ -1,15 +1,16 @@
 import React, { useRef, useState } from "react";
+
+import PropTypes from "prop-types";
 import {
   RichEditor,
   RichToolbar,
   actions,
 } from "react-native-pell-rich-editor";
-import PropTypes from "prop-types";
 import styled from "styled-components/native";
 import { space, flexbox, border, layout } from "styled-system";
 
-import { useKeyboard } from "@hooks";
 import { Container } from "@components";
+import { useKeyboard } from "@hooks";
 
 export const ScrollView = styled.ScrollView.attrs(() => ({
   keyboardShouldPersistTaps: "handled",
@@ -82,7 +83,7 @@ export const RichTextEditor = ({
 }) => {
   const richTextRef = useRef();
   const keyboardHeight = useKeyboard();
-  const [toolbarVisible, setToolbar] = useState(false);
+  const [toolbarVisible, setToolbarVisible] = useState(false);
   const showToolbar = keyboardHeight > 0 && toolbarVisible;
 
   const computeToolbarActions = () => {
@@ -95,37 +96,34 @@ export const RichTextEditor = ({
   };
 
   return (
-    <>
-      <ScrollView {...rest?.editorWrapperStyle}>
-        {showToolbar && (
-          <Container width="100%" {...rest?.toolbarWrapperStyle}>
-            <RichToolbar
-              editor={richTextRef}
-              actions={computeToolbarActions()}
-              {...toolBarProps}
-            />
-          </Container>
-        )}
-        <RichEditor
-          placeholder={placeholderText}
-          ref={richTextRef}
-          onChange={onChange}
-          useContainer={false}
-          androidLayerType="software"
-          onFocus={() => {
-            setToolbar(true);
-            editorProps?.onFocusFn();
-          }}
-          onBlur={() => {
-            setToolbar(false);
-            editorProps?.onBlurFn();
-          }}
-          {...editorProps}
-        />
-
-        {children}
-      </ScrollView>
-    </>
+    <ScrollView {...rest?.editorWrapperStyle}>
+      {showToolbar && (
+        <Container width="100%" {...rest?.toolbarWrapperStyle}>
+          <RichToolbar
+            actions={computeToolbarActions()}
+            editor={richTextRef}
+            {...toolBarProps}
+          />
+        </Container>
+      )}
+      <RichEditor
+        androidLayerType="software"
+        placeholder={placeholderText}
+        ref={richTextRef}
+        useContainer={false}
+        onChange={onChange}
+        onBlur={() => {
+          setToolbarVisible(false);
+          editorProps?.onBlurFn();
+        }}
+        onFocus={() => {
+          setToolbarVisible(true);
+          editorProps?.onFocusFn();
+        }}
+        {...editorProps}
+      />
+      {children}
+    </ScrollView>
   );
 };
 

package/src/components/ScrollView.js

@@ -1,5 +1,5 @@
-import { flexbox, space, border, color, layout } from "styled-system";
 import styled from "styled-components/native";
+import { flexbox, space, border, color, layout } from "styled-system";
 
 export const ScrollView = styled.ScrollView`
   ${flexbox}

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

@@ -1,6 +1,9 @@
-/* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, TouchableWithoutFeedback } from "react-native";
+
+import PropTypes from "prop-types";
+import Icon from "react-native-remix-icon";
+import styled from "styled-components/native";
 import {
   flexbox,
   space,
@@ -9,9 +12,6 @@ import {
   typography,
   color,
 } from "styled-system";
-import styled from "styled-components/native";
-import PropTypes from "prop-types";
-import Icon from "react-native-remix-icon";
 
 import { Container, Button } from "@components";
 import { useDebounce } from "@hooks";
@@ -98,7 +98,7 @@ export const SearchBar = ({
   };
 
   return (
-    <Container flexDirection="row" alignItems="center">
+    <Container alignItems="center" flexDirection="row">
       <TouchableWithoutFeedback
         onPress={() => {
           if (!inputRef?.current?.isFocused()) {
@@ -107,39 +107,39 @@ export const SearchBar = ({
         }}
       >
         <Container
-          height={42}
-          flex={1}
-          borderWidth={1}
+          alignItems="center"
           borderColor={theme.colors.border.grey400}
           borderRadius={8}
+          borderWidth={1}
+          flex={1}
           flexDirection="row"
-          alignItems="center"
+          height={42}
           {...containerProps}
         >
           <Container px={10}>
             <Icon
+              color={theme.colors.font.grey600}
               name="ri-search-line"
               size={20}
-              color={theme.colors.font.grey600}
             />
           </Container>
           <TextInput
+            autoCapitalize="none"
+            color="font.primary"
+            flex={1}
+            fontSize={16}
+            placeholder={placeholder}
+            placeholderTextColor={theme.colors.font.grey600}
             ref={inputRef}
+            returnKeyType="search"
             value={searchText}
             onChangeText={setSearchText}
-            onFocus={() => {
-              animateSearchInput(1);
-            }}
             onBlur={() => {
               if (!searchText) animateSearchInput(0);
             }}
-            placeholder={placeholder}
-            fontSize={16}
-            flex={1}
-            placeholderTextColor={theme.colors.font.grey600}
-            color="font.primary"
-            autoCapitalize="none"
-            returnKeyType="search"
+            onFocus={() => {
+              animateSearchInput(1);
+            }}
             {...searchbarProps}
           />
         </Container>
@@ -155,10 +155,10 @@ export const SearchBar = ({
         >
           <Button
             height={20}
-            variant="text"
             label="Cancel"
-            onPress={onCancelHandle}
             labelStyle={{ mx: 0 }}
+            variant="text"
+            onPress={onCancelHandle}
           />
         </Animated.View>
       )}