Jitera React Native UI public library
A public React Native library providing UI components and making it simple for you to build mobile application
Dependences
require
"color": "^3.1.3"
"react-native-size-matters": "^0.4.0",
// optional
"react-native-fast-image": "^8.3.4",
"react-native-safe-area-context": "^3.1.9",dev
"@types/color": "^3.0.1",Installing
Wrapped you app with "ThemeProvider"
const theme = {
colors: {
primary: '#010D36',
},
Button: {
raised: true,
buttonStyle: {
height: 56,
},
},
};
<ThemeProvider safeArea theme={theme}>
...
</ThemeProvider>;the config of theme object will overwrite the the default config. it also supported to change default props of atoms components. EX:
Button: {
raised: true,
buttonStyle: {
height: 56
}
},
By default all button will raised ( have shadow ). and height: 56 . But you can overwrite it whenever you want
<Button raised={false} buttonStyle={{ height: 38 }}>Feature
Provide default components:
- Button: supportted types: clear, outline, solid, linear-gradiend, loading, suffix, preffix, etc
- Image: placeholder, fast-image, etc
- Input: label, error message, etc
- Text
- Page: Default wrapper for screen, support safe area and default background
- View
- Header: Support default backbutton, title, etc
Provide default widgets:
- CommonLoading: full page loading, accessable anywhere
- Modal: Full page modal, accessable anywhere
- Toast: Toast, accessable anywhere
Usage
Theme variable:
import { withTheme } from '@jitera/jitera-rn-ui-library';
withTheme(YourComponent);
const YourComponent = ({
theme, // provided current theme
...props
}) => {
// By default theme will provide you usefull variable
// + theme.fonts: for custom font family and font weight { regular, thin, light, black, medium, bold }
// + theme.colors: all color { rprimary, secondary, background, header, success, error, ... }
// + theme.spacing: { SPACING_1, SPACING_10, SPACING_12, SPACING_50, ... }
// + theme.fontSizes: { FONT_10, FONT_12, FONT_24, FONT_40, ... }
// + theme.safeArea: Usefull when calculator the screen ignore nock, statusbar, etc { top, bottom, left, right }
};Default components:
import { Button, View, Image, View, Text, Page } from '@jitera/jitera-rn-ui-library';Default widgets:
- CommonLoading
import { CommonLoading } from '@jitera/jitera-rn-ui-library';
const action = async () => {
try {
CommonLoading.show();
// Wait some async job
await fetchData();
CommonLoading.hide();
} catch (err) {
CommonLoading.hide();
}
};- Modal
import { Modal } from '@jitera/jitera-rn-ui-library'
const onPressButton = async () => {
Modal.show(
<YourComponent
onSuccess={() => {
Modal.hide()
}}
onCancel={() => {
Modal.hide()
}}
>
)
}- Toast
import { Toast } from '@jitera/jitera-rn-ui-library';
const onPressButton = async () => {
Toast.show(' -- Your Message -- ', { type: 'error' });
};