https://github.com/mattijsf/react-native-tango-webview
React Native library that enables easy communication between a WebView and React Native components using tango-rpc
https://github.com/mattijsf/react-native-tango-webview
react-native rpc tango-rpc typescript
Last synced: about 1 month ago
JSON representation
React Native library that enables easy communication between a WebView and React Native components using tango-rpc
- Host: GitHub
- URL: https://github.com/mattijsf/react-native-tango-webview
- Owner: mattijsf
- License: mit
- Created: 2023-05-25T12:38:57.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-30T12:52:13.000Z (about 3 years ago)
- Last Synced: 2025-11-27T09:50:15.153Z (7 months ago)
- Topics: react-native, rpc, tango-rpc, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-tango-webview
- Size: 1.06 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-tango-webview
React Native library that enables easy communication between a WebView and React Native components using the [tango-rpc](https://github.com/mattijsf/tango-rpc) library. It simplifies the integration of WebView into React Native applications and facilitates data exchange and method invocation between the two environments using a typescript interface.
## Installation
```sh
npm install react-native-tango-webview
```
or
```sh
yarn add react-native-tango-webview
```
## Usage
```tsx
// ...
import TangoWebview, { TANGO_RPC_WEBVIEW_SCRIPT } from "react-native-tango-webview"
type ClientAPI = {
sayHi(message: string): Promise
sayHiThroughCallback(cb: (message: string) => void): Promise
}
const HTML = `
${TANGO_RPC_WEBVIEW_SCRIPT} <!-- OR: <script src="https://unpkg.com/react-native-tango-webview/dist/umd/tango-rpc.mjs"> -->
const myApi = {
sayHi(message) {
alert(message)
return true
},
sayHiThroughCallback(cb) {
cb("Hi from web")
}
};
const server = new TangoRPC.Server(createWebViewChannel(), myApi)
server.onConnect(() => console.log("Server Connected"))
`
export default function App(): JSX.Element {
const [clientApi, setClientApi] = useState()
const showMessage = useCallback(async () => {
if (!clientApi) return
const result = await clientApi.sayHi("Hello World!")
console.log(result) // true
}, [clientApi])
const doCallback = useCallback(async () => {
if (!clientApi) return
await clientApi.sayHiThroughCallback(message => console.log("Callback:" + message))
}, [clientApi])
return (
<>
>
)
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT