Automatically detect React Native platform and rewrite API URLs for local development
npm install react-native-dev-proxy


> Automatically detect React Native platform and rewrite API URLs for local development
When developing React Native apps, you often face this frustrating issue:
``javascript`
// โ This works in iOS Simulator but fails on Android device
const response = await fetch('http://localhost:8000/api/users');
// Error: Network request failed
Why does this happen?
- iOS Simulator can access localhost directly10.0.2.2
- Android Emulator needs instead of localhost
- Physical devices need your computer's actual IP address
- Different platforms require different URL configurations
react-native-dev-proxy automatically handles URL rewriting for you:
`javascript
// โ
This works everywhere - iOS, Android, simulators, and devices
import { withDevProxy } from 'react-native-dev-proxy';
import axios from 'axios';
const api = withDevProxy(axios.create({
baseURL: 'http://localhost:8000',
}), { strategy: 'auto' });
const users = await api.get('/api/users'); // Works everywhere!
`
`bash`
npm install react-native-dev-proxyor
yarn add react-native-dev-proxy
`bash`
npx rn-dev-proxy patch
!Apply Patch GIF
Running the patch command to configure your React Native project
`javascript
import { withDevProxy } from 'react-native-dev-proxy';
import axios from 'axios';
const api = withDevProxy(
axios.create({
baseURL: 'http://localhost:8000',
timeout: 10000,
}),
{
strategy: 'auto', // Automatically choose the best method
log: true, // Show URL rewriting logs
}
);
// Now your API calls work everywhere!
const users = await api.get('/api/users');
`
!Code Integration GIF
See how easy it is to integrate with your existing code
| Platform | Original URL | Rewritten URL | Status |
|----------|-------------|---------------|---------|
| iOS Simulator | localhost:8000 | localhost:8000 | โ
Works |localhost:8000
| Android Emulator | | 10.0.2.2:8000 | โ
Works |localhost:8000
| Physical iOS Device | | 192.168.1.100:8000 | โ
Works |localhost:8000
| Physical Android Device | | 192.168.1.100:8000 | โ
Works |
!Platform Support GIF
See how the proxy automatically adapts to different platforms
!iOS Simulator
iOS Simulator working with localhost
!Android Emulator
Android Emulator working with 10.0.2.2
!Physical Device
Physical device working with IP address
Wraps your API client with automatic URL rewriting.
Parameters:
- apiClient: Your API client (axios, fetch, etc.)
- options: Configuration object
Options:
``javascript`
{
strategy: 'auto' | 'lan' | 'tunnel', // URL rewriting strategy
log: boolean, // Enable logging
baseURL: string, // Base URL to rewrite
}
Creates a fetch wrapper with automatic URL rewriting.
Parameters:
- options: Configuration object (same as above)
`javascript
import { withDevProxy } from 'react-native-dev-proxy';
import axios from 'axios';
const api = withDevProxy(
axios.create({
baseURL: 'http://localhost:8000',
timeout: 10000,
}),
{ strategy: 'auto', log: true }
);
// All these work automatically on any platform
const users = await api.get('/api/users');
const user = await api.post('/api/users', { name: 'John' });
const updated = await api.put('/api/users/1', { name: 'Jane' });
const deleted = await api.delete('/api/users/1');
`
`javascript
import { makeFetch } from 'react-native-dev-proxy';
const fetchApi = makeFetch({
baseURL: 'http://localhost:8000',
strategy: 'auto',
log: true,
});
// Works everywhere
const response = await fetchApi('/api/users');
const data = await response.json();
`
`javascript
import { useState, useEffect } from 'react';
import { withDevProxy } from 'react-native-dev-proxy';
import axios from 'axios';
const api = withDevProxy(
axios.create({ baseURL: 'http://localhost:8000' }),
{ strategy: 'auto', log: true }
);
const useUsers = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await api.get('/api/users');
setUsers(response.data);
} catch (error) {
console.error('Failed to fetch users:', error);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
return { users, loading };
};
`
(recommended): Automatically detects the best method: Always uses your computer's IP address: Uses tunneling service (ngrok, etc.)javascript
// Enable detailed logging
const api = withDevProxy(axios, {
strategy: 'auto',
log: true
});// Console output:
// ๐ง [DevProxy] Detected platform: android
// ๐ง [DevProxy] Using strategy: lan
// ๐ง [DevProxy] Rewriting URL: http://localhost:8000/api/users
// ๐ง [DevProxy] To: http://192.168.1.100:8000/api/users
// ๐ก [DevProxy] Request successful: 200 OK
`๐งช Testing Your Setup
Create a simple test component:
`javascript
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { withDevProxy } from 'react-native-dev-proxy';
import axios from 'axios';const api = withDevProxy(
axios.create({ baseURL: 'http://localhost:8000' }),
{ strategy: 'auto', log: true }
);
const TestComponent = () => {
const [result, setResult] = useState('');
const testAPI = async () => {
try {
const response = await api.get('/api/ping');
setResult(
โ
Success: ${JSON.stringify(response.data)});
} catch (error) {
setResult(โ Error: ${error.message});
}
}; return (
Test API
{result}
);
};
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
button: { backgroundColor: '#007AFF', padding: 15, borderRadius: 8 },
buttonText: { color: 'white', fontWeight: 'bold' },
result: { marginTop: 20, textAlign: 'center' },
});
export default TestComponent;
`!Testing Setup GIF
Watch the test component in action across different platforms
๐ง Advanced Configuration
$3
`javascript
const api = withDevProxy(axios, {
baseURL: 'http://localhost:3000', // Your custom server
strategy: 'auto',
log: true,
});
`$3
`javascript
const isDevelopment = __DEV__;
const baseURL = isDevelopment
? 'http://localhost:8000'
: 'https://api.yourapp.com';const api = withDevProxy(axios.create({ baseURL }), {
strategy: isDevelopment ? 'auto' : 'lan',
log: isDevelopment,
});
`๐ Troubleshooting
$3
1. "Network request failed" error:
- Ensure your server is running on the correct port
- Check that
adb reverse is set up for Android
- Verify your computer and device are on the same network2. URLs not being rewritten:
- Make sure you're using the wrapped API client
- Check that the patch was applied correctly
- Verify the baseURL matches your server
3. iOS Simulator issues:
- Try using
127.0.0.1 instead of localhost
- Check your server's CORS settings$3
1. Enable logging:
`javascript
const api = withDevProxy(axios, { log: true });
`2. Check console output:
`
๐ง [DevProxy] Detected platform: android
๐ง [DevProxy] Using strategy: lan
๐ง [DevProxy] Rewriting URL: http://localhost:8000/api/users
`3. Test with curl:
`bash
curl http://localhost:8000/api/users
``!Troubleshooting GIF
See how to debug and fix common issues
!Console Logs
Detailed console logging showing URL rewriting
!Patch Output
Patch command successfully configuring your project
!Code Editor
Easy integration in your code editor
!Network Diagram
Visual representation of how the proxy works
!Error Handling
Comprehensive error handling and debugging
Check out our examples repository for:
- Complete React Native app examples
- Different API client integrations
- Testing setups
- Production configurations
We welcome contributions! Please see our Contributing Guide for details.
MIT License - see LICENSE file for details.
- React Native community for the amazing platform
- Contributors who helped make this package better
- All the developers who faced this problem before us
- ๐ Documentation
- ๐ Issues
- ๐ฌ Discussions
- ๐ง Email Support
---
Made with โค๏ธ for the React Native community