Skip to content
This repository was archived by the owner on Apr 26, 2026. It is now read-only.

Commit 5c00b99

Browse files
hyochanhyochan
committed
docs: fix wrong usage of hook in troubleshooting
Resolve #3037
1 parent 4ad0eb2 commit 5c00b99

4 files changed

Lines changed: 114 additions & 124 deletions

File tree

‎docs/docs/guides/troubleshooting.md‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -84,50 +84,46 @@ For Android, your app must be uploaded to Play Console:
8484

8585
### `useIAP` hook not working
8686

87-
#### 1. Missing provider setup
87+
#### 1. Hook initialization
8888

89-
Ensure you're using the hook within the provider context:
89+
The `useIAP` hook is a standalone hook that manages its own state and doesn't require a provider:
9090

9191
```tsx
92-
// ❌ Wrong: Hook used outside provider
93-
function App() {
94-
const {connected} = useIAP(); // This will fail
95-
return <MyApp />;
96-
}
92+
// ✅ Correct: Direct usage without provider
93+
import {useIAP} from 'react-native-iap';
9794

98-
// ✅ Correct: Hook used within provider
99-
import {IAPProvider} from 'react-native-iap';
95+
function App() {
96+
const {connected, products, fetchProducts} = useIAP();
10097

101-
function AppWithProvider() {
102-
return (
103-
<IAPProvider>
104-
<App />
105-
</IAPProvider>
106-
);
107-
}
98+
useEffect(() => {
99+
if (connected) {
100+
// Connection established, you can now fetch products
101+
fetchProducts({skus: ['product1', 'product2']});
102+
}
103+
}, [connected]);
108104

109-
function App() {
110-
const {connected} = useIAP(); // This works
111105
return <MyApp />;
112106
}
113107
```
114108

115-
#### 2. Multiple providers
109+
#### 2. Connection not established
116110

117-
Don't wrap your app with multiple IAP providers:
111+
The hook automatically initializes the connection when mounted. Check the `connected` state before making IAP calls:
118112

119113
```tsx
120-
// ❌ Wrong: Multiple providers
121-
<IAPProvider>
122-
<IAPProvider>
123-
<App />
124-
</IAPProvider>
125-
</IAPProvider>
126-
127-
// ✅ Correct: Single provider
128-
<IAPProvider>
129-
<App />
130-
</IAPProvider>
114+
const {connected, products, fetchProducts} = useIAP();
115+
116+
// ❌ Wrong: Calling methods before connection
117+
useEffect(() => {
118+
fetchProducts({skus: ['product1']}); // May fail if not connected
119+
}, []);
120+
121+
// ✅ Correct: Wait for connection
122+
useEffect(() => {
123+
if (connected) {
124+
fetchProducts({skus: ['product1']});
125+
}
126+
}, [connected]);
131127
```
132128

133129
### Purchase flow issues

‎docs/versioned_docs/version-14.1/guides/troubleshooting.md‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -84,50 +84,48 @@ For Android, your app must be uploaded to Play Console:
8484

8585
### `useIAP` hook not working
8686

87-
#### 1. Missing provider setup
87+
#### 1. Hook is standalone - no provider needed
8888

89-
Ensure you're using the hook within the provider context:
89+
The `useIAP` hook is standalone and manages its own state internally. You don't need any provider setup:
9090

9191
```tsx
92-
// ❌ Wrong: Hook used outside provider
93-
function App() {
94-
const {connected} = useIAP(); // This will fail
95-
return <MyApp />;
96-
}
92+
// ✅ Correct: Direct usage - no provider needed
93+
import {useIAP} from 'react-native-iap';
9794

98-
// ✅ Correct: Hook used within provider
99-
import {IAPProvider} from 'react-native-iap';
95+
function App() {
96+
const {connected, fetchProducts, products} = useIAP();
10097

101-
function AppWithProvider() {
102-
return (
103-
<IAPProvider>
104-
<App />
105-
</IAPProvider>
106-
);
107-
}
98+
useEffect(() => {
99+
if (connected) {
100+
fetchProducts({skus: ['com.example.product'], type: 'in-app'});
101+
}
102+
}, [connected]);
108103

109-
function App() {
110-
const {connected} = useIAP(); // This works
111104
return <MyApp />;
112105
}
113106
```
114107

115-
#### 2. Multiple providers
108+
The hook automatically:
109+
- Initializes the connection to the store
110+
- Sets up event listeners for purchases and errors
111+
- Manages internal state for products, subscriptions, and purchases
112+
- Handles cleanup when the component unmounts
116113

117-
Don't wrap your app with multiple IAP providers:
114+
#### 2. Using callbacks with useIAP
115+
116+
You can pass callback options to handle purchase events:
118117

119118
```tsx
120-
// ❌ Wrong: Multiple providers
121-
<IAPProvider>
122-
<IAPProvider>
123-
<App />
124-
</IAPProvider>
125-
</IAPProvider>
126-
127-
// ✅ Correct: Single provider
128-
<IAPProvider>
129-
<App />
130-
</IAPProvider>
119+
const {connected, requestPurchase} = useIAP({
120+
onPurchaseSuccess: (purchase) => {
121+
console.log('Purchase successful:', purchase);
122+
// Handle successful purchase
123+
},
124+
onPurchaseError: (error) => {
125+
console.error('Purchase failed:', error);
126+
// Handle purchase error
127+
},
128+
});
131129
```
132130

