Softlofy-rn-components NPM

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

Typography

InputField

PhoneInput

Use softlofy-rn-phone-input-component

CustomStatusBar

FlexContainer

FullWidthContainer

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

InputError

NonScrollableScreenContainer

ScrollableScreenContainer

ScreenTitle

Spacer

Tag

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