{"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-native-http-bridge-refurbished"],"cli":null},"imports":["import { HttpBridge } from 'react-native-http-bridge-refurbished';","import type { HttpRequest } from 'react-native-http-bridge-refurbished';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}