diff --git a/README.md b/README.md
index 3bd1a68..759a5f4 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
# @thoughtbot/react-native-social-auth
+[](https://www.npmjs.com/package/@thoughtbot/react-native-social-auth)
+[](https://www.npmjs.com/package/@thoughtbot/react-native-social-auth)
+[](https://github.com/thoughtbot/react-native-social-auth/blob/main/LICENSE)
+
**Modern Google Sign-In for React Native.** A typed, cross-platform `signIn()` API backed by Android's **Credential Manager** and the **GoogleSignIn-iOS SDK**, plus a branding-compliant `` component and a first-party **Expo config plugin**. TypeScript-first, ships as a **Turbo Module** for the new architecture, and works in both bare React Native CLI projects and Expo dev-client / EAS Build.
**Platform support:** ✅ Android · ✅ iOS · ✅ Expo (dev-client / EAS Build)
@@ -22,17 +26,21 @@
- React Native `>=0.74` with the new architecture enabled
- Android `minSdkVersion` 24
- A Google Cloud project with OAuth 2.0 credentials (see [setup](#google-cloud-console-setup))
-- [`react-native-svg`](https://github.com/software-mansion/react-native-svg) `>=13.0.0` (peer dependency — used to render the Google "G" logo)
+- [`react-native-svg`](https://github.com/software-mansion/react-native-svg) `>=13.0.0` — **optional** peer dependency, only required if you use [``](#googlesigninbutton-) (it renders the Google "G" logo)
## Installation
```sh
-yarn add @thoughtbot/react-native-social-auth react-native-svg
+yarn add @thoughtbot/react-native-social-auth
# or
-npm install @thoughtbot/react-native-social-auth react-native-svg
+npm install @thoughtbot/react-native-social-auth
```
-> `react-native-svg` is a peer dependency. If it's not already in your app, install it explicitly — otherwise you'll see runtime errors like `Tried to register two views with the same name RNSVGRect`.
+> If you use the pre-built [``](#googlesigninbutton-) component, also install `react-native-svg` and import the button from the `/google-button` subpath (see below). The core `GoogleSignIn` API has no SVG dependency.
+>
+> ```sh
+> yarn add react-native-svg
+> ```
After installing, rebuild the native app:
@@ -153,7 +161,9 @@ This package ships an Expo config plugin so you don't have to hand-edit `Info.pl
### Install
```sh
-npx expo install @thoughtbot/react-native-social-auth react-native-svg
+npx expo install @thoughtbot/react-native-social-auth
+# add react-native-svg too if you use :
+npx expo install react-native-svg
```
### Add the plugin
@@ -200,10 +210,10 @@ You still call `GoogleSignIn.configure({ webClientId, iosClientId })` from JS at
import { useState } from 'react';
import {
GoogleSignIn,
- GoogleSignInButton,
isGoogleSignInError,
type GoogleUser,
} from '@thoughtbot/react-native-social-auth';
+import { GoogleSignInButton } from '@thoughtbot/react-native-social-auth/google-button';
GoogleSignIn.configure({
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
@@ -230,7 +240,7 @@ export function SignInScreen() {
## API reference
-All members are named exports from `@thoughtbot/react-native-social-auth`.
+All members are named exports from `@thoughtbot/react-native-social-auth`, except [``](#googlesigninbutton-), which is exported from the `@thoughtbot/react-native-social-auth/google-button` subpath.
### `GoogleSignIn`
@@ -302,6 +312,12 @@ See [`signIn`](#signin-promisegoogleauthcredential) above.
A pre-built button that conforms to the [official Google branding guidelines](https://developers.google.com/identity/branding-guidelines). The button renders the Google "G" via `react-native-svg`, so it stays crisp at any density without bundling raster assets.
+Because of that, it's exported from a dedicated subpath and `react-native-svg` must be installed to use it:
+
+```tsx
+import { GoogleSignInButton } from '@thoughtbot/react-native-social-auth/google-button';
+```
+
| Prop | Type | Default | Description |
| ---------- | ------------------------------------------ | ------------ | -------------------------------------------------------------------- |
| `theme` | `'light' \| 'dark' \| 'neutral'` | `'light'` | Visual theme. Picks the right background, border, and text color. |
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 4babf8c..6aee31f 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -9,11 +9,11 @@ import {
} from 'react-native';
import {
GoogleSignIn,
- GoogleSignInButton,
isGoogleSignInError,
GoogleSignInErrorCode,
type GoogleUser,
} from '@thoughtbot/react-native-social-auth';
+import { GoogleSignInButton } from '@thoughtbot/react-native-social-auth/google-button';
const WEB_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID ?? '';
const IOS_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID;
diff --git a/package.json b/package.json
index 41251a0..aab61d8 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,11 @@
"types": "./lib/typescript/src/index.d.ts",
"default": "./lib/module/index.js"
},
+ "./google-button": {
+ "source": "./src/google-button.tsx",
+ "types": "./lib/typescript/src/google-button.d.ts",
+ "default": "./lib/module/google-button.js"
+ },
"./package.json": "./package.json",
"./app.plugin.js": "./app.plugin.js"
},
@@ -123,6 +128,9 @@
"peerDependenciesMeta": {
"@expo/config-plugins": {
"optional": true
+ },
+ "react-native-svg": {
+ "optional": true
}
},
"workspaces": [
diff --git a/src/google-button.tsx b/src/google-button.tsx
new file mode 100644
index 0000000..97eeeae
--- /dev/null
+++ b/src/google-button.tsx
@@ -0,0 +1,8 @@
+export { GoogleSignInButton } from './google/GoogleSignInButton';
+export type {
+ GoogleSignInButtonProps,
+ GoogleSignInButtonTheme,
+ GoogleSignInButtonShape,
+ GoogleSignInButtonText,
+ GoogleSignInButtonSize,
+} from './google/GoogleSignInButton';
diff --git a/src/google/index.ts b/src/google/index.ts
index 63fee7d..d2dc48b 100644
--- a/src/google/index.ts
+++ b/src/google/index.ts
@@ -4,14 +4,6 @@ export {
GoogleSignInErrorCode,
isGoogleSignInError,
} from './errors';
-export { GoogleSignInButton } from './GoogleSignInButton';
-export type {
- GoogleSignInButtonProps,
- GoogleSignInButtonTheme,
- GoogleSignInButtonShape,
- GoogleSignInButtonText,
- GoogleSignInButtonSize,
-} from './GoogleSignInButton';
export type {
GoogleSignInConfig,
GoogleUser,
diff --git a/src/index.tsx b/src/index.tsx
index 4394ed0..6e1f73a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,11 @@
export {
GoogleSignIn,
- GoogleSignInButton,
GoogleSignInError,
GoogleSignInErrorCode,
isGoogleSignInError,
} from './google';
export type {
- GoogleSignInButtonProps,
- GoogleSignInButtonTheme,
- GoogleSignInButtonShape,
- GoogleSignInButtonText,
- GoogleSignInButtonSize,
GoogleSignInConfig,
GoogleUser,
GoogleAuthCredential,
diff --git a/tsconfig.json b/tsconfig.json
index a7c3aee..e16e246 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,10 @@
"compilerOptions": {
"rootDir": ".",
"paths": {
- "@thoughtbot/react-native-social-auth": ["./src/index"]
+ "@thoughtbot/react-native-social-auth": ["./src/index"],
+ "@thoughtbot/react-native-social-auth/google-button": [
+ "./src/google-button"
+ ]
},
"allowUnreachableCode": false,
"allowUnusedLabels": false,
diff --git a/yarn.lock b/yarn.lock
index 01aca70..9700e06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4624,6 +4624,8 @@ __metadata:
peerDependenciesMeta:
"@expo/config-plugins":
optional: true
+ react-native-svg:
+ optional: true
languageName: unknown
linkType: soft