@edge-base/react-native 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,230 @@
1
+ <h1 align="center">@edge-base/react-native</h1>
2
+
3
+ <p align="center">
4
+ <b>React Native SDK for EdgeBase</b><br>
5
+ Auth, database, realtime, rooms, storage, analytics, and push for iOS, Android, and React Native Web
6
+ </p>
7
+
8
+ <p align="center">
9
+ <a href="https://www.npmjs.com/package/@edge-base/react-native"><img src="https://img.shields.io/npm/v/%40edge-base%2Freact-native?color=brightgreen" alt="npm"></a>&nbsp;
10
+ <a href="https://edgebase.fun/docs/getting-started/quickstart"><img src="https://img.shields.io/badge/docs-mobile-blue" alt="Docs"></a>&nbsp;
11
+ <a href="https://github.com/edge-base/edgebase/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"></a>
12
+ </p>
13
+
14
+ <p align="center">
15
+ iOS · Android · React Native Web · Deep links · AppState lifecycle
16
+ </p>
17
+
18
+ <p align="center">
19
+ <a href="https://edgebase.fun/docs/getting-started/quickstart"><b>Quickstart</b></a> ·
20
+ <a href="https://edgebase.fun/docs/authentication"><b>Authentication</b></a> ·
21
+ <a href="https://edgebase.fun/docs/database/client-sdk"><b>Database Client SDK</b></a> ·
22
+ <a href="https://edgebase.fun/docs/room/client-sdk"><b>Room Client SDK</b></a> ·
23
+ <a href="https://edgebase.fun/docs/push/client-sdk"><b>Push Client SDK</b></a>
24
+ </p>
25
+
26
+ ---
27
+
28
+ `@edge-base/react-native` brings the EdgeBase client model to React Native environments.
29
+
30
+ It keeps the familiar browser SDK shape while adding the pieces mobile apps need:
31
+
32
+ - `AsyncStorage` token persistence
33
+ - deep-link based OAuth callbacks
34
+ - `AppState` lifecycle handling
35
+ - React Native friendly push registration
36
+ - Turnstile support through `react-native-webview`
37
+
38
+ If you are building a browser-only app, use [`@edge-base/web`](https://www.npmjs.com/package/@edge-base/web) instead.
39
+
40
+ > Beta: the package is already usable, but some APIs may still evolve before general availability.
41
+
42
+ ## Documentation Map
43
+
44
+ - [Quickstart](https://edgebase.fun/docs/getting-started/quickstart)
45
+ Project creation and local development
46
+ - [Authentication](https://edgebase.fun/docs/authentication)
47
+ Email/password, OAuth, MFA, sessions, captcha
48
+ - [Database Client SDK](https://edgebase.fun/docs/database/client-sdk)
49
+ Query and mutation patterns that also apply on React Native
50
+ - [Room Client SDK](https://edgebase.fun/docs/room/client-sdk)
51
+ Presence, signals, state, and media-ready room flows
52
+ - [Push Client SDK](https://edgebase.fun/docs/push/client-sdk)
53
+ General client push concepts
54
+
55
+ ## For AI Coding Assistants
56
+
57
+ This package ships with an `llms.txt` file for AI-assisted React Native integration.
58
+
59
+ You can find it:
60
+
61
+ - after install: `node_modules/@edge-base/react-native/llms.txt`
62
+ - in the repository: [llms.txt](https://github.com/edge-base/edgebase/blob/main/packages/sdk/react-native/llms.txt)
63
+
64
+ Use it when you want an agent to:
65
+
66
+ - set up `createClient()` with the right React Native adapters
67
+ - handle deep-link OAuth callbacks correctly
68
+ - wire push registration without guessing native token APIs
69
+ - avoid accidentally using browser-only assumptions like `localStorage`
70
+
71
+ ## Installation
72
+
73
+ ```bash
74
+ npm install @edge-base/react-native @react-native-async-storage/async-storage
75
+ ```
76
+
77
+ If you want Turnstile-based captcha, also install:
78
+
79
+ ```bash
80
+ npm install react-native-webview
81
+ ```
82
+
83
+ For iOS, remember to install pods:
84
+
85
+ ```bash
86
+ cd ios && pod install
87
+ ```
88
+
89
+ ## Quick Start
90
+
91
+ ```ts
92
+ import { createClient } from '@edge-base/react-native';
93
+ import AsyncStorage from '@react-native-async-storage/async-storage';
94
+ import { AppState, Linking } from 'react-native';
95
+
96
+ const client = createClient('https://your-project.edgebase.fun', {
97
+ storage: AsyncStorage,
98
+ linking: Linking,
99
+ appState: AppState,
100
+ });
101
+
102
+ await client.auth.signIn({
103
+ email: 'june@example.com',
104
+ password: 'pass1234',
105
+ });
106
+
107
+ const posts = await client
108
+ .db('app')
109
+ .table('posts')
110
+ .where('published', '==', true)
111
+ .getList();
112
+
113
+ console.log(posts.items);
114
+ ```
115
+
116
+ ## Core API
117
+
118
+ Once you create a client, these are the main surfaces you will use:
119
+
120
+ - `client.auth`
121
+ Mobile-friendly auth with deep-link OAuth support
122
+ - `client.db(namespace, id?)`
123
+ Query and mutate data
124
+ - `client.storage`
125
+ Upload files and resolve URLs
126
+ - `client.functions`
127
+ Call app functions
128
+ - `client.room(namespace, roomId, options?)`
129
+ Join realtime rooms
130
+ - `client.push`
131
+ Register device tokens and listen for app messages
132
+ - `client.analytics`
133
+ Track client analytics
134
+
135
+ ## OAuth With Deep Links
136
+
137
+ ```ts
138
+ client.auth.signInWithOAuth('google', {
139
+ redirectUrl: 'myapp://auth/callback',
140
+ });
141
+
142
+ Linking.addEventListener('url', async ({ url }) => {
143
+ const result = await client.auth.handleOAuthCallback(url);
144
+ if (result) {
145
+ console.log('OAuth success:', result.user);
146
+ }
147
+ });
148
+ ```
149
+
150
+ In React Native, the app is responsible for registering the deep link scheme in the platform configuration.
151
+
152
+ ## Turnstile Captcha
153
+
154
+ ```tsx
155
+ import { Button } from 'react-native';
156
+ import { WebView } from 'react-native-webview';
157
+ import { TurnstileWebView, useTurnstile } from '@edge-base/react-native';
158
+
159
+ function SignUpScreen() {
160
+ const captcha = useTurnstile({
161
+ baseUrl: 'https://your-project.edgebase.fun',
162
+ action: 'signup',
163
+ });
164
+
165
+ return (
166
+ <>
167
+ {captcha.siteKey && (
168
+ <TurnstileWebView
169
+ siteKey={captcha.siteKey}
170
+ action="signup"
171
+ WebViewComponent={WebView}
172
+ onToken={captcha.onToken}
173
+ onError={captcha.onError}
174
+ onInteractive={captcha.onInteractive}
175
+ />
176
+ )}
177
+ <Button
178
+ title="Sign Up"
179
+ onPress={() =>
180
+ void client.auth.signUp({
181
+ email: 'june@example.com',
182
+ password: 'pass1234',
183
+ captchaToken: captcha.token ?? undefined,
184
+ })
185
+ }
186
+ />
187
+ </>
188
+ );
189
+ }
190
+ ```
191
+
192
+ ## Push Notifications
193
+
194
+ ```ts
195
+ import messaging from '@react-native-firebase/messaging';
196
+
197
+ client.push.setTokenProvider(async () => ({
198
+ token: await messaging().getToken(),
199
+ platform: 'android',
200
+ }));
201
+
202
+ await client.push.register();
203
+
204
+ const unsubscribe = client.push.onMessage((message) => {
205
+ console.log(message.title, message.body);
206
+ });
207
+ ```
208
+
209
+ You bridge native push providers into the SDK. The SDK does not hard-depend on Firebase Messaging.
210
+
211
+ ## Lifecycle Management
212
+
213
+ When you pass `appState` to `createClient()`, the SDK automatically coordinates mobile lifecycle behavior:
214
+
215
+ - background/inactive: disconnect realtime transports to reduce battery and network use
216
+ - foreground: refresh auth state and reconnect realtime transports
217
+
218
+ ## Platform Differences vs `@edge-base/web`
219
+
220
+ | Feature | Web | React Native |
221
+ | --- | --- | --- |
222
+ | Token storage | `localStorage` | `AsyncStorage` |
223
+ | OAuth redirect | browser redirect | `Linking.openURL()` + deep-link callback |
224
+ | Lifecycle | document visibility | `AppState` |
225
+ | Captcha | DOM-based widget | `react-native-webview` |
226
+ | Push | web push | native token provider integration |
227
+
228
+ ## License
229
+
230
+ MIT