Softlofy RN Components

A collection of commonly used components on React Native project developed by Softlofy.

Installation:

There are two ways to use Softlofy RN Components.

Way 1: Initiate a new project with Softlofy RN Components

npx softlofy-rn-components-starter <YourProjectName>

Way 2: Configure with an existing project

Step 1: Run npm i softlofy-rn-components

Step 2 Install packages npm i --dev react-native-svg-transformer & npm i react-native-svg react-native-reanimated

Step 3 Add react-native-reanimated/plugin plugin to your babel.config.js.

   module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Step 4 Change your metro.config.js

For Expo SDK v41.0.0 or newer

Merge the contents from your project's metro.config.js file with this config (create the file if it does not exist already).

metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

For React Native v0.72.1 or newer:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;


const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

For React Native v0.59 or newer

Merge the contents from your project's metro.config.js file with this config (create the file if it does not exist already).

metro.config.js:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

Using TypeScript

If you are using TypeScript, you need to add this to your declarations.d.ts file (create one if you don't have one already):

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Usage

Wrap your app by Wrapper

import  React  from  'react';
import  {Wrapper}  from  'softlofy-rn-components';

const  App  =  ()  =>  {
return  (
    <Wrapper>
	    // Your App
    </Wrapper>
)};



export  default  App;

Components

Button

Props |Name| Type | is required |Default| |--|--|--|--| | variant| 'fillRounded' | 'transparent' | 'outline' | true | N/A | onPress | ((event: GestureResponderEvent) => void) | undefined; | false| undefined | title | string | false | ""| | disabled | boolean| false | undefined | |width | DimensionValue | undefined | false | '100%' | |flex | number | false | undefined | |backgroundColor (for fillRounded variant only) | string | false | undefined | |textColor | string | false | accentColor| |icon | React.ReactNode | false | undefined| | themeColor (for outline only) | string | false | undefined

Typography

Props |Name| Type | is required |Default| |--|--|--|--| | children| React.ReactNode | true | N/A |textAlign| 'left' | 'right' | 'center' | 'justify' | undefined; | false | left |color | string | false | accentColor | fontSize | number | false | 16 | fontWeight | 'normal'| 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined; | false | normal | flex | number | false | 0 | opacity | number | false | 1

InputField

Props |Name| Type ==================== | is required |Default| |--|--|--|--| | bgColor| string | false | colors.gray for dark mode device and colors.light_gray for light mode | textColor | string | false | colors.white for dark mode and colors.black for light mode | |error|string | false | "" | |placeholder | string | false | undefined | | placeholderTextColor | string | false | colors.light_gray for darks mode and colors.gray for light mode | | cursorColor | string | false | colors.sky | onFocus | () => void | false| undefined | |onChangeText | (text: string) => void | false | undefined| | value| string | false | ""| | variant| normal or password | false | ""|

PhoneInput

Use softlofy-rn-phone-input-component

CustomStatusBar

Props |Name| Type | is required |Default| |--|--|--|--| | backgroundColor| string | false | themeColor | barStyle | StatusBarStyle | null | undefined | false | theme === 'dark' ? 'light-content' : 'dark-content';

FlexContainer

Props |Name| Type | is required |Default| |--|--|--|--| | children| React.ReactNode | true| N/A | justifyContent | 'center'| 'flex-start' | 'flex-end' | 'space-between'| 'space-around' | 'space-evenly' | false | space-between | alignItems | 'center' | 'flex-start' | 'flex-end' | false | center | flex | number | false | undefined | gap | number | false | undefined | padding | number | false | undefined | margin | number | false | undefined | backgroundColor | string | false | undefined | width | DimensionValue | undefined | false | undefined

FullWidthContainer

Props |Name| Type | is required |Default| |--|--|--|--| | children| React.ReactNode | true| N/A | style | StyleProp<ViewStyle>; | false| {width: '100%',}

InputError

Props |Name| Type | is required |Default| |--|--|--|--| | error| string | true| N/A

NonScrollableScreenContainer

Props |Name| Type | is required |Default |--|--|--|--| | children| string | true| N/A | paddingHorizontal | number | false | 16 | paddingVertical | number | false | 16 | backgroundColor | number | false | themeColor | statusBarBg | string | false | default style of < CustomStatusBar /> | barStyle | StatusBarStyle | null | undefined; | false | default style of < CustomStatusBar /> | screenTitleProps | Same as < ScreenTitle /> | false | Default of < ScreenTitle />

ScrollableScreenContainer

Props Everything from NonScrollableScreenContainer & |Name| Type | is required |Default |--|--|--|--| | refreshing| boolean | false| undefined | onRefresh | () => void | false | undefined |refreshControlColors | string[] | false | default

ScreenTitle

Props |Name| Type | is required |Default |--|--|--|--| | showBackButton| boolean | false| false | customBackIcon| React.ReactNode | false | undefined | onBackClick | () => void | false | undefined | title | string | false | "" | paddingHorizontal | number | false | undefined | rightComponent | React.ReactNode | false | < Spacer />

Spacer

Props |Name| Type | is required |Default |--|--|--|--| | height| number | false| undefined |width |DimensionValue | false | 100%

Tag

Props |Name| Type | is required |Default |--|--|--|--| | tag| string | true| N/A | backgroundColor | string | true | N/A | color | string | false | white | flex | number | false | 0

Hooks

useColors

Will give you a color palette Note: Color palette is inspired by Tailwind CSS's Colors You will get the 500 variant's color of tailwind's color palatte.

const colors = useColors()

will return the following object

{
    white:  '#ffffff',
    light_gray:  '#d1d5db',
    black:  '#000000',
    slate:  '#64748b',
    gray:  '#6b7280',
    zinc:  '#71717a',
    neutral:  '#737373',
    stone:  '#78716c',
    red:  '#ef4444',
    orange:  '#f97316',
    amber:  '#f59e0b',
    yellow:  '#eab308',
    lime:  '#84cc16',
    green:  '#22c55e',
    emerald:  '#10b981',
    teal:  '#14b8a6',
    cyan:  '#06b6d4',
    sky:  '#0ea5e9',
    blue:  '#3b82f6',
    indigo:  '#6366f1',
    violet:  '#8b5cf6',
    purple:  '#a855f7',
    fuchsia:  '#d946ef',
    pink:  '#ec4899',
    rose:  '#f43f5e',
}

useLoading

const  {isLoading,  setIsLoading}  =  useLoading();

is loading will return the loading state, and setIsLoading(stateYouWannaSet: boolean, colorYouWannaSeeTheSpinner?:string)

useSnackBar

const  {showSnackBar}  =  useSnackBar();

showSnackBar(message:string, variant:'success'  |  'error'  |  'warning'  |  'info')

useThemeColor

const themeColor = useThemeColor()

will return

   if (deviceTheme==="dark"){
	    return '#242424'
   } else{
       return '#F1F1F1'
   }

useAccentColor

const accentColor = useAccentColor()

will return

   if (deviceTheme==="dark"){
	    return colors.white
   } else{
       return colors.black
   }
   // Where colors is the object returned by useColors hook