Skip to content

Commit df6a8eb

Browse files
mgcreamgcrea
committed
feat(update): minor changes
1 parent 462f53a commit df6a8eb

File tree

1 file changed

+88
-33
lines changed

1 file changed

+88
-33
lines changed

‎README.md‎

Lines changed: 88 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Ideal for developers seeking native iOS aesthetics and behavior within a React N
4141

4242
## Features
4343

44-
- **Supported Components**: `Form`, `Section`, `TextField`, `Picker`, `DatePicker`, `Stepper`, `Button` (more in development).
44+
- **Supported Components**: We plan to support as many SwiftUI components as possible.
4545
- **Two-Way Data Binding**: Syncs state between JavaScript and SwiftUI (e.g., text input updates via `onChange`).
4646
- **Event Support**: Handles events like `change`, `focus`, `blur`, `press` across the JS-native boundary.
4747
- **Visual Feedback**: Disabled fields (e.g., `TextField` with `disabled={true}`) are grayed out and faded for clarity.
@@ -61,50 +61,105 @@ Ideal for developers seeking native iOS aesthetics and behavior within a React N
6161

6262
Installation steps:
6363

64-
```sh
65-
git clone https://github.com/mgcrea/react-native-swiftui.git
66-
cd react-native-swiftui
67-
corepack enable # Enable pnpm if not already installed
68-
pnpm install # Install root dependencies
69-
cd example
70-
pnpm install:ios # Install iOS dependencies (includes pod install)
71-
pnpm open:ios # Open Xcode to build and run the example app
64+
```bash
65+
npm install @mgcrea/react-native-swiftui --save
66+
# or
67+
pnpm add @mgcrea/react-native-swiftui
68+
# or
69+
yarn add @mgcrea/react-native-swiftui
7270
```
7371

7472
## Usage Example
7573

76-
### Example with react-hook-form
74+
### Basic Example
7775

7876
```tsx
79-
import React from "react";
80-
import { useForm, Controller } from "react-hook-form";
8177
import { SwiftUI } from "@mgcrea/react-native-swiftui";
82-
function App() {
83-
const { control, handleSubmit } = useForm({ defaultValues: { duration: "60" } });
84-
const onSubmit = (data) => {
85-
console.log("Submitted:", data);
86-
Alert.alert("Submitted", `Duration: ${data.duration}`);
78+
import { useState, type FunctionComponent } from "react";
79+
import { Alert, View } from "react-native";
80+
81+
export const BasicFormExample: FunctionComponent = () => {
82+
const [firstName, setFirstName] = useState("John");
83+
const [lastName, setLastName] = useState("Doe");
84+
const [birthDate, setBirthDate] = useState(new Date("2019-06-03T00:00:00Z"));
85+
const [gender, setGender] = useState<"Male" | "Female">("Male");
86+
87+
const handleSubmit = () => {
88+
const data = {
89+
firstName,
90+
lastName,
91+
birthDate,
92+
gender,
93+
};
94+
Alert.alert("Submitted", JSON.stringify(data, null, 2));
8795
};
96+
8897
return (
89-
<SwiftUI>
90-
<SwiftUI.Form>
91-
<SwiftUI.Section header="Workout Settings">
92-
<Controller
93-
control={control}
94-
name="duration"
95-
render={({ field: { value, onChange } }) => (
96-
<SwiftUI.TextField label="Duration:" text={value} onChange={onChange} disabled={false} />
97-
)}
98-
/>
99-
<SwiftUI.Button title="Submit" onPress={handleSubmit(onSubmit)} />
100-
</SwiftUI.Section>
101-
</SwiftUI.Form>
102-
</SwiftUI>
98+
<View style={{ flex: 1 }}>
99+
<SwiftUI style={{ flex: 1 }}>
100+
<SwiftUI.Text text="BasicFormExample" />
101+
<SwiftUI.Form>
102+
<SwiftUI.Section header="Personal Information">
103+
<SwiftUI.TextField placeholder="First name" onChange={setFirstName} text={firstName} />
104+
<SwiftUI.TextField placeholder="Last name" onChange={setLastName} text={lastName} />
105+
</SwiftUI.Section>
106+
<SwiftUI.Section header="Additional Details">
107+
<SwiftUI.Picker
108+
options={["Male", "Female"]}
109+
label="Gender"
110+
onChange={setGender}
111+
selection={gender}
112+
/>
113+
<SwiftUI.DatePicker
114+
label="Birth date"
115+
selection={birthDate}
116+
onChange={(value) => setBirthDate(value)}
117+
displayedComponents="date"
118+
/>
119+
</SwiftUI.Section>
120+
<SwiftUI.Button title="Submit" onPress={handleSubmit} />
121+
</SwiftUI.Form>
122+
</SwiftUI>
123+
</View>
103124
);
104-
}
105-
export default App;
125+
};
106126
```
107127

128+
## Supported Components
129+
130+
Below is a list of components currently supported by `@mgcrea/react-native-swiftui`. These components leverage SwiftUI's native iOS capabilities while being controlled via React Native's JSX syntax.
131+
132+
| Component | Description | Key Props | Notes |
133+
| ------------ | ------------------------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
134+
| `Button` | A clickable button with customizable styles | `title`, `buttonStyle`, `disabled`, `style`, `onPress` | Supports styles like `default`, `plain`, `bordered`, etc. |
135+
| `DatePicker` | A date/time selection picker | `selection`, `label`, `datePickerStyle`, `displayedComponents`, `onChange` | Options include `compact`, `wheel`, etc.; supports `date`, `hourAndMinute` components |
136+
| `Form` | A container for grouping form elements | Children (nested components) | No specific props; acts as a layout container |
137+
| `Group` | A logical grouping of views | Children (nested components) | No specific props; used for hierarchy organization |
138+
| `HStack` | Horizontal stack layout | `alignment`, `spacing`, `style`, Children | Alignments: `top`, `center`, `bottom`, etc. |
139+
| `Image` | Displays an image (named, system, or local) | `name`, `source`, `sourceUri`, `resizeMode`, `style` | Supports `system:` prefix for SF Symbols, asset names, and bundled assets via `require` |
140+
| `Picker` | A dropdown or segmented selection | `options`, `selection`, `label`, `pickerStyle`, `onChange` | Styles: `menu`, `segmented`, `wheel`, etc. |
141+
| `Rectangle` | A simple rectangular shape | `style` | Used for basic shapes with customizable styling |
142+
| `Section` | A collapsible section within a form | `header`, `footer`, `isCollapsed`, Children | Useful for organizing form content |
143+
| `Sheet` | A modal sheet presentation | `isPresented`, `detents`, `onDismiss`, Children | Detents: `medium`, `large`, or custom values |
144+
| `Slider` | A continuous value slider | `value`, `minimum`, `maximum`, `step`, `label`, `onChange` | Adjustable range with step increments |
145+
| `Spacer` | A flexible space filler | `minLength` | Expands to fill available space |
146+
| `Stepper` | An increment/decrement control | `value`, `label`, `minimum`, `maximum`, `step`, `onChange` | For numeric adjustments |
147+
| `Text` | Displays static text | `text`, `alignment`, `style` | Alignments: `leading`, `center`, `trailing` |
148+
| `TextField` | An editable text input | `text`, `label`, `placeholder`, `keyboardType`, `onChange` | Supports various keyboard types and text content types |
149+
| `Toggle` | A switch for boolean values | `isOn`, `label`, `onChange` | Simple on/off control |
150+
| `VStack` | Vertical stack layout | `alignment`, `spacing`, `style`, Children | Alignments: `leading`, `center`, `trailing` |
151+
| `ZStack` | Overlapping stack layout | `alignment`, `style`, Children | Alignments: `topLeading`, `center`, `bottomTrailing`, etc. |
152+
153+
### Notes
154+
155+
- **Props**: Most components accept a `style` prop for layout and appearance customization (e.g., `width`, `height`, `backgroundColor`).
156+
- **Events**: Components like `Button`, `TextField`, and `Picker` support event handlers (e.g., `onPress`, `onChange`) for interactivity.
157+
- **Children**: Layout components (`Form`, `HStack`, `VStack`, etc.) accept nested components as children.
158+
- **Image Sources**: The `Image` component supports:
159+
- Named assets from `Assets.xcassets` (e.g., `name="logo"`).
160+
- System images with a `system:` prefix (e.g., `name="system:star.fill"`).
161+
- Local bundled assets via `source={require('../path/to/image.png')}`.
162+
108163
## How It Works
109164

110165
1. **Component-Level Tree Building**: Each `SwiftUI.*` component (e.g., `<SwiftUI.TextField>`) registers itself with a `viewTree` during React’s render phase, using a context-based system.

0 commit comments

Comments
 (0)