{"id":17338,"library":"react-native-http-bridge-refurbished","title":"React Native HTTP Bridge Refurbished","description":"The `react-native-http-bridge-refurbished` package provides a lightweight, in-app HTTP server designed for debugging React Native applications. It allows developers to expose an HTTP endpoint directly from their mobile app, facilitating interaction, data inspection, and remote control for development purposes. Currently stable at version `1.3.2`, the project sees sporadic but active maintenance, with recent updates addressing bug fixes and minor feature enhancements, such as improved URL parameter handling. As a 'refurbished' version of an earlier, potentially unmaintained library, its key differentiator is its continued support and compatibility with modern React Native versions (requiring `>=0.72`), offering a robust alternative for in-app web server functionalities.","status":"active","version":"1.2.9","language":"javascript","source_language":"en","source_url":"https://github.com/Alwinator/react-native-http-bridge-refurbished","tags":["javascript","react-component","react-native","nanohttpd","gcdhttpserver","http","server","bridge","webserver","typescript"],"install":[{"cmd":"npm install react-native-http-bridge-refurbished","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-http-bridge-refurbished","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-http-bridge-refurbished","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React Native application integration.","package":"react-native","optional":false}],"imports":[{"note":"This is a named export. CommonJS `require` is generally not recommended for modern React Native projects and may lead to issues with native module loading.","wrong":"const HttpBridge = require('react-native-http-bridge-refurbished');","symbol":"HttpBridge","correct":"import { HttpBridge } from 'react-native-http-bridge-refurbished';"},{"note":"Import the `HttpRequest` type for strong typing of incoming request objects in TypeScript projects. The object typically includes `requestId`, `url`, `method`, `headers`, and `body`.","symbol":"HttpRequest","correct":"import type { HttpRequest } from 'react-native-http-bridge-refurbished';"}],"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport { View, Text, Button, Alert, StyleSheet } from 'react-native';\nimport { HttpBridge, type HttpRequest } from 'react-native-http-bridge-refurbished';\n\nconst SERVER_PORT = 8080;\n\nconst App: React.FC = () => {\n  const [serverStatus, setServerStatus] = useState('Stopped');\n  const [lastRequest, setLastRequest] = useState<HttpRequest | null>(null);\n\n  useEffect(() => {\n    // Start the HTTP server\n    HttpBridge.start(SERVER_PORT, true); // true enables console logging\n    setServerStatus(`Running on port ${SERVER_PORT}`);\n\n    // Register a request handler\n    HttpBridge.onHttpRequest((request: HttpRequest) => {\n      console.log('Received HTTP Request:', request);\n      setLastRequest(request);\n\n      if (request.url === '/') {\n        HttpBridge.respond(\n          request.requestId,\n          200,\n          'application/json',\n          JSON.stringify({ message: 'Hello from React Native HTTP Bridge!' })\n        );\n      } else if (request.url.startsWith('/echo')) {\n        const urlObj = new URL(`http://localhost${request.url}`); // Use a dummy base URL to parse parameters\n        const echoMessage = urlObj.searchParams.get('message') || 'No message provided';\n        HttpBridge.respond(\n           request.requestId,\n           200,\n           'text/plain',\n           `Echo: ${echoMessage}`\n        );\n      } else {\n        HttpBridge.respond(\n          request.requestId,\n          404,\n          'text/plain',\n          'Not Found: Try / or /echo?message=your_text'\n        );\n      }\n    });\n\n    // Cleanup on component unmount\n    return () => {\n      HttpBridge.stop();\n      setServerStatus('Stopped');\n      console.log('HTTP Bridge server stopped.');\n    };\n  }, []);\n\n  const handleStopServer = () => {\n    HttpBridge.stop();\n    setServerStatus('Stopped');\n    Alert.alert('Server Stopped', `HTTP server on port ${SERVER_PORT} has been stopped.`);\n  };\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>HTTP Debug Server</Text>\n      <Text style={styles.statusText}>Status: {serverStatus}</Text>\n      <Button title=\"Stop Server\" onPress={handleStopServer} />\n      {lastRequest && (\n        <View style={styles.requestBox}>\n          <Text style={styles.requestHeader}>Last Request:</Text>\n          <Text>Method: {lastRequest.method}</Text>\n          <Text>URL: {lastRequest.url}</Text>\n          <Text numberOfLines={1}>Headers: {JSON.stringify(lastRequest.headers)}</Text>\n          <Text numberOfLines={1}>Body: {lastRequest.body || '(empty)'}</Text>\n        </View>\n      )}\n      <Text style={styles.instructions}>\n        Access from browser/client (use your device's IP):\n        `http://[YOUR_DEVICE_IP]:${SERVER_PORT}/`\n        `http://[YOUR_DEVICE_IP]:${SERVER_PORT}/echo?message=Hello`\n      </Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n    backgroundColor: '#f8f8f8',\n  },\n  title: {\n    fontSize: 26,\n    fontWeight: 'bold',\n    marginBottom: 15,\n    color: '#333',\n  },\n  statusText: {\n    fontSize: 18,\n    marginBottom: 25,\n    color: '#555',\n  },\n  requestBox: {\n    marginTop: 30,\n    borderWidth: 1,\n    borderColor: '#ddd',\n    borderRadius: 8,\n    padding: 15,\n    width: '100%',\n    backgroundColor: '#fff',\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  requestHeader: {\n    fontWeight: 'bold',\n    fontSize: 16,\n    marginBottom: 5,\n    color: '#333',\n  },\n  instructions: {\n    marginTop: 30,\n    fontSize: 14,\n    textAlign: 'center',\n    color: '#777',\n    lineHeight: 20,\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"Demonstrates starting an HTTP debug server within a React Native app, registering two GET routes (`/` and `/echo`), and handling incoming requests to provide a basic JSON or text response. It also shows how to stop the server and displays the last received request."},"warnings":[{"fix":"Ensure your project's `react-native` version is `>=0.72` or downgrade `react-native-http-bridge-refurbished` to a compatible version.","message":"This package has a peer dependency on `react-native >=0.72`. Projects using older versions of React Native will likely encounter build or runtime errors and should upgrade `react-native` or use an older, compatible version of this library.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Upgrade to `react-native-http-bridge-refurbished@1.2.8` or newer to resolve known Android build stability problems.","message":"Older versions (prior to 1.2.8) experienced Android build issues, which were resolved in versions 1.2.7 and 1.2.8.","severity":"gotcha","affected_versions":"<1.2.8"},{"fix":"Upgrade to `react-native-http-bridge-refurbished@1.2.4` or newer to prevent potential iOS crashes.","message":"An iOS `OS EXC_BAD_ACCESS` crash was fixed in version 1.2.4. Earlier versions might experience instability on iOS.","severity":"gotcha","affected_versions":"<1.2.4"},{"fix":"Use a tool to find your device's local IP address (e.g., in Wi-Fi settings or `adb shell ip addr show wlan0` for Android) and ensure your development machine and device are on the same network. Temporarily disable strict firewall rules if necessary for debugging.","message":"When accessing the in-app HTTP server from an external client (browser, Postman, etc.), ensure you use the device's actual IP address, not `localhost` or `127.0.0.1`. Network connectivity and firewall rules may also prevent access.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `<uses-permission android:name=\"android.permission.INTERNET\" />` inside the `<manifest>` tag in your `android/app/src/main/AndroidManifest.xml` file.","message":"On Android, the app's `AndroidManifest.xml` must include the `android.permission.INTERNET` permission for the HTTP server to function correctly and receive network requests.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Run `npx react-native link react-native-http-bridge-refurbished` to manually link the module. If the problem persists, try clearing Metro Bundler's cache (`npx react-native start --reset-cache`) and reinstalling node modules (`rm -rf node_modules && npm install` or `yarn install`).","cause":"This package includes native modules for iOS and Android, which require linking to the native projects. While React Native's autolinking usually handles this, sometimes it fails or requires a cache clear.","error":"error: `react-native-http-bridge-refurbished` has not been linked. Please run `npx react-native link react-native-http-bridge-refurbished`."},{"fix":"Verify the IP address of your device (e.g., emulator/simulator IP or physical device's Wi-Fi IP). Ensure the port is not blocked by a firewall on either the device or the client machine. Confirm the `HttpBridge` server is running on the device.","cause":"This error typically occurs on the client side when attempting to connect to the React Native app's HTTP server. Possible causes include incorrect IP address, an inaccessible port, or a firewall blocking the connection.","error":"Network request failed"},{"fix":"Choose a different port number when calling `HttpBridge.start(PORT, ...)`. Common alternatives include `8081`, `8082`, or `3000` (though `3000` might conflict with web development servers).","cause":"The specified port for the HTTP Bridge server is already being used by another application or process on the device.","error":"Address already in use"},{"fix":"Open your `android/app/src/main/AndroidManifest.xml` file and add `<uses-permission android:name=\"android.permission.INTERNET\" />` just before the `<application>` tag.","cause":"On Android, the application does not have the necessary `INTERNET` permission to open network sockets or accept incoming connections.","error":"java.lang.SecurityException: Permission denied (missing INTERNET permission?)"}],"ecosystem":"npm","meta_description":null}