@bigbinary/neetoui-rn 0.0.230 → 0.0.231

package/src/components/Input.jsx

@@ -10,6 +10,7 @@ import {
 } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 import styled, { ThemeContext } from "styled-components/native";
 import {
   flexbox,
@@ -27,6 +28,7 @@ import {
 import { Button, Container } from "@components";
 
 import { theme } from "../theme";
+import { isAndroid } from "../utils/utils";
 
 const TextInput = styled.TextInput`
   ${flexbox}
@@ -142,14 +144,6 @@ export const Input = ({
       duration: 300,
       useNativeDriver: false,
     }).start();
-
-    !!label &&
-      inputRef.current &&
-      inputRef.current.setNativeProps({
-        style: {
-          top: isFocused ? 10 : 0,
-        },
-      });
   };
 
   const handleStyles = useCallback(isFocused => {
@@ -160,18 +154,20 @@ export const Input = ({
           : isFocused
           ? colors.border.purple500
           : colors.border.grey400,
-        borderWidth: errorMessage || isFocused ? 1.5 : 1,
+        borderWidth:
+          errorMessage || isFocused ? moderateScale(1.5) : moderateScale(1),
       });
   }, []);
 
   const labelStyles = {
+    paddingLeft: isAndroid() ? moderateScale(4) : 0,
     fontSize: animatedController.interpolate({
       inputRange: [0, 1],
-      outputRange: [17, 13],
+      outputRange: [moderateScale(17), moderateScale(13)],
     }),
     top: animatedController.interpolate({
       inputRange: [0, 1],
-      outputRange: [14, 6],
+      outputRange: [moderateScale(16), moderateScale(6)],
     }),
   };
 
@@ -195,21 +191,20 @@ export const Input = ({
         <View
           alignItems="center"
           borderColor={errorMessage ? "border.danger" : "border.grey400"}
-          borderRadius={8}
-          borderWidth={noBorder ? 0 : 1}
+          borderRadius={moderateScale(8)}
+          borderWidth={noBorder ? 0 : moderateScale(1)}
           flexDirection="row"
           justifyContent="space-between"
-          ref={containerRef}
-          {...(!rest.inputProps?.multiline && { height: 58 })}
           overflow="hidden"
+          ref={containerRef}
           {...containerProps}
         >
           {!!PrefixIcon && (
-            <View pl={2}>
+            <View pl={moderateScale(8)}>
               <PrefixIcon />
             </View>
           )}
-          <View flex={1} left={10}>
+          <View flex={1} left={moderateScale(10)}>
             {!!label && (
               <AnimatedLabel
                 color={disabled ? "font.grey400" : "font.grey600"}
@@ -225,12 +220,11 @@ export const Input = ({
               autoFocus={autoFocus}
               color={disabled ? "font.grey500" : "font.primary"}
               editable={!disabled}
-              fontSize={17}
+              fontSize={moderateScale(17)}
               inputAccessoryViewID={label}
-              mt={10}
-              pb={3}
-              pr={3}
-              pt={1}
+              paddingVertical={0}
+              pb={moderateScale(8)}
+              pt={label ? moderateScale(22) : moderateScale(12)}
               ref={inputRef}
               returnKeyType={rest.inputProps?.multiline ? "default" : "done"}
               textAlignVertical={textAlignVertical}
@@ -256,15 +250,15 @@ export const Input = ({
                     bg="background.white"
                     flexDirection="row"
                     justifyContent="flex-end"
-                    p={2}
-                    pr={20}
+                    p={moderateScale(2)}
+                    pr={moderateScale(20)}
                     width={width}
                   >
                     <Button
-                      height={30}
+                      height={moderateScale(30)}
                       label="Done"
                       labelStyle={styles.doneButtonStyle}
-                      left={10}
+                      left={moderateScale(10)}
                       variant="text"
                       onPress={() => {
                         Keyboard.dismiss();
@@ -275,14 +269,14 @@ export const Input = ({
               )}
           </View>
           {!!SuffixIcon && (
-            <View px={2}>
+            <View px={moderateScale(2)}>
               <SuffixIcon />
             </View>
           )}
         </View>
       </TouchableWithoutFeedback>
       {!!errorMessage && (
-        <Typography color="font.danger" pt={2}>
+        <Typography color="font.danger" pt={moderateScale(2)}>
           {errorMessage}
         </Typography>
       )}

package/src/components/ListItem.jsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Typography, Container } from "@components";
 
@@ -21,7 +22,7 @@ import { Typography, Container } from "@components";
  *  return (
  *    <Container>
  *      <ListItem
- *        LeftComponent={() => <Typography mr={2}>📣</Typography>}
+ *        LeftComponent={() => <Typography mr={moderateScale(2)}>📣</Typography>}
  *        label="Organization"
  *        value={() => <Typography>Bigbinary</Typography>}
  *      />
@@ -35,11 +36,11 @@ export const ListItem = ({ LeftComponent, label, RightComponent, ...rest }) => (
   <Container
     alignItems="center"
     bg="background.secondary"
-    borderRadius={6}
+    borderRadius={moderateScale(6)}
     flexDirection="row"
     justifyContent="space-between"
-    px={16}
-    py={12}
+    px={moderateScale(16)}
+    py={moderateScale(12)}
     width="100%"
     {...rest}
   >

package/src/components/Loader.jsx

@@ -10,6 +10,7 @@ import Animated, {
   useAnimatedStyle,
   interpolate,
 } from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
 import Svg, { Circle } from "react-native-svg";
 
 import { Container } from "@components";
@@ -17,9 +18,9 @@ import { theme } from "@theme";
 
 // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 const LOADER_WIDTH = {
-  s: 24,
-  m: 36,
-  l: 48,
+  s: parseInt(moderateScale(18)),
+  m: parseInt(moderateScale(24)),
+  l: parseInt(moderateScale(36)),
 };
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);

package/src/components/MultiSelect.jsx

@@ -9,6 +9,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import Icon from "react-native-remix-icon";
+import { moderateScale } from "react-native-size-matters";
 import styled, { ThemeContext } from "styled-components/native";
 import {
   flexbox,
@@ -82,19 +83,20 @@ const MultiSelectItem = ({
     <Container
       alignItems="center"
       bg="background.secondary"
-      borderRadius={12}
+      borderRadius={moderateScale(12)}
       flexDirection="row"
       justifyContent="space-between"
-      m={1}
-      px={2}
-      py={1}
+      mr={moderateScale(4)}
+      mt={moderateScale(4)}
+      px={moderateScale(10)}
+      py={moderateScale(4)}
       {...multiSelectedItemContainerStyle}
     >
       <Typography
         color="font.grey800"
         fontFamily="sf400"
         fontSize="s"
-        mr={2}
+        mr={moderateScale(2)}
         {...multiSelectedItemLabelStyle}
       >
         {label}
@@ -107,7 +109,7 @@ const MultiSelectItem = ({
           <Icon
             color={theme.colors.font.grey800}
             name="ri-close-line"
-            size="20"
+            size={moderateScale(20)}
           />
         </TouchableWithoutFeedback>
       )}
@@ -235,16 +237,18 @@ export const MultiSelect = ({
   const isOptionsEmpty = !options || options?.length === 0;
   const isSearchedOptionsEmpty =
     searchQuery.length > 0 && filteredOptions.length === 0;
-  const emptyOptionsPlaceholderHeight = 40;
-  const emptySearchedOptionsHeight = 40;
-  const searchInputHeight = 35;
+  const emptyOptionsPlaceholderHeight = moderateScale(40);
+  const emptySearchedOptionsHeight = moderateScale(40);
+  const searchInputHeight = moderateScale(35);
   const multipleOptionsSelected = value?.length > 0;
-  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
+  const defaultDropdownItemHeight =
+    itemContainerStyle?.height || moderateScale(32);
+
   const dropdownHeight =
     dropdownContainerStyle?.height ||
     dropdownContainerStyle?.maxHeight ||
     defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
-      (isSearchable ? searchInputHeight + 10 : 0) +
+      (isSearchable ? searchInputHeight + moderateScale(10) : 0) +
       (isOptionsEmpty && !(isSearchedOptionsEmpty && showCreateOption)
         ? emptyOptionsPlaceholderHeight
         : 0) +
@@ -278,7 +282,7 @@ export const MultiSelect = ({
     );
 
     return (
-      <Container py={12}>
+      <Container py={moderateScale(12)}>
         <CheckBox
           checked={itemIndex !== -1}
           disabled={disabled}
@@ -344,11 +348,12 @@ export const MultiSelect = ({
       >
         <Container
           borderColor={showDropdown ? "border.base" : "border.grey400"}
-          borderRadius={12}
-          borderWidth={1}
-          minHeight={58}
-          p={2}
-          pr={2}
+          borderRadius={moderateScale(12)}
+          borderWidth={moderateScale(1)}
+          minHeight={moderateScale(58)}
+          p={moderateScale(10)}
+          pr={moderateScale(8)}
+          pt={moderateScale(12)}
           {...inputContainerStyle}
           {...rest}
         >
@@ -359,8 +364,11 @@ export const MultiSelect = ({
           >
             <AnimatedLabel
               position="absolute"
-              style={[animatedStyles, { marginLeft: 5, ...labelStyle }]}
               zIndex={1}
+              style={[
+                animatedStyles,
+                { marginLeft: moderateScale(2), ...labelStyle },
+              ]}
             >
               {label}
             </AnimatedLabel>
@@ -370,7 +378,7 @@ export const MultiSelect = ({
                 flexDirection="row"
                 flexWrap="wrap"
                 maxWidth="85%"
-                mt={3}
+                mt={moderateScale(16)}
                 onStartShouldSetResponder={() => true}
               >
                 {value?.slice(0, maxItemSize).map((item, index) => (
@@ -391,12 +399,12 @@ export const MultiSelect = ({
                     <Container
                       alignItems="center"
                       bg="background.secondary"
-                      borderRadius={12}
+                      borderRadius={moderateScale(12)}
                       flexDirection="row"
                       justifyContent="space-between"
-                      m={1}
-                      px={2}
-                      py={1}
+                      m={moderateScale(1)}
+                      px={moderateScale(3)}
+                      py={moderateScale(1)}
                       {...moreItemLabelContainerStyle}
                     >
                       <Typography {...moreItemLabelStyle}>
@@ -408,14 +416,14 @@ export const MultiSelect = ({
                   ))}
               </Container>
             )}
-            <Container mt={10}>
+            <Container mt={moderateScale(10)}>
               {isLoading ? (
                 <Loader color={theme.colors.background.base} />
               ) : (
                 <Icon
                   color="grey"
                   name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
-                  size="20"
+                  size={moderateScale(20)}
                 />
               )}
             </Container>

package/src/components/NotificationPreferenceList.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Container, Typography, Divider, ToggleSwitch } from "@components";
 
@@ -57,7 +58,7 @@ import { Container, Typography, Divider, ToggleSwitch } from "@components";
  *        LeftIcon: () => (
  *          <Icon
  *            name="ri-notification-2-line"
- *            size={20}
+ *            size={moderateScale(20)}
  *            color={theme.colors.font.secondary}
  *          />
  *        ),
@@ -83,29 +84,33 @@ export const NotificationPreferenceList = ({
   labelProps,
   ...rest
 }) => (
-  <Container bg="background.secondary" borderRadius={8} {...rest}>
+  <Container
+    bg="background.secondary"
+    borderRadius={moderateScale(8)}
+    {...rest}
+  >
     {data?.map((item, index) => {
       const { label, enabled, onSwitch, LeftIcon } = item;
       const isLastItem = index === data.length - 1;
 
       return (
-        <Container key={index} px={12} {...itemWrapperProps}>
+        <Container key={index} px={moderateScale(12)} {...itemWrapperProps}>
           <Container
             alignItems="center"
             flexDirection="row"
             justifyContent="space-between"
-            py={15}
+            py={moderateScale(15)}
             {...itemContainerProps}
           >
             <Container
               alignItems="center"
               flexDirection="row"
-              pr={15}
+              pr={moderateScale(15)}
               width="85%"
               {...labelContainerProps}
             >
               {LeftIcon && (
-                <Container mr={10}>
+                <Container mr={moderateScale(10)}>
                   <LeftIcon />
                 </Container>
               )}
@@ -119,7 +124,7 @@ export const NotificationPreferenceList = ({
               </Typography>
             </Container>
             <ToggleSwitch
-              mt={4}
+              mt={moderateScale(4)}
               value={enabled}
               onValueChange={() => onSwitch(item, index)}
             />

package/src/components/OnBoarding.jsx

@@ -1,7 +1,8 @@
 import React, { useRef, useState } from "react";
-import { Platform } from "react-native";
 
 import PropTypes from "prop-types";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { moderateScale } from "react-native-size-matters";
 
 import { Button, Carousel, Container, Typography } from "@components";
 
@@ -24,6 +25,7 @@ import { Button, Carousel, Container, Typography } from "@components";
  *  ## Usage
  * ```js
  * import * as React from "react";
+ * import { moderateScale } from "react-native-size-matters";
  * import { OnBoarding } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
@@ -47,10 +49,11 @@ export const OnBoarding = ({
   appLogo: AppLogo,
   slides,
   onComplete,
-  logoWidth = 150,
+  logoWidth = moderateScale(150),
 }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const onBoardingRef = useRef();
+  const { bottom } = useSafeAreaInsets();
 
   const handleOnPress = () => {
     if (activeIndex !== slides.length - 1) {
@@ -61,12 +64,26 @@ export const OnBoarding = ({
 
   const renderItem = ({ item }) => (
     <Container flex={1} justifyContent="space-between">
-      <Container />
-      <Container alignItems="center" mx={24} my={12}>
+      <Container
+        alignItems="center"
+        flex={1}
+        justifyContent="center"
+        mx={moderateScale(24)}
+        my={moderateScale(12)}
+      >
         {item.illustration}
       </Container>
-      <Container alignItems="center" mx={24} my={12}>
-        <Typography color="font.grey800" fontFamily="sf700" fontSize="4xl">
+      <Container
+        alignItems="center"
+        mx={moderateScale(24)}
+        my={moderateScale(12)}
+      >
+        <Typography
+          color="font.grey800"
+          fontFamily="sf700"
+          fontSize="4xl"
+          textAlign="center"
+        >
           {item.title}
         </Typography>
         <Typography
@@ -86,7 +103,7 @@ export const OnBoarding = ({
       <Container alignItems="center">
         <AppLogo width={logoWidth} />
       </Container>
-      <Container alignItems="center" flex={1} justifyContent="center">
+      <Container alignItems="center" flex={1}>
         <Carousel
           carouselRef={onBoardingRef}
           itemArray={slides}
@@ -96,7 +113,10 @@ export const OnBoarding = ({
           }}
         />
       </Container>
-      <Container mb={Platform.OS === "android" ? 10 : 0} mx={24}>
+      <Container
+        mb={bottom === 0 ? moderateScale(16) : 0}
+        mx={moderateScale(24)}
+      >
         <Button
           label={activeIndex !== slides.length - 1 ? "Next" : "Get Started"}
           onPress={handleOnPress}

package/src/components/OrganizationItem.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Container, Typography } from "@components";
 
@@ -38,10 +39,10 @@ export const OrganizationItem = ({
 }) => (
   <Container
     bg="background.secondary"
-    borderRadius={6}
+    borderRadius={moderateScale(6)}
     justifyContent="space-between"
-    px={12}
-    py={12}
+    px={moderateScale(12)}
+    py={moderateScale(12)}
     width="100%"
     {...rest}
   >

package/src/components/OtpInputs.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { InteractionManager, Keyboard } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
 import {
   flexbox,
@@ -35,13 +36,13 @@ const styles = {
     position: "absolute",
   },
   defaultContainerStyles: {
-    margin: 2,
-    borderRadius: 8,
+    margin: moderateScale(2),
+    borderRadius: moderateScale(8),
     backgroundColor: theme.colors.background.white,
     justifyContent: "center",
     alignItems: "center",
-    minHeight: 42,
-    minWidth: 42,
+    minHeight: moderateScale(42),
+    minWidth: moderateScale(42),
   },
   defaultTextStyles: {
     fontSize: theme.fontSizes.xl,
@@ -67,7 +68,7 @@ const styles = {
  * return (
  *   <Container flex={1} justifyContent="center" alignItems="center">
  *      <OtpInputs code={code} numberOfInputs={6} handleChange={setCode} />
- *      <Typography py={10} fontSize="xl">
+ *      <Typography py={moderateScale(10)} fontSize="xl">
  *        {`Your entered OTP is ${code}`}
  *      </Typography>
  *    </Container>
@@ -108,13 +109,17 @@ export const OtpInputs = ({
           .fill()
           .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
               }
+              borderWidth={
+                code.length - 1 === index
+                  ? moderateScale(1.5)
+                  : moderateScale(1)
+              }
               {...styles.defaultContainerStyles}
               {...containerStyles}
             >

package/src/components/ParentView.jsx

@@ -13,12 +13,13 @@ import { Container } from "@components";
 import { useKeyboard } from "../hooks/useKeyboard";
 
 /**
- *ParentView wraps the childrens with SafeAreaview.
+ *ParentView wraps the children with SafeAreaView.
  *
  *  ## Usage
  * ```js
- *import * as React from "react";
- *import { Typography, ParentView } from "@bigbinary/neetoui-rn";
+ * import * as React from "react";
+ * import { moderateScale } from "react-native-size-matters";
+ * import { Typography, ParentView } from "@bigbinary/neetoui-rn";
  *
  *export default function Main() {
  *  return (

package/src/components/Popover.jsx

@@ -3,6 +3,7 @@ import { StyleSheet } from "react-native";
 
 import PropTypes from "prop-types";
 import OriginalPopover from "react-native-popover-view";
+import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
 import { flexbox, space, border, color, layout } from "styled-system";
 
@@ -23,8 +24,8 @@ const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
     <TouchableOpacity
       alignItems="center"
       flexDirection="row"
-      p={2}
-      px={3}
+      p={moderateScale(2)}
+      px={moderateScale(3)}
       onPress={onPress}
     >
       <Icon />
@@ -32,7 +33,7 @@ const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
         fontColor="font.primary"
         fontFamily={fontFamily}
         fontSize={fontSize}
-        px={2}
+        px={moderateScale(2)}
         {...labelProps}
       >
         {label}
@@ -88,7 +89,7 @@ PopOverItem.propTypes = {
  *         return (
  *           <Icon
  *             name="ri-search-line"
- *             size={20}
+ *             size={moderateScale(20)}
  *             color={theme.colors.background.grey800}
  *           />
  *         );
@@ -103,7 +104,7 @@ PopOverItem.propTypes = {
  *         return (
  *           <Icon
  *             name="ri-search-line"
- *             size={20}
+ *             size={moderateScale(20)}
  *             color={theme.colors.background.grey800}
  *           />
  *         );
@@ -116,10 +117,10 @@ PopOverItem.propTypes = {
  *
  *  return (
  *    <Container flex={1} alignItems="center" justifyContent="center">
- *      <Container p={2}>
+ *      <Container p={moderateScale(2)}>
  *        <Popover data={data} from={<Button label="With Data" />} />
  *      </Container>
- *      <Container p={2}>
+ *      <Container p={moderateScale(2)}>
  *      <Popover from={<Button label="With Custom Popup Content" />}>
  *
  *          <Container bg="background.white" flex={1}>
@@ -128,7 +129,7 @@ PopOverItem.propTypes = {
  *        </Popover>
  *      </Container>
  *
- *      <Container p={2}>
+ *      <Container p={moderateScale(2)}>
  *        <Popover
  *          data={data}
  *          from={<Button label="With Custom Popup Content and data" />}
@@ -200,5 +201,5 @@ Popover.propTypes = {
 };
 
 const styles = StyleSheet.create({
-  popoverStyle: { borderRadius: 15, padding: 5 },
+  popoverStyle: { borderRadius: moderateScale(15), padding: moderateScale(5) },
 });