🚀 React Native Dev Proxy


> Automatically detect React Native platform and rewrite API URLs for local development

🎯 The Problem This Solves

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 directly
- Android Emulator needs 10.0.2.2 instead of localhost
- Physical devices need your computer's actual IP address
- Different platforms require different URL configurations

✨ The Solution

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!
`

🚀 Quick Start

$3

`bash
npm install react-native-dev-proxy


or


yarn add react-native-dev-proxy
`

$3

`bash
npx rn-dev-proxy patch
`

!Apply Patch GIF
Running the patch command to configure your React Native project

$3

`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 Support

| Platform | Original URL | Rewritten URL | Status |
|----------|-------------|---------------|---------|
| iOS Simulator | localhost:8000 | localhost:8000 | ✅ Works |
| Android Emulator | localhost:8000 | 10.0.2.2:8000 | ✅ Works |
| Physical iOS Device | localhost:8000 | 192.168.1.100:8000 | ✅ Works |
| Physical Android Device | localhost:8000 | 192.168.1.100:8000 | ✅ Works |

!Platform Support GIF
See how the proxy automatically adapts to different platforms

$3

!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

🛠️ API Reference

$3

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
}
`

$3

Creates a fetch wrapper with automatic URL rewriting.

Parameters:
- options: Configuration object (same as above)

🎯 Usage Examples

$3

`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');
`

$3

`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();
`

$3

`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 };
};
`

🔧 Configuration Options

$3


- auto (recommended): Automatically detects the best method
- lan: Always uses your computer's IP address
- tunnel: Uses tunneling service (ngrok, etc.)

$3

`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 network

2. 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

$3

!Console Logs
Detailed console logging showing URL rewriting

$3

!Patch Output
Patch command successfully configuring your project

$3

!Code Editor
Easy integration in your code editor

$3

!Network Diagram
Visual representation of how the proxy works

$3

!Error Handling
Comprehensive error handling and debugging

📚 Examples Repository

Check out our examples repository for:
- Complete React Native app examples
- Different API client integrations
- Testing setups
- Production configurations

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

- React Native community for the amazing platform
- Contributors who helped make this package better
- All the developers who faced this problem before us

📞 Support

- 📖 Documentation
- 🐛 Issues
- 💬 Discussions
- 📧 Email Support

---

Made with ❤️ for the React Native community