Skip to content

Commit 797e126

Browse files
bsdaoquangbsdaoquang
committed
feat: add text component
1 parent 5c06071 commit 797e126

File tree

5 files changed

+180
-52
lines changed

5 files changed

+180
-52
lines changed

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-native-components-example",
2+
"name": "rncomponents-example",
33
"version": "0.0.1",
44
"private": true,
55
"scripts": {

‎example/src/App.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { View, Text } from 'react-native';
1+
import { View } from 'react-native';
22
import React from 'react';
3+
import Card from '../../src/components/Card';
4+
import Text from '../../src/components/Text';
35

46
const App = () => {
57
return (
68
<View>
7-
<Text>App</Text>
9+
<Card>
10+
<Text text="Hello world!!!" size={32} />
11+
</Card>
812
</View>
913
);
1014
};

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bsdaoquang/rncomponent",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "UI library for react native",
55
"main": "lib/commonjs/index",
66
"module": "lib/module/index",

‎src/components/Text.tsx

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import * as ReactNative from 'react-native';
2+
import React from 'react';
3+
import { type StyleProp, type TextStyle } from 'react-native';
4+
5+
interface Props {
6+
text: string;
7+
color?: string;
8+
size?: number;
9+
font?: string;
10+
weight?:
11+
| 'normal'
12+
| 'bold'
13+
| '100'
14+
| '200'
15+
| '300'
16+
| '400'
17+
| '500'
18+
| '600'
19+
| '700'
20+
| '800'
21+
| '900'
22+
| 100
23+
| 200
24+
| 300
25+
| 400
26+
| 500
27+
| 600
28+
| 700
29+
| 800
30+
| 900
31+
| 'ultralight'
32+
| 'thin'
33+
| 'light'
34+
| 'medium'
35+
| 'regular'
36+
| 'semibold'
37+
| 'condensedBold'
38+
| 'condensed'
39+
| 'heavy'
40+
| 'black'
41+
| undefined;
42+
lineHeight?: number;
43+
textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
44+
numberOfLine?: number;
45+
styles?: StyleProp<TextStyle>;
46+
transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
47+
textDecorationLine?:
48+
| 'none'
49+
| 'underline'
50+
| 'line-through'
51+
| 'underline line-through'
52+
| undefined;
53+
textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
54+
textDecorationColor?: ReactNative.ColorValue | undefined;
55+
textShadowColor?: ReactNative.ColorValue | undefined;
56+
textShadowOffset?: { width: number; height: number } | undefined;
57+
textShadowRadius?: number | undefined;
58+
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
59+
userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all' | undefined;
60+
letterSpacing?: number | undefined;
61+
}
62+
63+
const Text = (props: Props) => {
64+
const {
65+
text,
66+
color,
67+
size,
68+
font,
69+
weight,
70+
lineHeight,
71+
numberOfLine,
72+
styles,
73+
textAlign,
74+
transform,
75+
letterSpacing,
76+
textDecorationColor,
77+
textDecorationLine,
78+
textDecorationStyle,
79+
textShadowOffset,
80+
textShadowRadius,
81+
textShadowColor,
82+
userSelect,
83+
} = props;
84+
85+
return (
86+
<ReactNative.View>
87+
<ReactNative.Text
88+
numberOfLines={numberOfLine}
89+
style={[
90+
localStyles.text,
91+
{
92+
color: color ?? '#212121',
93+
fontSize: size ?? 14,
94+
fontFamily: font ?? undefined,
95+
fontWeight: weight ?? '400',
96+
textAlign: textAlign ?? 'left',
97+
lineHeight: lineHeight,
98+
textTransform: transform,
99+
letterSpacing,
100+
textDecorationColor,
101+
textDecorationLine,
102+
textDecorationStyle,
103+
textShadowOffset,
104+
textShadowRadius,
105+
textShadowColor,
106+
userSelect,
107+
},
108+
styles,
109+
]}
110+
>
111+
{text}
112+
</ReactNative.Text>
113+
</ReactNative.View>
114+
);
115+
};
116+
117+
export default Text;
118+
119+
const localStyles = ReactNative.StyleSheet.create({
120+
text: {
121+
fontSize: 14,
122+
color: '#212121',
123+
},
124+
});

‎yarn.lock

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1694,6 +1694,38 @@ __metadata:
16941694
languageName: node
16951695
linkType: hard
16961696

1697+
"@bsdaoquang/rncomponent@workspace:.":
1698+
version: 0.0.0-use.local
1699+
resolution: "@bsdaoquang/rncomponent@workspace:."
1700+
dependencies:
1701+
"@commitlint/config-conventional": ^17.0.2
1702+
"@evilmartians/lefthook": ^1.5.0
1703+
"@react-native-community/checkbox": ^0.5.17
1704+
"@react-native/eslint-config": ^0.73.1
1705+
"@release-it/conventional-changelog": ^5.0.0
1706+
"@types/jest": ^29.5.5
1707+
"@types/react": ^18.2.44
1708+
commitlint: ^17.0.2
1709+
del-cli: ^5.1.0
1710+
eslint: ^8.51.0
1711+
eslint-config-prettier: ^9.0.0
1712+
eslint-plugin-prettier: ^5.0.1
1713+
iconsax-react-native: ^0.0.8
1714+
jest: ^29.7.0
1715+
prettier: ^3.0.3
1716+
react: 18.2.0
1717+
react-native: 0.74.1
1718+
react-native-builder-bob: ^0.20.0
1719+
react-native-svg: ^15.3.0
1720+
release-it: ^15.0.0
1721+
turbo: ^1.10.7
1722+
typescript: ^5.2.2
1723+
peerDependencies:
1724+
react: "*"
1725+
react-native: "*"
1726+
languageName: unknown
1727+
linkType: soft
1728+
16971729
"@commitlint/cli@npm:^17.8.1":
16981730
version: 17.8.1
16991731
resolution: "@commitlint/cli@npm:17.8.1"
@@ -11007,54 +11039,6 @@ __metadata:
1100711039
languageName: node
1100811040
linkType: hard
1100911041

11010-
"react-native-components-example@workspace:example":
11011-
version: 0.0.0-use.local
11012-
resolution: "react-native-components-example@workspace:example"
11013-
dependencies:
11014-
"@babel/core": ^7.20.0
11015-
"@babel/preset-env": ^7.20.0
11016-
"@babel/runtime": ^7.20.0
11017-
"@react-native/babel-preset": 0.74.83
11018-
"@react-native/metro-config": 0.74.83
11019-
"@react-native/typescript-config": 0.74.83
11020-
babel-plugin-module-resolver: ^5.0.0
11021-
react: 18.2.0
11022-
react-native: 0.74.1
11023-
languageName: unknown
11024-
linkType: soft
11025-
11026-
"react-native-rncomponents@workspace:.":
11027-
version: 0.0.0-use.local
11028-
resolution: "react-native-rncomponents@workspace:."
11029-
dependencies:
11030-
"@commitlint/config-conventional": ^17.0.2
11031-
"@evilmartians/lefthook": ^1.5.0
11032-
"@react-native-community/checkbox": ^0.5.17
11033-
"@react-native/eslint-config": ^0.73.1
11034-
"@release-it/conventional-changelog": ^5.0.0
11035-
"@types/jest": ^29.5.5
11036-
"@types/react": ^18.2.44
11037-
commitlint: ^17.0.2
11038-
del-cli: ^5.1.0
11039-
eslint: ^8.51.0
11040-
eslint-config-prettier: ^9.0.0
11041-
eslint-plugin-prettier: ^5.0.1
11042-
iconsax-react-native: ^0.0.8
11043-
jest: ^29.7.0
11044-
prettier: ^3.0.3
11045-
react: 18.2.0
11046-
react-native: 0.74.1
11047-
react-native-builder-bob: ^0.20.0
11048-
react-native-svg: ^15.3.0
11049-
release-it: ^15.0.0
11050-
turbo: ^1.10.7
11051-
typescript: ^5.2.2
11052-
peerDependencies:
11053-
react: "*"
11054-
react-native: "*"
11055-
languageName: unknown
11056-
linkType: soft
11057-
1105811042
"react-native-svg@npm:^15.3.0":
1105911043
version: 15.3.0
1106011044
resolution: "react-native-svg@npm:15.3.0"
@@ -11641,6 +11625,22 @@ __metadata:
1164111625
languageName: node
1164211626
linkType: hard
1164311627

11628+
"rncomponents-example@workspace:example":
11629+
version: 0.0.0-use.local
11630+
resolution: "rncomponents-example@workspace:example"
11631+
dependencies:
11632+
"@babel/core": ^7.20.0
11633+
"@babel/preset-env": ^7.20.0
11634+
"@babel/runtime": ^7.20.0
11635+
"@react-native/babel-preset": 0.74.83
11636+
"@react-native/metro-config": 0.74.83
11637+
"@react-native/typescript-config": 0.74.83
11638+
babel-plugin-module-resolver: ^5.0.0
11639+
react: 18.2.0
11640+
react-native: 0.74.1
11641+
languageName: unknown
11642+
linkType: soft
11643+
1164411644
"run-applescript@npm:^5.0.0":
1164511645
version: 5.0.0
1164611646
resolution: "run-applescript@npm:5.0.0"

0 commit comments

Comments
 (0)