133131
### Purchase flow issues

‎docs/versioned_docs/version-14.2/guides/troubleshooting.md‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -111,50 +111,48 @@ For Android, your app must be uploaded to Play Console:
111111

112112
### `useIAP` hook not working
113113

114-
#### 1. Missing provider setup
114+
#### 1. Hook is standalone - no provider needed
115115

116-
Ensure you're using the hook within the provider context:
116+
The `useIAP` hook is standalone and manages its own state internally. You don't need any provider setup:
117117

118118
```tsx
119-
// ❌ Wrong: Hook used outside provider
120-
function App() {
121-
const {connected} = useIAP(); // This will fail
122-
return <MyApp />;
123-
}
119+
// ✅ Correct: Direct usage - no provider needed
120+
import {useIAP} from 'react-native-iap';
124121

125-
// ✅ Correct: Hook used within provider
126-
import {IAPProvider} from 'react-native-iap';
122+
function App() {
123+
const {connected, fetchProducts, products} = useIAP();
127124

128-
function AppWithProvider() {
129-
return (
130-
<IAPProvider>
131-
<App />
132-
</IAPProvider>
133-
);
134-
}
125+
useEffect(() => {
126+
if (connected) {
127+
fetchProducts({skus: ['com.example.product'], type: 'in-app'});
128+
}
129+
}, [connected]);
135130

136-
function App() {
137-
const {connected} = useIAP(); // This works
138131
return <MyApp />;
139132
}
140133
```
141134

142-
#### 2. Multiple providers
135+
The hook automatically:
136+
- Initializes the connection to the store
137+
- Sets up event listeners for purchases and errors
138+
- Manages internal state for products, subscriptions, and purchases
139+
- Handles cleanup when the component unmounts
143140

144-
Don't wrap your app with multiple IAP providers:
141+
#### 2. Using callbacks with useIAP
142+
143+
You can pass callback options to handle purchase events:
145144

146145
```tsx
147-
// ❌ Wrong: Multiple providers
148-
<IAPProvider>
149-
<IAPProvider>
150-
<App />
151-
</IAPProvider>
152-
</IAPProvider>
153-
154-
// ✅ Correct: Single provider
155-
<IAPProvider>
156-
<App />
157-
</IAPProvider>
146+
const {connected, requestPurchase} = useIAP({
147+
onPurchaseSuccess: (purchase) => {
148+
console.log('Purchase successful:', purchase);
149+
// Handle successful purchase
150+
},
151+
onPurchaseError: (error) => {
152+
console.error('Purchase failed:', error);
153+
// Handle purchase error
154+
},
155+
});
158156
```
159157

160158
### Purchase flow issues

‎docs/versioned_docs/version-14.3/guides/troubleshooting.md‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -111,50 +111,48 @@ For Android, your app must be uploaded to Play Console:
111111

112112
### `useIAP` hook not working
113113

114-
#### 1. Missing provider setup
114+
#### 1. Hook is standalone - no provider needed
115115

116-
Ensure you're using the hook within the provider context:
116+
The `useIAP` hook is standalone and manages its own state internally. You don't need any provider setup:
117117

118118
```tsx
119-
// ❌ Wrong: Hook used outside provider
120-
function App() {
121-
const {connected} = useIAP(); // This will fail
122-
return <MyApp />;
123-
}
119+
// ✅ Correct: Direct usage - no provider needed
120+
import {useIAP} from 'react-native-iap';
124121

125-
// ✅ Correct: Hook used within provider
126-
import {IAPProvider} from 'react-native-iap';
122+
function App() {
123+
const {connected, fetchProducts, products} = useIAP();
127124

128-
function AppWithProvider() {
129-
return (
130-
<IAPProvider>
131-
<App />
132-
</IAPProvider>
133-
);
134-
}
125+
useEffect(() => {
126+
if (connected) {
127+
fetchProducts({skus: ['com.example.product'], type: 'in-app'});
128+
}
129+
}, [connected]);
135130

136-
function App() {
137-
const {connected} = useIAP(); // This works
138131
return <MyApp />;
139132
}
140133
```
141134

142-
#### 2. Multiple providers
135+
The hook automatically:
136+
- Initializes the connection to the store
137+
- Sets up event listeners for purchases and errors
138+
- Manages internal state for products, subscriptions, and purchases
139+
- Handles cleanup when the component unmounts
143140

144-
Don't wrap your app with multiple IAP providers:
141+
#### 2. Using callbacks with useIAP
142+
143+
You can pass callback options to handle purchase events:
145144

146145
```tsx
147-
// ❌ Wrong: Multiple providers
148-
<IAPProvider>
149-
<IAPProvider>
150-
<App />
151-
</IAPProvider>
152-
</IAPProvider>
153-
154-
// ✅ Correct: Single provider
155-
<IAPProvider>
156-
<App />
157-
</IAPProvider>
146+
const {connected, requestPurchase} = useIAP({
147+
onPurchaseSuccess: (purchase) => {
148+
console.log('Purchase successful:', purchase);
149+
// Handle successful purchase
150+
},
151+
onPurchaseError: (error) => {
152+
console.error('Purchase failed:', error);
153+
// Handle purchase error
154+
},
155+
});
158156
```
159157

160158
### Purchase flow issues

0 commit comments

Comments
 (0)