React Native example #1108
Replies: 1 comment
-
|
Observable Plot renders to SVG/HTML DOM, which React Native does not provide natively. There are a few viable paths depending on your needs: Option 1 — WebView (simplest, full Plot feature set) import { WebView } from 'react-native-webview';
const html = `
<html><body>
<script type="module">
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot/+esm";
document.body.appendChild(Plot.plot({ marks: [...] }));
</script>
</body></html>
`;
<WebView source={{ html }} style={{ width: 400, height: 300 }} />Gestures and tooltips work because the full browser engine runs inside the WebView. Use Option 2 — react-native-svg (native rendering, manual port) This is significant work — Plot does a lot of layout math — but gives fully native rendering and gesture integration. Option 3 — Victory Native (drop-in alternative) npm install victory-native @shopify/react-native-skia react-native-reanimated react-native-gesture-handlerFor gestures + tooltips specifically: Victory Native XL has |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Anyone seen an example of Plot with React Native? Rendering is one thing, but what about gestures for highlighting, showing tooltips etc?
Beta Was this translation helpful? Give feedback.
All reactions