fix: move PyodideWebView into Import tab; fix micropip blob URL error

Layout fix: WebView as a sibling in the root layout breaks flex geometry even
with position:absolute. Moving it inside the Import tab screen (which Expo Router
keeps mounted after first visit) eliminates the issue entirely and restores the
original simple root layout.

micropip fix: blob: URLs are not a recognised scheme in micropip — they are parsed
as package requirement strings, producing InvalidRequirement. Write the wheel bytes
to Pyodide's Emscripten FS (/tmp/bincio.whl) and install via emfs:/// instead.
This commit is contained in:
Davide Scaini
2026-04-24 23:26:39 +02:00
parent fc814f5026
commit ef45d4f4bb
3 changed files with 25 additions and 24 deletions
+13 -2
View File
@@ -2,8 +2,9 @@ import * as DocumentPicker from 'expo-document-picker';
import * as FileSystem from 'expo-file-system/legacy';
import { useSQLiteContext } from 'expo-sqlite';
import { useState } from 'react';
import { Alert, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { insertActivity } from '@/db/queries';
import { PyodideWebView } from '@/extraction/PyodideWebView';
import { extractFile } from '@/extraction/extractActivity';
const FIT_EXTENSIONS = ['.fit', '.fit.gz'];
@@ -129,6 +130,13 @@ export default function ImportScreen() {
}
return (
<View style={styles.screen}>
{/* Hidden WebView for Pyodide — mounted here so it lives inside the tab
(Expo Router keeps tabs mounted after first visit, preserving Pyodide state).
The 1×1 container clips it out of the scroll layout entirely. */}
<View style={styles.hiddenEngine}>
<PyodideWebView />
</View>
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
<Text style={styles.header}>Import</Text>
@@ -192,6 +200,7 @@ export default function ImportScreen() {
</Text>
</View>
</ScrollView>
</View>
);
}
@@ -246,7 +255,9 @@ function arrayBufferToBase64(buf: ArrayBuffer): string {
// ── Styles ───────────────────────────────────────────────────────────────────
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#09090b' },
screen: { flex: 1, backgroundColor: '#09090b' },
hiddenEngine: { position: 'absolute', width: 1, height: 1, overflow: 'hidden' },
container: { flex: 1 },
content: { padding: 16, paddingTop: 60, paddingBottom: 40 },
header: { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 12 },
body: { color: '#a1a1aa', fontSize: 14, lineHeight: 20, marginBottom: 24 },