@bigbinary/neetoui-rn 0.0.229 → 0.0.231

package/src/components/RadioButton.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 
 import Proptypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography, Touchable } from "@components";
@@ -24,6 +25,7 @@ import { Container, Typography, Touchable } from "@components";
  *  ## Usage
  * ```js
  * import * as React from "react";
+ * import { moderateScale } from "react-native-size-matters";
  * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
@@ -33,18 +35,18 @@ import { Container, Typography, Touchable } from "@components";
  *  return (
  *    <Container>
  *      <RadioButton
- *        mt={2}
+ *        mt={moderateScale(2)}
  *        selected={selected1}
  *        onSelect={() => setSelected1(prev => !prev)}
  *        label={`Radio button marked as ${!selected1 ? "un" : ""}selected`}
  *      />
  *      <RadioButton
- *        mt={3}
+ *        mt={moderateScale(3)}
  *        selected={selected2}
  *        onSelect={() => setSelected2(prev => !prev)}
  *        label={`Radio button marked as ${!selected2 ? "un" : ""}selected`}
  *      />
- *      <RadioButton mt={3} disabled label="Disabled Radio button" />
+ *      <RadioButton mt={moderateScale(3)} disabled label="Disabled Radio button" />
  *    </Container>
  *  );
  * }
@@ -70,7 +72,7 @@ export const RadioButton = ({
   };
 
   const selectedProps = {
-    borderWidth: 4,
+    borderWidth: moderateScale(4),
     borderColor: theme.colors.background.base,
     labelProps: {
       fontFamily: theme.fonts.sf500,
@@ -79,7 +81,7 @@ export const RadioButton = ({
   };
 
   const unselectedProps = {
-    borderWidth: 2,
+    borderWidth: moderateScale(2),
     borderColor: theme.colors.border.secondary,
     labelProps: {
       fontFamily: theme.fonts.sf400,
@@ -97,9 +99,9 @@ export const RadioButton = ({
     >
       <Container
         bg={theme.colors.background.white}
-        borderRadius={8}
-        height={16}
-        width={16}
+        borderRadius={moderateScale(8)}
+        height={moderateScale(16)}
+        width={moderateScale(16)}
         {...(selected && selectedProps)}
         {...(!selected && unselectedProps)}
         {...(disabled && disabledProps)}
@@ -108,7 +110,7 @@ export const RadioButton = ({
       <Typography
         flex={1}
         fontSize="m"
-        ml={2}
+        ml={moderateScale(8)}
         {...(selected && selectedProps.labelProps)}
         {...(!selected && unselectedProps.labelProps)}
         {...(disabled && disabledProps.labelProps)}

package/src/components/RichTextEditor.jsx

@@ -35,6 +35,7 @@ export const ScrollView = styled.ScrollView.attrs(() => ({
  *  ## Usage
  * ```js
  * import * as React from "react";
