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