@bigbinary/neetoui-rn 0.0.230 → 0.0.232

package/src/components/BottomTabBar.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from "react";
-import { StyleSheet, Platform, TouchableWithoutFeedback } from "react-native";
+import { StyleSheet, TouchableWithoutFeedback } from "react-native";
 
 import PropTypes from "prop-types";
 import Animated, {
@@ -10,6 +10,8 @@ import Animated, {
   Extrapolation,
 } from "react-native-reanimated";
 import Icon from "react-native-remix-icon";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography } from "@components";
@@ -58,10 +60,15 @@ const TabElement = ({
       <Container
         alignItems="center"
         borderColor="background.grey200"
-        borderTopWidth={1}
+        borderTopWidth={moderateScale(1)}
         flex={1}
       >
-        <Container alignItems="center" height={35} mb={1} width={48}>
+        <Container
+          alignItems="center"
+          height={moderateScale(35)}
+          mb={moderateScale(4)}
+          width={moderateScale(48)}
+        >
           <Animated.View style={[styles.iconContainer, animatedStyles]}>
             <Icon color={theme.colors.font.grey500} name={icon} size={size} />
           </Animated.View>
@@ -84,7 +91,7 @@ const TabElement = ({
 const styles = StyleSheet.create({
   iconContainer: {
     position: "absolute",
-    margin: 10,
+    margin: moderateScale(10),
   },
 });
 
@@ -103,6 +110,7 @@ const styles = StyleSheet.create({
  * import { NavigationContainer } from '@react-navigation/native';
  * import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  * import { ThemeContext } from "styled-components/native";
+ * import { moderateScale } from "react-native-size-matters";
  *
  * const Tab = createBottomTabNavigator();
  *
@@ -132,7 +140,7 @@ const styles = StyleSheet.create({
  *        options={{
  *          customTabBarProps: {
  *            icon: "home-5-line",
- *            size: 26,
+ *            size: moderateScale(26),
  *          },
  *        }}
  *      />
@@ -140,7 +148,7 @@ const styles = StyleSheet.create({
  *        options={{
  *          customTabBarProps: {
  *            icon: "user-3-line",
- *            size: 26,
+ *            size: moderateScale(26),
  *          },
  *        }} />
  *    </Tab.Navigator>
@@ -150,51 +158,55 @@ const styles = StyleSheet.create({
  *
  */
 
-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, merge: true });
-        }
-      };
-
-      const label =
-        options.tabBarLabel !== undefined
-          ? options.tabBarLabel
-          : options.title !== undefined
-          ? options.title
-          : name;
-
-      return (
-        <TabElement
-          icon={icon}
-          isFocused={isFocused}
-          key={index}
-          label={label}
-          size={size}
-          tabBarActiveTintColor={tabBarActiveTintColor}
-          tabBarInactiveTintColor={tabBarInactiveTintColor}
-          onPress={onPress}
-        />
-      );
-    })}
-  </Container>
-);
+export const BottomTabBar = ({ state, descriptors, navigation }) => {
+  const { bottom } = useSafeAreaInsets();
+
+  return (
+    <Container
+      bg="background.white"
+      flexDirection="row"
+      height={bottom === 0 ? moderateScale(63) : moderateScale(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, merge: true });
+          }
+        };
+
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : name;
+
+        return (
+          <TabElement
+            icon={icon}
+            isFocused={isFocused}
+            key={index}
+            label={label}
+            size={size}
+            tabBarActiveTintColor={tabBarActiveTintColor}
+            tabBarInactiveTintColor={tabBarInactiveTintColor}
+            onPress={onPress}
+          />
+        );
+      })}
+    </Container>
+  );
+};
 
 TabElement.propTypes = {
   isFocused: PropTypes.bool,

package/src/components/Button.jsx

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 import { Typography, Touchable, Container, Loader } from "@components";
@@ -32,32 +33,32 @@ export const BUTTON_VARIANTS = Object.freeze({
  * export default function Main() {
  *  return (
  *    <Container>
- *      <Button my={9} label="Button1" />
- *      <Button my={9} disabled label="Disabled Button2" />
+ *      <Button my={moderateScale(9)} label="Button1" />
+ *      <Button my={moderateScale(9)} disabled label="Disabled Button2" />
  *      <Button
- *        my={9}
- *        LeftIcon={() => <Icon name="ri-add-line" color="white" size={16} />}
+ *        my={moderateScale(9)}
+ *        LeftIcon={() => <Icon name="ri-add-line" color="white" size={moderateScale(16)} />}
  *        label="Left Icon Button"
  *      />
  *      <Button
- *        my={9}
- *        RightIcon={() => <Icon name="ri-add-line" color="white" size={16} />}
+ *        my={moderateScale(9)}
+ *        RightIcon={() => <Icon name="ri-add-line" color="white" size={moderateScale(16)} />}
  *        label="Right Icon Button"
  *      />
- *      <Button my={9} variant="text" label="Text Button" />
+ *      <Button my={moderateScale(9)} variant="text" label="Text Button" />
  *      <Button
- *        my={9}
+ *        my={moderateScale(9)}
  *        variant="text"
  *        LeftIcon={() => (
- *          <Icon name="ri-add-line" color={theme.fonts.primary} size={16} />
+ *          <Icon name="ri-add-line" color={theme.fonts.primary} size={moderateScale(16)} />
  *        )}
  *        label="Left Icon Text Button"
  *      />
  *      <Button
- *        my={9}
+ *        my={moderateScale(9)}
  *        variant="text"
  *        RightIcon={() => (
- *          <Icon name="ri-add-line" color={theme.fonts.primary} size={16} />
+ *          <Icon name="ri-add-line" color={theme.fonts.primary} size={moderateScale(16)} />
  *        )}
  *        label="Right Icon Text Button"
  *      />
@@ -157,11 +158,11 @@ export const Button = ({
       alignItems="center"
       bg={getButtonColors().bg}
       borderColor={getButtonColors().border}
-      borderRadius={8}
-      borderWidth={1}
+      borderRadius={moderateScale(8)}
+      borderWidth={moderateScale(1)}
       disabled={disabled || isLoading}
       flexDirection="row"
-      height={48}
+      height={moderateScale(48)}
       justifyContent="center"
       opacity={renderOpacity()}
       rippleColor={getButtonColors().ripple}
@@ -176,7 +177,7 @@ export const Button = ({
               color={color || getButtonColors().color}
               fontFamily={fontFamily || theme.fonts.sf500}
               fontSize={fontSize}
-              mx={2}
+              mx={moderateScale(2)}
               textAlign="center"
               {...labelStyle}
             >
@@ -191,7 +192,7 @@ export const Button = ({
             color={color || getButtonColors().color}
             fontFamily={fontFamily || theme.fonts.sf500}
             fontSize={fontSize}
-            mx={2}
+            mx={moderateScale(2)}
             textAlign="center"
             {...labelStyle}
           >

package/src/components/ButtonGroup.jsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Container, Typography, Touchable } from "@components";
 
@@ -45,18 +46,18 @@ export const ButtonGroup = ({
     alignSelf="center"
     border="1px solid"
     borderColor={activeColor}
-    borderRadius={2}
+    borderRadius={moderateScale(2)}
     flexDirection="row"
     justifyContent="space-between"
-    my={3}
+    my={moderateScale(3)}
     {...wrapperStyle}
   >
     {buttonItems.map(item => (
       <Touchable
         bg={item === currentActiveBtn ? activeColor : inActiveColor}
         key={item}
-        p={2}
-        px={3}
+        p={moderateScale(2)}
+        px={moderateScale(3)}
         onPress={() => {
           if (item !== currentActiveBtn) {
             onPress(item);

package/src/components/Calendar.jsx

@@ -3,6 +3,7 @@ import React, { useContext } from "react";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
 import { Calendar as RNCalender } from "react-native-calendars";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 /**
@@ -57,7 +58,7 @@ export const Calendar = ({ selectedDate, ...rest }) => {
         },
         "stylesheet.calendar.header": {
           week: {
-            marginVertical: 10,
+            marginVertical: moderateScale(10),
             flexDirection: "row",
             justifyContent: "space-around",
             alignItems: "center",
@@ -81,10 +82,10 @@ export const Calendar = ({ selectedDate, ...rest }) => {
           base: {
             alignItems: "center",
             justifyContent: "center",
-            height: 26,
-            width: 26,
-            borderRadius: 5,
-            borderWidth: 1,
+            height: moderateScale(26),
+            width: moderateScale(26),
+            borderRadius: moderateScale(5),
+            borderWidth: moderateScale(1),
             borderColor: "transparent",
           },
           today: {

package/src/components/Card.jsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
 import { flexbox, space, border, color, layout } from "styled-system";
 
@@ -41,7 +42,7 @@ const StyledTouchableOpacity = styled(TouchableOpacity)`
  *
  * export default function Main() {
  *  return (
- *     <Card height="100px" width="100px" bg="background.danger" elevation={8}>
+ *     <Card height="100px" width="100px" bg="background.danger" elevation={moderateScale(8)}>
  *       <Typography fontSize="14px">Card</Typography>
  *     </Card>
  *  );
@@ -80,10 +81,10 @@ export const styles = StyleSheet.create({
     shadowColor: theme.colors.background.grey800,
     shadowOffset: {
       width: 0,
-      height: 2,
+      height: moderateScale(2),
     },
     shadowOpacity: 0.25,
-    shadowRadius: 3.84,
+    shadowRadius: moderateScale(3.84),
     elevation: 5,
   },
 });

package/src/components/Carousel.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { StyleSheet, Dimensions, useWindowDimensions } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 import CarouselParent, { Pagination } from "react-native-snap-carousel";
 
 import { Container } from "@components";
@@ -27,6 +28,7 @@ const { width } = Dimensions.get("screen");
  *  ## Usage
  * ```js
  * import * as React from "react";
+ * import { moderateScale } from "react-native-size-matters";
  * import { Carousel } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
@@ -67,8 +69,8 @@ export const Carousel = ({
         dotContainerStyle={styles.dotContainerStyle}
         dotStyle={styles.dotStyle}
         dotsLength={itemArray.length}
-        inactiveDotOpacity={1}
-        inactiveDotScale={1}
+        inactiveDotOpacity={moderateScale(1)}
+        inactiveDotScale={moderateScale(1)}
         inactiveDotStyle={styles.inactiveDotStyle}
       />
     </Container>
@@ -77,26 +79,26 @@ export const Carousel = ({
 
 const styles = StyleSheet.create({
   image: {
-    height: width / 1.8,
-    width: width / 1.8,
+    height: width / moderateScale(1.8),
+    width: width / moderateScale(1.8),
     resizeMode: "contain",
-    borderRadius: 20,
+    borderRadius: moderateScale(20),
   },
   indicator: {
-    height: 12,
-    width: 12,
-    borderRadius: 10,
-    marginVertical: 20,
-    marginHorizontal: 5,
+    height: moderateScale(12),
+    width: moderateScale(12),
+    borderRadius: moderateScale(10),
+    marginVertical: moderateScale(20),
+    marginHorizontal: moderateScale(5),
     backgroundColor: "#49545C",
     borderColor: "#FFFFFF",
-    borderWidth: 2,
+    borderWidth: moderateScale(2),
   },
   dotStyle: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    marginRight: 8,
+    width: moderateScale(10),
+    height: moderateScale(10),
+    borderRadius: moderateScale(5),
+    marginRight: moderateScale(8),
     backgroundColor: "#2F3941",
   },
   inactiveDotStyle: {

package/src/components/CheckBox.jsx

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 
 import Proptypes from "prop-types";
 import Icon from "react-native-remix-icon";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography, Touchable } from "@components";
@@ -25,6 +26,7 @@ import { Container, Typography, Touchable } from "@components";
  *  ## Usage
  * ```js
  * import * as React from "react";
+ * import { moderateScale } from "react-native-size-matters";
  * import { Container, CheckBox } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
@@ -33,18 +35,18 @@ import { Container, Typography, Touchable } from "@components";
  *  return (
  *    <Container>
  *      <CheckBox
- *        mt={2}
+ *        mt={moderateScale(2)}
  *        checked={checked1}
  *        onSelect={() => setChecked1(prev => !prev)}
  *        label={`Checkbox marked as ${!checked1 ? "un" : ""}checked`}
  *      />
  *      <CheckBox
- *        mt={3}
+ *        mt={moderateScale(3)}
  *        checked={checked2}
  *        onSelect={() => setChecked2(prev => !prev)}
  *        label={`Checkbox marked as ${!checked2 ? "un" : ""}checked`}
  *      />
- *      <CheckBox mt={3} disabled label="Disabled checkbox" />
+ *      <CheckBox mt={moderateScale(3)} disabled label="Disabled checkbox" />
  *    </Container>
  *  );
  * }
@@ -80,7 +82,7 @@ export const CheckBox = ({
 
   const unCheckedProps = {
     bg: theme.colors.background.white,
-    borderWidth: 1,
+    borderWidth: moderateScale(1),
     borderColor: theme.colors.border.secondary,
     labelProps: {
       fontFamily: theme.fonts.sf400,
@@ -99,10 +101,10 @@ export const CheckBox = ({
     >
       <Container
         alignItems="center"
-        borderRadius={3}
-        height={16}
+        borderRadius={moderateScale(3)}
+        height={moderateScale(16)}
         justifyContent="center"
-        width={16}
+        width={moderateScale(16)}
         {...(!checked && unCheckedProps)}
         {...(checked && checkedProps)}
         {...(disabled && disabledProps)}
@@ -112,7 +114,7 @@ export const CheckBox = ({
           <Icon
             color={theme.colors.font.white}
             name="ri-check-line"
-            size={14}
+            size={moderateScale(14)}
             {...checkIconStyle}
           />
         )}
@@ -120,7 +122,7 @@ export const CheckBox = ({
       <Typography
         flex={1}
         fontSize="m"
-        ml={2}
+        ml={moderateScale(8)}
         {...(checked && checkedProps.labelProps)}
         {...(!checked && unCheckedProps.labelProps)}
         {...(disabled && disabledProps.labelProps)}

package/src/components/Chip.jsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import PropTypes from "prop-types";
 import Icon from "react-native-remix-icon";
+import { moderateScale } from "react-native-size-matters";
 
 import { Typography, Touchable } from "@components";
 
@@ -67,23 +68,23 @@ export const Chip = ({
 }) => (
   <Touchable
     alignItems="center"
-    borderRadius={20}
+    borderRadius={moderateScale(20)}
     disabled={!onChipPress || isDisabled}
     flexDirection="row"
-    p={2}
+    p={moderateScale(2)}
     onPress={onChipPress}
     {...(variant && variantStyleObj[variant])}
     {...(isDisabled && { opacity: 0.5 })}
     {...containerStyle}
   >
     {LeftIcon && <LeftIcon />}
-    <Typography color={labelColor} fontFamily="sf400" mx={2}>
+    <Typography color={labelColor} fontFamily="sf400" mx={moderateScale(2)}>
       {label}
     </Typography>
     {onClose && (
       <Touchable
         bg={closeIconBackground}
-        borderRadius={10}
+        borderRadius={moderateScale(10)}
         disabled={isDisabled}
         onPress={onClose}
         {...closeIconContainerStyle}
@@ -100,7 +101,7 @@ Chip.defaultProps = {
   closeIconBackground: "background.grey500",
   closeIconColor: "white",
   isDisabled: false,
-  closeIconSize: 14,
+  closeIconSize: moderateScale(14),
   closeIcon: "ri-close-fill",
 };
 

package/src/components/Divider.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 styled from "styled-components/native";
 import { flexbox, space, color, layout } from "styled-system";
 
@@ -21,7 +22,7 @@ import { flexbox, space, color, layout } from "styled-system";
  * export default function Main(){
  *  return (
  *   <Container>
- *     <Divider orientation="vertical" thickness={1}/>
+ *     <Divider orientation="vertical" thickness={moderateScale(1)}/>
  *   </Container>
  *  );
  * }
@@ -55,7 +56,7 @@ export const Divider = ({ thickness, orientation, bg, ...rest }) => {
 Divider.defaultProps = {
   bg: "background.grey400",
   orientation: "horizontal",
-  thickness: 1,
+  thickness: moderateScale(1),
 };
 
 Divider.propTypes = {

package/src/components/FAB.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 { Touchable } from "@components";
 import { theme } from "@theme";
@@ -50,10 +51,10 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
     shadowColor: theme.colors.background.grey800,
     shadowOffset: {
       width: 0,
-      height: 2,
+      height: moderateScale(2),
     },
     shadowOpacity: 0.25,
-    shadowRadius: 3.84,
+    shadowRadius: moderateScale(3.84),
     elevation: 5,
   };
 
@@ -79,10 +80,10 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
 
 FAB.defaultProps = {
   variant: "solid",
-  size: 56,
+  size: moderateScale(56),
   alignItems: "center",
   justifyContent: "center",
-  borderRadius: 28,
+  borderRadius: moderateScale(28),
 };
 
 FAB.propTypes = {

package/src/components/FlashList.jsx

@@ -13,6 +13,7 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 import { useRefreshByUser } from "@hooks";
@@ -25,12 +26,18 @@ const Placeholder = () => {
     <ContentLoader
       backgroundColor={theme.colors.lightgrey}
       foregroundColor={theme.colors.grey300}
-      height="60"
-      marginHorizontal={15}
-      viewBox="0 0 400 50"
-      width={400}
+      height={moderateScale(60)}
+      marginHorizontal={moderateScale(15)}
+      viewBox={`0 0 ${moderateScale(400)} ${moderateScale(50)}`}
+      width={moderateScale(400)}
     >
-      <Rect height="50" rx="5" ry="5" width={width - 30} x="0" />
+      <Rect
+        height={moderateScale(50)}
+        rx={moderateScale(5)}
+        ry={moderateScale(5)}
+        width={width - moderateScale(30)}
+        x="0"
+      />
     </ContentLoader>
   );
 };