fix(mobile): migrate to Expo SDK 54, replace NativeWind with StyleSheet
- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5 - Remove NativeWind/Tailwind dependencies - Fix babel.config.js: presets babel-preset-expo only - Rewrite all screens with StyleSheet.create (no className) - Add lucide-react-native + react-native-svg - Export design tokens C from _layout.tsx for shared usage - Install node_modules (702 packages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, ScrollView, ActivityIndicator,
|
||||
TouchableOpacity, Share,
|
||||
View, Text, ActivityIndicator,
|
||||
TouchableOpacity, Share, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||||
@@ -9,6 +9,7 @@ import { ArrowLeft, Share2 } from 'lucide-react-native'
|
||||
import { WebView } from 'react-native-webview'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '../_layout'
|
||||
|
||||
interface Note {
|
||||
id: string
|
||||
@@ -18,7 +19,6 @@ interface Note {
|
||||
notebookName?: string
|
||||
}
|
||||
|
||||
// Wrap HTML content in a minimal styled page for WebView rendering
|
||||
function buildHtml(content: string, title: string) {
|
||||
return `<!DOCTYPE html>
|
||||
<html>
|
||||
@@ -62,43 +62,35 @@ export default function NoteScreen() {
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!note) return
|
||||
await Share.share({
|
||||
title: note.title,
|
||||
message: `${note.title}\nhttps://memento-note.com`,
|
||||
})
|
||||
await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
{/* Header */}
|
||||
<View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
|
||||
<TouchableOpacity onPress={() => router.back()} className="p-1">
|
||||
<ArrowLeft size={22} color="#1A1A18" />
|
||||
<SafeAreaView style={s.safe}>
|
||||
<View style={s.header}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={s.backBtn}>
|
||||
<ArrowLeft size={22} color={C.ink} />
|
||||
</TouchableOpacity>
|
||||
<Text className="flex-1 text-[15px] font-semibold text-ink" numberOfLines={1}>
|
||||
{note?.title ?? '…'}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={handleShare} className="p-1">
|
||||
<Share2 size={18} color="#8A8A82" />
|
||||
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
|
||||
<TouchableOpacity onPress={handleShare} style={s.shareBtn}>
|
||||
<Share2 size={18} color={C.concrete} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color="#A47148" size="large" />
|
||||
</View>
|
||||
) : note ? (
|
||||
<WebView
|
||||
source={{ html: buildHtml(note.content, note.title) }}
|
||||
style={{ flex: 1, backgroundColor: '#FAFAF8' }}
|
||||
scrollEnabled
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
) : (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<Text className="text-concrete">Note introuvable.</Text>
|
||||
</View>
|
||||
)}
|
||||
{loading
|
||||
? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>
|
||||
: note
|
||||
? <WebView source={{ html: buildHtml(note.content, note.title) }} style={{ flex: 1, backgroundColor: C.paper }} scrollEnabled showsVerticalScrollIndicator={false} />
|
||||
: <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: C.paper },
|
||||
header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
|
||||
backBtn: { padding: 4 },
|
||||
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
|
||||
shareBtn: { padding: 4 },
|
||||
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user