+ * import { moderateScale } from "react-native-size-matters";
  * import { Container, RichTextEditor, theme } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {

package/src/components/SearchBar.jsx

@@ -3,6 +3,7 @@ import { Animated, TouchableWithoutFeedback } from "react-native";
 
 import PropTypes from "prop-types";
 import Icon from "react-native-remix-icon";
+import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
 import {
   flexbox,
@@ -109,25 +110,25 @@ export const SearchBar = ({
         <Container
           alignItems="center"
           borderColor={theme.colors.border.grey400}
-          borderRadius={8}
-          borderWidth={1}
+          borderRadius={moderateScale(8)}
+          borderWidth={moderateScale(1)}
           flex={1}
           flexDirection="row"
-          height={42}
+          height={moderateScale(42)}
           {...containerProps}
         >
-          <Container px={10}>
+          <Container px={moderateScale(10)}>
             <Icon
               color={theme.colors.font.grey600}
               name="ri-search-line"
-              size={20}
+              size={moderateScale(20)}
             />
           </Container>
           <TextInput
             autoCapitalize="none"
             color="font.primary"
             flex={1}
-            fontSize={16}
+            fontSize={moderateScale(16)}
             placeholder={placeholder}
             placeholderTextColor={theme.colors.font.grey600}
             ref={inputRef}
@@ -154,7 +155,7 @@ export const SearchBar = ({
           }}
         >
           <Button
-            height={20}
+            height={moderateScale(20)}
             label="Cancel"
             labelStyle={{ mx: 0 }}
             variant="text"

package/src/components/SegmentedTopBar.jsx

@@ -7,6 +7,7 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
 
 import { Typography, Touchable } from "@components";
 import { theme } from "@theme";
@@ -15,10 +16,10 @@ const defaultShadowStyle = {
   shadowColor: theme.colors.background.grey800,
   shadowOffset: {
     width: 0,
-    height: 2,
+    height: moderateScale(2),
   },
   shadowOpacity: 0.23,
-  shadowRadius: 2.62,
+  shadowRadius: moderateScale(2.62),
   elevation: 4,
 };
 
@@ -33,7 +34,7 @@ const DEFAULT_SPRING_CONFIG = {
 };
 
 // So that it stretches in landscape mode.
-const width = Dimensions.get("screen").width - 32;
+const width = Dimensions.get("screen").width - moderateScale(32);
 
 /**
  *
@@ -109,7 +110,7 @@ export const SegmentedTopBar = ({
           defaultShadowStyle,
           StyleSheet.absoluteFill,
           {
-            width: (width - 4) / routes?.length,
+            width: (width - moderateScale(4)) / routes?.length,
           },
           tabTranslateAnimatedStyles,
         ]}
@@ -156,7 +157,7 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 8,
+    borderRadius: moderateScale(8),
     width,
   },
   defaultSegmentedControlWrapper: {
@@ -164,16 +165,16 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 8,
+    borderRadius: moderateScale(8),
     backgroundColor: "#F6F6FA",
     width,
-    marginBottom: 5,
+    marginBottom: moderateScale(5),
   },
   movingSegmentStyle: {
     top: 0,
-    marginVertical: 2,
-    marginHorizontal: 2,
-    borderRadius: 6,
+    marginVertical: moderateScale(2),
+    marginHorizontal: moderateScale(2),
+    borderRadius: moderateScale(6),
     backgroundColor: "#FFFFFF",
   },
 });
@@ -206,5 +207,5 @@ SegmentedTopBar.propTypes = {
 
 SegmentedTopBar.defaultProps = {
   tabs: [],
-  height: 32,
+  height: moderateScale(32),
 };

package/src/components/Select.jsx

@@ -11,6 +11,7 @@ import Animated, {
   runOnJS,
 } from "react-native-reanimated";
 import Icon from "react-native-remix-icon";
+import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
 import {
@@ -36,7 +37,7 @@ const DropdownItem = ({
     <Container
       bg={isSelectedItem ? "background.base" : "background.white"}
       height={defaultDropdownItemHeight}
-      p={2}
+      p={moderateScale(2)}
       {...itemContainerStyle}
       {...(isSelectedItem && selectedItemContainerStyle)}
     >
@@ -154,15 +155,18 @@ export const Select = ({
   const isOptionsEmpty = !options || options?.length === 0;
   const isSearchedOptionsEmpty =
     searchQuery.length > 0 && filteredOptions.length === 0;
-  const emptyOptionsPlaceholderHeight = 40;
-  const emptySearchedOptionsHeight = 40;
-  const searchInputHeight = 35;
-  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
+  const emptyOptionsPlaceholderHeight = moderateScale(40);
+  const emptySearchedOptionsHeight = moderateScale(40);
+  const searchInputHeight = moderateScale(35);
+  const defaultDropdownItemHeight =
+    itemContainerStyle?.height || moderateScale(32);
+
   const dropdownHeight =
     dropdownContainerStyle?.height ||
     dropdownContainerStyle?.maxHeight ||
-    defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
-      (isSearchable ? searchInputHeight + 10 : 0) +
+    defaultDropdownItemHeight *
+      Math.min(filteredOptions?.length, moderateScale(6)) +
+      (isSearchable ? searchInputHeight + moderateScale(10) : 0) +
       (isOptionsEmpty && !(isSearchedOptionsEmpty && showCreateOption)
         ? emptyOptionsPlaceholderHeight
         : 0) +
@@ -224,7 +228,7 @@ export const Select = ({
         color="font.base"
         fontFamily="sf400"
         fontSize="s"
-        mb={1}
+        mb={moderateScale(1)}
         {...labelStyle}
       >
         {label}
@@ -236,10 +240,10 @@ export const Select = ({
         <Container
           alignItems="center"
           borderColor="border.grey400"
-          borderWidth={1}
+          borderWidth={moderateScale(1)}
           flexDirection="row"
           justifyContent="space-between"
-          p={2}
+          p={moderateScale(2)}
           {...inputContainerStyle}
           {...rest}
         >
@@ -252,7 +256,7 @@ export const Select = ({
             <Icon
               color="grey"
               name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
-              size="20"
+              size={moderateScale(20)}
             />
           )}
         </Container>
@@ -263,12 +267,12 @@ export const Select = ({
             <Card
               bg="background.white"
               borderColor="border.grey400"
-              borderWidth={1}
+              borderWidth={moderateScale(1)}
               maxHeight={dropdownHeight}
               {...dropdownContainerStyle}
             >
               {isSearchable && (
-                <Container p={1} {...searchInputContainerStyle}>
+                <Container p={moderateScale(1)} {...searchInputContainerStyle}>
                   <Input
                     fontSize="s"
                     placeholder="Search"
@@ -417,59 +421,59 @@ Select.propTypes = {
    */
   onPressCreateOption: PropTypes.func,
   /**
-   * To customise floating label styles.
+   * To customize floating label styles.
    */
   labelStyle: PropTypes.object,
   /**
-   * To customise outermost container style.
+   * To customize outermost container style.
    */
   containerStyle: PropTypes.object,
   /**
-   * To customise Select input container styles.
+   * To customize Select input container styles.
    */
   inputContainerStyle: PropTypes.object,
   /**
-   * To customise dropdown container styles.
+   * To customize dropdown container styles.
    */
   dropdownContainerStyle: PropTypes.object,
   /**
-   * To customise dropdown item container styles.
+   * To customize dropdown item container styles.
    */
   itemContainerStyle: PropTypes.object,
   /**
-   * To customise dropdown item text styles.
+   * To customize dropdown item text styles.
    */
   itemLabelStyle: PropTypes.object,
   /**
-   * To customise dropdown item container styles for selected item.
+   * To customize dropdown item container styles for selected item.
    */
   selectedItemContainerStyle: PropTypes.object,
   /**
-   * To customise dropdown item text styles for selected item.
+   * To customize dropdown item text styles for selected item.
    */
   selectedItemLabelStyle: PropTypes.object,
   /**
-   * To customise search input containerr style.
+   * To customize search input containerr style.
    */
   searchInputContainerStyle: PropTypes.object,
   /**
-   * To customise search input style.
+   * To customize search input style.
    */
   searchInputStyle: PropTypes.object,
   /**
-   * To customise empty options placeholder container style.
+   * To customize empty options placeholder container style.
    */
   emptyOptionsContainerStyle: PropTypes.object,
   /**
-   * To customise empty options placeholder text style.
+   * To customize empty options placeholder text style.
    */
   emptyOptionsLabelStyle: PropTypes.object,
   /**
-   * To customise empty options placeholder container style.
+   * To customize empty options placeholder container style.
    */
   createSearchedOptionContainerStyle: PropTypes.object,
   /**
-   * To customise empty options placeholder text style.
+   * To customize empty options placeholder text style.
    */
   createSearchedOptionLabelStyle: PropTypes.object,
 };

package/src/components/SocialButton.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 AppleLogo from "@assets/icons/apple-logo.svg";
@@ -24,7 +25,7 @@ import { Container, Typography, Touchable, Loader } from "@components";
  * export default function Main() {
  *  return (
  *    <Container>
- *      <SocialButton variant="apple" my={9} />
+ *      <SocialButton variant="apple" my={moderateScale(9)} />
  *      <SocialButton variant="google" />
  *    </Container>
  *  );
@@ -48,10 +49,10 @@ export const SocialButton = ({
       alignItems="center"
       bg="transparent"
       borderColor={theme.colors.border.grey800}
-      borderRadius={8}
-      borderWidth={1}
+      borderRadius={moderateScale(8)}
+      borderWidth={moderateScale(1)}
       disabled={disabled}
-      height={48}
+      height={moderateScale(48)}
       justifyContent="center"
       rippleColor={theme.colors.background.grey800}
       width="100%"
@@ -61,7 +62,7 @@ export const SocialButton = ({
         <Loader color={theme.colors.background.grey800} />
       ) : (
         <>
-          <Container left={17} position="absolute">
+          <Container left={moderateScale(17)} position="absolute">
             {variant === "apple" && <AppleLogo />}
             {variant === "google" && <GoogleLogo />}
           </Container>

package/src/components/Toast.jsx

@@ -5,6 +5,7 @@ import { useWindowDimensions } from "react-native";
 import PropTypes from "prop-types";
 import DeviceInfo from "react-native-device-info";
 import CloseIcon from "react-native-remix-icon";
+import { moderateScale } from "react-native-size-matters";
 import T from "react-native-toast-message";
 import { ThemeContext } from "styled-components/native";
 
@@ -12,7 +13,7 @@ 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 { Container, Typography, Touchable } from "@components";
+import { Container, Typography, Card, Touchable } from "@components";
 import { defaultToasterConfig } from "@config";
 
 const ToastComponent = ({ type, text1, text2, hide }) => {
@@ -34,28 +35,29 @@ const ToastComponent = ({ type, text1, text2, hide }) => {
   };
 
   return (
-    <Container
+    <Card
       alignItems="center"
       bg={theme.colors.background.secondary}
-      borderRadius={16}
+      borderRadius={moderateScale(16)}
+      elevation={10}
       flexDirection="row"
-      minHeight={60}
-      mt={DeviceInfo.hasDynamicIsland() ? 10 : 0}
-      mx={10}
-      px={10}
-      width={width - 20}
+      minHeight={moderateScale(60)}
+      mt={DeviceInfo.hasDynamicIsland() ? moderateScale(10) : 0}
+      mx={moderateScale(10)}
+      px={moderateScale(10)}
+      width={width - moderateScale(20)}
     >
       <Container
         alignItems="center"
         bg={theme.colors.toast[type]}
-        borderRadius={10}
-        height={42}
+        borderRadius={moderateScale(10)}
+        height={moderateScale(42)}
         justifyContent="center"
-        width={42}
+        width={moderateScale(42)}
       >
         <Icon />
       </Container>
-      <Container flex={1} ml={10} py={3}>
+      <Container flex={1} ml={moderateScale(10)} py={moderateScale(3)}>
         {text1 && (
           <Typography
             fontColor={theme.colors.font.primary}
@@ -77,16 +79,16 @@ const ToastComponent = ({ type, text1, text2, hide }) => {
       </Container>
       <Touchable
         hitSlop={{
-          top: 5,
-          right: 5,
-          bottom: 5,
-          left: 5,
+          top: moderateScale(5),
+          right: moderateScale(5),
+          bottom: moderateScale(5),
+          left: moderateScale(5),
         }}
         onPress={hide}
       >
         <CloseIcon color={theme.colors.font.grey500} name="ri-close-line" />
       </Touchable>
-    </Container>
+    </Card>
   );
 };
 
@@ -122,6 +124,7 @@ ToastComponent.propTypes = {
  *
  *
  *import * as React from "react";
+ *import { moderateScale } from "react-native-size-matters";
  *import { Toast, Container, Button } from "@bigbinary/neetoui-rn";
  *
  *export default function Main() {

package/src/components/ToggleSwitch.jsx

@@ -3,6 +3,7 @@ import { Animated } from "react-native";
 
 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, Touchable } from "@components";
@@ -36,7 +37,9 @@ import { Container, Touchable } from "@components";
 
 export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
   const theme = useContext(ThemeContext);
-  const animatedPosition = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const animatedPosition = useRef(
+    new Animated.Value(value ? moderateScale(1) : 0)
+  ).current;
 
   useEffect(() => {
     startAnimation();
@@ -44,7 +47,7 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
 
   const startAnimation = () => {
     Animated.timing(animatedPosition, {
-      toValue: value ? 20 : 0,
+      toValue: value ? moderateScale(18) : 0,
       duration: 300,
       useNativeDriver: false,
     }).start();
@@ -61,28 +64,28 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
   return (
     <Touchable
       bg={containerBg}
-      borderRadius={70}
+      borderRadius={moderateScale(70)}
       disabled={disabled}
-      height={24}
+      height={moderateScale(24)}
       justifyContent="center"
       opacity={disabled ? 0.5 : 1}
-      px={1}
-      width={44}
+      px={moderateScale(5)}
+      width={moderateScale(44)}
       onPress={() => onValueChange(!value)}
     >
       <Animated.View style={{ transform: [{ translateX: animatedPosition }] }}>
         <Container
           alignItems="center"
           bg="background.white"
-          borderRadius={8}
-          height={16}
+          borderRadius={moderateScale(8)}
+          height={moderateScale(16)}
           justifyContent="center"
-          width={16}
+          width={moderateScale(16)}
         >
           <Icon
             color={iconColor}
             name={`ri-${value ? "check" : "close"}-line`}
-            size={12}
+            size={moderateScale(12)}
           />
         </Container>
       </Animated.View>

package/src/components/TopBar.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Container, Touchable, Typography } from "@components";
 import { theme } from "@theme";
@@ -67,7 +68,7 @@ export const TopBar = ({
 
   return (
     <Container
-      height={50}
+      height={moderateScale(50)}
       style={[styles.defaultTabContainerStyle, tabContainerStyle]}
     >
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -114,14 +115,14 @@ export const TopBar = ({
 const styles = StyleSheet.create({
   defaultActiveContainerStyle: {
     backgroundColor: theme.colors.background.grey800,
-    marginHorizontal: 10,
-    paddingHorizontal: 10,
-    marginVertical: 5,
-    borderRadius: 5,
+    marginHorizontal: moderateScale(10),
+    paddingHorizontal: moderateScale(10),
+    marginVertical: moderateScale(5),
+    borderRadius: moderateScale(5),
   },
   defaultInActiveTabContainerStyle: {
     backgroundColor: theme.colors.background.white,
-    marginHorizontal: 20,
+    marginHorizontal: moderateScale(20),
   },
   defaultActiveTabTextStyle: {
     color: theme.colors.font.white,

package/src/components/Touchable.jsx

@@ -50,7 +50,7 @@ const StyledRipple = styled(Ripple)`
  *       height="30px"
  *       rippleOpacity = {0.09}
  *       rippleDuration = {600}
- *       rippleContainerBorderRadius = {50}
+ *       rippleContainerBorderRadius = {moderateScale(50)}
  *     >
  *       <Typography fontSize="10px">This is wrapped in Touchable component</Typography>
  *     </Touchable>

package/src/theme/index.js

@@ -1,3 +1,5 @@
+import { moderateScale } from "react-native-size-matters";
+
 const defaultColors = {
   white: "#ffffff",
   base: "#4557F8",
@@ -102,19 +104,20 @@ const baseTheme = {
   },
   lineHeights: [24],
   fontSizes: {
-    "4xs": 10,
-    "3xs": 11,
-    "2xs": 12,
-    xs: 13,
-    s: 14,
-    m: 15,
-    l: 16,
-    xl: 17,
-    "2xl": 18,
-    "3xl": 20,
-    "4xl": 22,
-    "5xl": 30,
+    "4xs": moderateScale(10),
+    "3xs": moderateScale(11),
+    "2xs": moderateScale(12),
+    xs: moderateScale(13),
+    s: moderateScale(14),
+    m: moderateScale(15),
+    l: moderateScale(16),
+    xl: moderateScale(17),
+    "2xl": moderateScale(18),
+    "3xl": moderateScale(20),
+    "4xl": moderateScale(22),
+    "5xl": moderateScale(30),
   },
+  space: new Array(100).fill(0).map((_, index) => index + 1),
 };
 
 //aliases

package/src/utils/utils.js

@@ -1,3 +1,5 @@
+import { Platform } from "react-native";
+
 const shadowRadiusList = [
   1, 1.41, 2.22, 2.62, 3.84, 4.65, 4.65, 4.65, 5.46, 6.27, 6.68, 7.49, 8.3,
   9.11, 9.51, 10.32, 11.14, 11.95, 12.35, 13.16, 13.97, 14.78, 15.19, 16,
@@ -21,3 +23,5 @@ export const getShadowStyles = (elevation = 0) => {
     elevation,
   };
 };
+
+export const isAndroid = () => Platform.OS === "android";