[![NPM Version][npm-image]][npm-url] [![Build Status][build-image]][build-url] [![License][license-image]][license-url]
@kietpt2003/react-native-core-ui provides a collection of core, reusable, and easily customizable User Interface (UI) Components built for React Native applications. Our goal is to help you build beautiful and consistent user interfaces quickly.
Tip
- My info: https://github.com/kietpt2003
- View all component on web by Storybook Core UI (Due to those components, designed for Mobile devices, some components are not work well on Storybook web)
Note: If you are new to this project just follow this command:
# If you are currently in root package folder
# Run yarn install for the first time
yarn install
# Run yarn build for apply you local changes -> build -> copy to example/RNCoreUISample/node_modules
yarn build
# From now if you are in example/RNCoreUISample. Just run yarn install
# All your changes in package will be packed and copy to example/RNCoreUISample/node_modules
yarn install- Installation
- Inputs
- Data Display
- Surfaces
- Layout
- Lists
- Navigation
- Color pallete
- Font size template
- Scaling Function
- Resolution Function
- Converter and format
- Debounce
- Others
Please install required packages:
- @react-native-camera-roll/camera-roll: ">=7.10.0" => For access devices media support GalleryBottomSheet & useGalleryAssets.
Note: This package should be upper then 7.10.0. Due to error in v7.7.0 and lowwer version this package won't work correct in GalleryBottomSheet & useGalleryAssets - react-native-device-info: ">=8.1.3", => Use for knowing device is table or not
- react-native-gesture-handler: ">=2.9.0", => Support handling gesture for GalleryBottomSheet
- react-native-reanimated: ">=2.8.0", => For handling package animation
- react-native-svg: ">=12.1.1", => For custom svg
- react-native-vector-icons: ">=8.1.0", => Please config correct installation guidline for not handling icon error
Displays text with default styling. Use this as the baseline for typography.
| Prop | Type | Default | Description |
|---|---|---|---|
style |
StyleProp<TextStyle> |
None | Style of the Text component, just like Text Style Props |
color |
ColorValue |
"black" |
Color of the text |
bold |
boolean |
false |
Choose to bold the text |
children |
React.ReactNode |
None | Provide the text string or another Text component |
load |
boolean |
false |
Waiting before show Text |
styleView |
StyleProp<ViewStyle> |
None | For custom a View outside Text component |
We provide a variety of palete colors and some shadows!
import { colors } from "@kietpt2003/react-native-core-ui/themes";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.black,
},
});We provide variety of fontSize that aldready scaled by our scaleFont API
import { fontSize } from "@kietpt2003/react-native-core-ui/themes";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
text: {
fontSize: fontSize._16,
},
});import {
scale,
verticalScale,
moderateScale,
} from "@kietpt2003/react-native-core-ui/utils";
import { colors, fontSize } from "@kietpt2003/react-native-core-ui/themes";
const Component = (props) => (
<View
style={{
width: scale(30),
height: verticalScale(50),
padding: moderateScale(5),
}}
>
<Text
style={{
fontSize: fontSize._16,
color: colors.black,
}}
>
Component
</Text>
</View>
);Will return a linear scaled result of the provided size, based on your device's screen width.
import { scale } from "@kietpt2003/react-native-core-ui/utils";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
padding: scale(5),
},
});Will return a linear scaled result of the provided size, based on your device's screen height.
import { scaleH } from "@kietpt2003/react-native-core-ui/utils";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
position: "absolute",
top: scaleH(5),
},
});Sometimes you don't want to scale everything in a linear manner, that's where moderateScale comes in.
The cool thing about it is that you can control the resize factor (default is 0.5).
If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:
➡️ scale(10) = 20
➡️ moderateScale(10) = 15
➡️ moderateScale(10, 0.1) = 11
import { moderateScale } from "@kietpt2003/react-native-core-ui/utils";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
padding: moderateScale(5),
},
});Same as moderateScale, but using scaleH instead of scale.
import { moderateHeightScale } from "@kietpt2003/react-native-core-ui/utils";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
padding: moderateHeightScale(5),
},
});Will return a linear scaled result of the provided size, based on PixelRatio & scaleAvg. You can use fontSize from /theme instead of using scalefont().
import { scaleFont } from "@kietpt2003/react-native-core-ui/utils";
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
text: {
fontSize: scaleFont(16), // fontSize._16
},
});Just a constants that specify iPhone 12 width.
import { IPHONE_12_WIDTH } from "@kietpt2003/react-native-core-ui/utils";
console.log(IPHONE_12_WIDTH); // 375Just a constants that specify iPhone 12 height.
import { IPHONE_12_HEIGTH } from "@kietpt2003/react-native-core-ui/utils";
console.log(IPHONE_12_HEIGTH); // 812Get the top padding based on the device type
- 26 OPPO
- 28 NOKIA
import { getPaddingTop } from "@kietpt2003/react-native-core-ui/utils";
const paddingTop = getPaddingTop();
console.log("paddingTop:", paddingTop);Get the bottom padding based on the device type
import { getPaddingBottom } from "@kietpt2003/react-native-core-ui/utils";
const paddingBottom = getPaddingBottom();
console.log("paddingBottom:", paddingBottom);Check if the device is a tablet
import { isTablet } from "@kietpt2003/react-native-core-ui/utils";
console.log("isTablet", isTablet); // true/falseUse this function to get the styles based on the device type
@param {Object} styles - StyleProp @param {ViewStyle} styles.tablet - Styles for tablet @param {ViewStyle} styles.phone - Styles for phone
| Prop | Type | Default | Description |
|---|---|---|---|
styles |
StyleProp<any> |
undefined |
Initiallize the styles for table and phone. Its contains 2 fields: tablet & phone. See example |
<View
style={StylePlatform({
tablet: styles.containerTablet,
phone: styles.containerPhone,
})}
>
<Text
style={StylePlatform({
tablet: styles.textTablet,
phone: styles.textPhone,
})}
>
Hello, Platform!
</Text>
</View>statusBarHeight of the device
import { statusBarHeight } from "@kietpt2003/react-native-core-ui/utils";
console.log("statusBarHeight", statusBarHeight);This function converts input into a string.
- If the input is null or undefined, it returns an empty string.
- If the input is an object, it returns a stringified version of the object.
- Otherwise, it returns the string representation of the input.
import { convertString } from "@kietpt2003/react-native-core-ui/utils";
const str = convertString(2003); // "2003"This function converts input into a number.
- If the input is null or undefined, it returns 0.
- If the input is not a number, it returns 0.
- Otherwise, it returns the parsed float value of the input.
import { convertNumber } from "@kietpt2003/react-native-core-ui/utils";
const num = convertNumber("2003"); // 2003This function convert seconds to a string in the format "mm:ss".
- If the input is less than 0, it returns "00:00".
- If the input is greater than 3599, it returns "00:00".
import { convertSeconds } from "@kietpt2003/react-native-core-ui/utils";
const time = convertSeconds(123); // "02:03"Function to format seconds into a string in the format "hh:mm:ss".
- If the input is less than 0, it returns "00:00:00".
- If the input is greater than 86399, it returns "00:00:00".
import { formatHour } from "@kietpt2003/react-native-core-ui/utils";
const time = formatHour(3661); // "01:01:01"Function to format a distance value.
- If the input is an integer, it returns the integer value.
- If the input is a float, it returns the value formatted to a custom toFixed value decimal places.
- If the input is null or undefined, it returns 0.
Note: The toFixed value should be between 1 and 5, otherwise it defaults to 2.
import { fixedDistance } from "@kietpt2003/react-native-core-ui/utils";
const distance = fixedDistance(123.456); // "123.46"
const distance2 = fixedDistance(123.4567, 3); // "123.457"Function to format money values.
| Prop | Type | Default | Description |
|---|---|---|---|
num |
number |
0 |
Define the value need to be format. |
maximumFractionDigits |
number |
0 |
Define the maximum fraction digits. See example |
lang |
string |
en-US |
Define the language. This should be a BCP 47 language tag (e.g., 'en-US', 'vi-VN'). View detail |
This is a string that contains a language code and an optional country code, separated by a hyphen.
Structure: "[languageCode]-[countryCode]"
Example: 'en-IN' => en: Language English, IN: Country India
Reference:
import { formatMoney } from "@kietpt2003/react-native-core-ui/utils";
const money = formatMoney(1234567.89); // "1,234,568"
const money2 = formatMoney(1234567.89, 2); // "1,234,567.89"
const money3 = formatMoney(1234567.89, 2, "vi-VN"); // "1.234.567,89"- Creates a debounced function that delays invoking the provided function until after a specified delay in milliseconds has elapsed since the last time the debounced function was invoked.
- The debounced function comes with
cancelandflushmethods to cancel the debounced invocation and to immediately invoke the function, respectively.
import { debounce } from "@kietpt2003/react-native-core-ui/utils";
const onChangeText = debounce(() => {
console.log("Function executed!");
}, 1000);
//Flush case
const debouncedLog = debounce(logMessage, 2000);
debouncedLog("Waiting 2s...");
setTimeout(() => {
debouncedLog.flush(); // Immediately execute the function
}, 1000);
//Cancel case
debouncedLog("Canceled");
setTimeout(() => {
debouncedLog.cancel(); // Don't execute the function
}, 1000);Provide a function to clean HTML tags and from a string.
import { cleanHTML } from "@kietpt2003/react-native-core-ui/utils";
const raw = `
<div>Hello World</div>
<p>This is a <strong>test</strong></p>
`;
console.log(cleanHTML(raw));
// Output:
// Hello
// World
// This is a testThank you so much already for checking my repos! If you want to go a step further and support my open source work, buy me a coffee:
