expo-ui-kit - a components based React-Native UI Kit
expo-ui-kit is a React-Native UI framework based on Expo.io SDK that will help build React-Native Expo apps using predefined & customizable UI components.
UI Components:
- Block: based on React-Native View component
- Card: Block with predefined props
- Button: based on React-Native TouchableOpacity with predefined props and styles
- Input: based on React-Native TextInput component
- Text: Typography component based on React-Native Text component
Tools & Utils:
- helpers: getMargins, getPaddings, mergeTheme
- rgba: transform hex colors into rgba colors using opacity
- theme.js: default theme for UI components with predefined values for: COLORS, SIZES, FONTS
Block
https://reactnative.dev/docs/view
https://reactnative.dev/docs/flexbox
Usage:
- default Block has flex: 1
components
- disable flex
flex: 0 flex: 0
- flex for half of the size
flex: 0.5
- row will render flexDirection: row
text 1 text 2
- vertical centering the content
text 1 text 2
- horizontal centering the content
text 1 text 2
- vertical & horizontal centering the content
text 1 text 2
Colors
- will render backgroundColor using predefined colors from theme.js COLORS array
- predefined colors: primary, secondary, tertiary, black, white, gray, error, warning, success, info
backgroundColor: COLORS.primary backgroundColor: COLORS.secondary
- custom color using hex color
backgroundColor: #DDDDDD
Arrange content using justifyContent
https://reactnative.dev/docs/layout-props#justifycontent
- space between the content
1st text 2nd text
- space evenly the content
1st text 2nd text
- space around the content
1st text 2nd text
Border radius
- round the corners using borderRadius: 6
1st text 2nd text
Wrap content using flexWrap, default flexWrap: 'nowrap'
https://reactnative.dev/docs/flexbox#flex-wrap
- flexWrap: 'wrap'
1st text 2nd text 3rd text
For animations animate props can be use to render Animated.View component
- animated will render Animated.View
animated view
For safe area views, safe props can be use to render SafeAreaView component
- safe will render SafeAreaView
safe area view
Button
https://reactnative.dev/docs/touchableopacity
https://reactnative.dev/docs/touchablehighlight
https://reactnative.dev/docs/touchablenativefeedback
https://reactnative.dev/docs/touchablewithoutfeedback
Default render an instance of TouchableOpacity
- TouchableHighlight
instance of TouchableHighlight
- TouchableNativeFeedback
instance of TouchableNativeFeedback
- TouchableWithoutFeedback
instance of TouchableWithoutFeedback
Colors
- will render backgroundColor using predefined colors from theme.js COLORS array
- predefined colors: primary, secondary, tertiary, black, white, gray, error, warning, success, info
backgroundColor: COLORS.primary backgroundColor: "transparent"
- custom color using hex color
backgroundColor: #DDDDDD
Set activeOpacity using opacity prop default activeOpacity=0.8
opacity={0.5}
Outlined and add borderColor equal with backgroundColor
outlined
Disabling the button
disabled false
Add flex to button style
flex=1 flex=2
Add height to button style
height=58
Card
https://reactnative.dev/docs/view
https://reactnative.dev/docs/flexbox
Using Block component with predefined props: color, radius and padding
default card
Border radius using radius props
radius={8}
Padding using padding props
- default padding={SIZES.base}
padding={12}
Set shadow using shadow props
- default shadow with color black and elevation
- shadowOffset is calculated using elevation - 1
- shadowRadius is equal with elevation value
shadow shadow elevation={2}
Set borderColor using outlined prop
- default borderWidth: 1 and borderColor: Utils.rgba(COLORS.black, 0.16) with alpha 0.16
outlined
Input
https://reactnative.dev/docs/textinput
Validation
- onValidation return a single boolean or object with boolean values
- pattern using regex string for validating the value
- single pattern to validate the value
console.log(isValid)} />
- multiple pattern to validate the value
console.log(isValid)} />
Border color using color prop
Pass ref from props using internalRef reference
this.c} />
Text
https://reactnative.dev/docs/text
Usage:
- fontSize predefined by theme.js
fontSize of 34 from FONTS.h1fontSize of 24 from FONTS.h2fontSize of 20 from FONTS.h3fontSize of 18 from FONTS.titlefontSize of 14 from FONTS.subtitlefontSize of 12 from FONTS.captionfontSize of 10 from FONTS.small
- fontSize defined by user
fontSize of 20
- margin & padding
set margin 4 to: top, right, bottom & leftset margin 6 to: top, right, bottom & left
- text styling
textTransform: capitalize, lowercase, uppercasefontWeight from WEIGHTS.regularfontWeight from WEIGHTS.boldfontWeight from WEIGHTS.semiboldfontWeight from WEIGHTS.mediumfontWeight from WEIGHTS.lightfontWeight from user input
- text colors
color from COLORS.primarycolor from COLORS.secondarycolor from COLORS.tertiarycolor from COLORS.blackcolor from COLORS.whitecolor from COLORS.graycolor from COLORS.infocolor from COLORS.successcolor from COLORS.warningcolor from COLORS.errorcolor from user input
custom theme using the src/theme.js data structure
- create a custom theme by defining: const customTheme.js
- with the following structure to rewrite any value
COLORS: primary: "cyan" or "#8A00D4" secondary: "fucsia" or "#D527B7" tertiary: "yellow" or "#FFC46B" SIZES: font: 15 h1: 28 title: 17
- include the custom theme to the component props
primary using new color: #8A00D4
- animating text can be used using the "animated" props
will render Animated.Text