Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-ui-kit/expo-ui-kit
expo-ui-kit - a components based React-Native UI Kit
https://github.com/react-ui-kit/expo-ui-kit
expo expo-ui-kit hacktoberfest predefined-props react-native react-native-component react-ui-kit rgba theme ui-kit ui-kit-framework
Last synced: 4 days ago
JSON representation
expo-ui-kit - a components based React-Native UI Kit
- Host: GitHub
- URL: https://github.com/react-ui-kit/expo-ui-kit
- Owner: react-ui-kit
- License: mit
- Created: 2019-03-24T14:21:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T18:30:21.000Z (4 months ago)
- Last Synced: 2024-12-30T14:18:00.619Z (11 days ago)
- Topics: expo, expo-ui-kit, hacktoberfest, predefined-props, react-native, react-native-component, react-ui-kit, rgba, theme, ui-kit, ui-kit-framework
- Language: JavaScript
- Homepage: http://expo-ui-kit.com
- Size: 410 KB
- Stars: 98
- Watchers: 3
- Forks: 25
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://facebook.github.io/react-native/docs/view) component
- Card: Block with predefined props
- Button: based on [React-Native TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity) with predefined props and styles
- Input: based on [React-Native TextInput](https://facebook.github.io/react-native/docs/textinput) component
- Text: Typography component based on [React-Native Text](https://facebook.github.io/react-native/docs/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
```html
components
```
- disable flex
```html
flex: 0
flex: 0
```
- flex for half of the size
```html
flex: 0.5
```
- row will render flexDirection: row
```html
text 1
text 2
```
- vertical centering the content
```html
text 1
text 2
```
- horizontal centering the content
```html
text 1
text 2
```
- vertical & horizontal centering the content
```html
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
```html
backgroundColor: COLORS.primary
backgroundColor: COLORS.secondary
```
- custom color using hex color
```html
backgroundColor: #DDDDDD
```
Arrange content using justifyContent
https://reactnative.dev/docs/layout-props#justifycontent
- space between the content
```html
1st text
2nd text
```
- space evenly the content
```html
1st text
2nd text
```
- space around the content
```html
1st text
2nd text
```
Border radius
- round the corners using borderRadius: 6
```html
1st text
2nd text
```
Wrap content using flexWrap, default flexWrap: 'nowrap'
https://reactnative.dev/docs/flexbox#flex-wrap
- flexWrap: 'wrap'
```html
1st text
2nd text
3rd text
```
For animations animate props can be use to render Animated.View component
- animated will render Animated.View
```html
animated view
```
For safe area views, safe props can be use to render SafeAreaView component
- safe will render SafeAreaView
```html
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
```html
instance of TouchableHighlight
```
- TouchableNativeFeedback
```html
instance of TouchableNativeFeedback
```
- TouchableWithoutFeedback
```html
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
```html
backgroundColor: COLORS.primary
backgroundColor: "transparent"
```
- custom color using hex color
```html
backgroundColor: #DDDDDD
```
Set activeOpacity using opacity prop
default activeOpacity=0.8
```html
opacity={0.5}
```
Outlined and add borderColor equal with backgroundColor
```html
outlined
```
Disabling the button
```html
disabled
false
```
Add flex to button style
```html
flex=1
flex=2
```
Add height to button style
```html
height=58
```
# Card
https://reactnative.dev/docs/view
https://reactnative.dev/docs/flexbox
Using Block component with predefined props: color, radius and padding
```html
default card
```
Border radius using radius props
```html
radius={8}
```
Padding using padding props
- default padding={SIZES.base}
```html
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
```html
shadow
shadow elevation={2}
```
Set borderColor using outlined prop
- default borderWidth: 1 and borderColor: Utils.rgba(COLORS.black, 0.16) with alpha 0.16
```html
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
```html
console.log(isValid)} />
```
- multiple pattern to validate the value
```html
console.log(isValid)} />
```
Border color using color prop
```html
```
Pass ref from props using internalRef reference
```html
this.c} />
```
# Text
https://reactnative.dev/docs/text
Usage:
- fontSize predefined by theme.js
```html
fontSize of 34 from FONTS.h1
fontSize of 24 from FONTS.h2
fontSize of 20 from FONTS.h3
fontSize of 18 from FONTS.title
fontSize of 14 from FONTS.subtitle
fontSize of 12 from FONTS.caption
fontSize of 10 from FONTS.small
```
- fontSize defined by user
```html
fontSize of 20
```
- margin & padding
```html
set margin 4 to: top, right, bottom & left
set margin 6 to: top, right, bottom & left
```
- text styling
```html
textTransform: capitalize, lowercase, uppercase
fontWeight from WEIGHTS.regular
fontWeight from WEIGHTS.bold
fontWeight from WEIGHTS.semibold
fontWeight from WEIGHTS.medium
fontWeight from WEIGHTS.light
fontWeight from user input
```
- text colors
```html
color from COLORS.primary
color from COLORS.secondary
color from COLORS.tertiary
color from COLORS.black
color from COLORS.white
color from COLORS.gray
color from COLORS.info
color from COLORS.success
color from COLORS.warning
color from COLORS.error
color 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
```js
{
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
```html
primary using new color: #8A00D4
```
- animating text can be used using the "animated" props
```html
will render Animated.Text
```