README.md
1# expo-dev-client-components
2
3A package for sharing React Native components between different dev-client RN apps
4
5## API documentation
6
7```tsx
8import { View, Spacer, Row, useExpoTheme, ChevronRightICon } from 'expo-dev-client-components';
9
10function ExampleRow() {
11 const theme = useExpoTheme();
12
13 return (
14 <View px="small" py="large">
15 <Row align="center">
16 <ChevronRightIcon />
17 <Spacer.Horizontal size="tiny" />
18 <Text size="large" style={{ color: theme.text.default }}>
19 Enter URL manually
20 </Text>
21 </Row>
22 </View>
23 );
24}
25```
26
27### Documentation
28
29`create-primitive` is a utility that generates a set of themed react-native components.
30
31Features:
32
33- theme-ability
34- typesafety
35- clear and flexible API
36
37## API
38
39```tsx
40import { Text } from 'react-native';
41import { create } from './create-primitives';
42
43const Heading = create(Text, {
44 base: {
45 fontFamily: 'Helvetica',
46 },
47
48 variants: {
49 size: {
50 large: {
51 fontSize: 28,
52 lineHeight: 34,
53 },
54 medium: {
55 fontSize: 22,
56 lineHeight: 28,
57 },
58 small: {
59 fontSize: 18,
60 lineHeight: 22,
61 },
62 },
63 color: {
64 success: {
65 color: 'green',
66 },
67 danger: {
68 color: 'red',
69 },
70 },
71 },
72});
73```
74
75This above produces a `Heading` component that can be used like so:
76
77```tsx
78function App() {
79 return (
80 <Heading size="medium" color="success">
81 Hi
82 </Heading>
83 );
84}
85```
86
87All of the variants are captured by typescript which makes using them a breeze.
88
89## Declarative Selectors
90
91We can extend the `Heading` component above with selectors:
92
93```tsx
94const Heading = create(RNText, {
95 variants: {
96 // ....
97 },
98 selectors: {
99 // when device theme is 'light'...
100 light: {
101 color: {
102 // ...any `Heading` with `color="success"`...
103 success: {
104 // ...will have these styles applied
105 color: 'green',
106 },
107 },
108 },
109 },
110});
111```
112
113You can also pass selectors to primitives for one-off instances where you need a specific style:
114
115```tsx
116function App() {
117 return (
118 <View>
119 <Heading
120 selectors={{
121 dark: { color: 'green' },
122 light: { color: 'blue' },
123 }}>
124 Hi
125 </Heading>
126 </View>
127 );
128}
129```
130
131## Flexibility
132
133You can use any style library you'd like - for example using tailwind for a terser, readable configuration.
134
135```tsx
136import tw from 'somewhere';
137import { create } from './create-primitives';
138
139const Heading = create(RNText, {
140 size: {
141 large: tw('text-4xl'),
142 medium: tw('text-3xl'),
143 small: tw('text-2xl'),
144 },
145 weight: {
146 normal: tw('font-medium'),
147 heavy: tw('font-semibold'),
148 },
149 color: {
150 success: tw('text-green-500'),
151 danger: tw('text-red-500'),
152 },
153});
154```
155
156## Installation in managed Expo projects
157
158There are no native dependencies exported and so this module should be compatible with any RN project
159
160## Installation in bare React Native projects
161
162There are no native dependencies exported and so this module should be compatible with any RN project
163
164## Contributing
165
166Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
167