1---
2title: Import from Design System Folder
3impact: LOW
4impactDescription: enables global changes and easy refactoring
5tags: imports, architecture, design-system
6---
7 
8## Import from Design System Folder
9 
10Re-export dependencies from a design system folder. App code imports from there,
11not directly from packages. This enables global changes and easy refactoring.
12 
13**Incorrect (imports directly from package):**
14 
15```tsx
16import { View, Text } from 'react-native'
17import { Button } from '@ui/button'
18 
19function Profile() {
20  return (
21    <View>
22      <Text>Hello</Text>
23      <Button>Save</Button>
24    </View>
25  )
26}
27```
28 
29**Correct (imports from design system):**
30 
31```tsx
32// components/view.tsx
33import { View as RNView } from 'react-native'
34 
35// ideal: pick the props you will actually use to control implementation
36export function View(
37  props: Pick<React.ComponentProps<typeof RNView>, 'style' | 'children'>
38) {
39  return <RNView {...props} />
40}
41```
42 
43```tsx
44// components/text.tsx
45export { Text } from 'react-native'
46```
47 
48```tsx
49// components/button.tsx
50export { Button } from '@ui/button'
51```
52 
53```tsx
54import { View } from '@/components/view'
55import { Text } from '@/components/text'
56import { Button } from '@/components/button'
57 
58function Profile() {
59  return (
60    <View>
61      <Text>Hello</Text>
62      <Button>Save</Button>
63    </View>
64  )
65}
66```
67 
68Start by simply re-exporting. Customize later without changing app code.
69