You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/src/content/docs/ui-and-theme/Forms.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,12 +20,12 @@ As we mention in the components section of the documentation [here](../component
20
20
21
21
Here is the complete code of our `ControlledInput` when we use `useController` hook from react-hook-form to handle form state and validation rules:
22
22
23
-
<CodeBlockfile="src/ui/input.tsx" />
23
+
<CodeBlockfile="src/components/ui/input.tsx" />
24
24
25
25
If you want to create your own controlled component, you just need to make sure your component props type extends from `InputControllerType` the same way we are using it with `ControlledInput`.
26
26
Here is another example of a Select input we create using the same approach as `ControlledInput`:
Copy file name to clipboardExpand all lines: docs/src/content/docs/ui-and-theme/components.mdx
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,7 +45,7 @@ To save time when creating new components or screens, we can simply start typing
45
45
46
46
The `List` component references the FlashList component from the `@shopify/flash-list` package.
47
47
48
-
<CodeBlockfile="src/ui/list.tsx" />
48
+
<CodeBlockfile="src/components/ui/list.tsx" />
49
49
50
50
**Props**
51
51
@@ -74,7 +74,7 @@ const MyComponent = () => {
74
74
For the `Image` component, we use the `expo-image` library to provide a fast and performant image component. The `Image` component is a wrapper around the `Image` component from `expo-image` package with additional styling provided by `nativewind`.
75
75
The `cssInterop` function from `nativewind` is used to apply styling and, in this way, the `className` property is applied to the `style` property of the `Image` component.
76
76
77
-
<CodeBlockfile="src/ui/image.tsx" />
77
+
<CodeBlockfile="src/components/ui/image.tsx" />
78
78
79
79
**Props**
80
80
@@ -102,7 +102,7 @@ const MyComponent = () => {
102
102
103
103
With this custom Text component, you can use the translation key as the `tx` prop, and it will automatically translate the text based on the current locale, as well as support right-to-left (RTL) languages based on the selected locale.
104
104
105
-
<CodeBlockfile="src/ui/text.tsx" />
105
+
<CodeBlockfile="src/components/ui/text.tsx" />
106
106
107
107
:::tip
108
108
You can also use the `t` snippet to create a simple Text with a default `className`.
@@ -140,7 +140,7 @@ The `tv` function from `tailwind-variants` is used to create a function that gen
140
140
141
141
Each variant should include styles for the `container`, `indicator`, and `label` keys. The `container` style is for the `Pressable`, the `label` style is for the `Text` component, and the `indicator` style is for the `ActivityIndicator` component when the `loading` prop is `true`.
142
142
143
-
<CodeBlockfile="src/ui/button.tsx" />
143
+
<CodeBlockfile="src/components/ui/button.tsx" />
144
144
145
145
**Props**
146
146
@@ -166,7 +166,7 @@ The component utilizes the tv function from Tailwind Variants to define styling
166
166
167
167
We tried to keep the ` Input` component as simple as possible, but you can add more functionality, such as `onFocus` and `onBlur`, or adding left and right icons to the input.
168
168
169
-
<CodeBlockfile="src/ui/input.tsx" />
169
+
<CodeBlockfile="src/components/ui/input.tsx" />
170
170
171
171
**Props**
172
172
@@ -200,7 +200,7 @@ We opt to use a bottom sheet instead of a modal to make it more flexible and eas
200
200
201
201
Based on your needs, you can use the `Modal` if you don't have a fixed height for the modal content.
202
202
203
-
<CodeBlockfile="src/ui/modal.tsx" />
203
+
<CodeBlockfile="src/components/ui/modal.tsx" />
204
204
205
205
**Props**
206
206
@@ -237,7 +237,7 @@ The component uses the `tv` function from Tailwind Variants to define styling sl
237
237
238
238
Feel free to update the component implementation to fit your need and as you keep the same Props signature for the `Select` component the component will work with our form handling solution without any changes.
239
239
240
-
<CodeBlockfile="src/ui/select.tsx" />
240
+
<CodeBlockfile="src/components/ui/select.tsx" />
241
241
242
242
**Props**
243
243
@@ -295,7 +295,7 @@ For handling common functionality like handling press events and accessibility s
295
295
296
296
Animations are applied to the icons using the `MotiView` component from the `moti` library. These animations change the appearance of the icons based on their checked state.
0 commit comments