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'`
onPress	`((event: GestureResponderEvent) => void)	undefined;`	false
title	string	false	""
disabled	boolean	false	undefined
width	`DimensionValue	undefined`	false
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'
color	string	false	accentColor
fontSize	number	false	16
fontWeight	`'normal'	'bold'	'100'
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`

FlexContainer

Props

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

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;`
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