softlofy-rn-components-starter

Softlofy RN Components

This project has been started with softlofy-rn-components which is developed by Softlofy

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	""

PhoneInput

Props Everything from InputField &

Name	Type	is required	Default
dialCode	string	false	undefined
setDialCode	(dialCode: string) => void	true	N/A

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