i followed a tutorial for adding web support using to a expo project **. using typescript, react-native-web and webpack. looks like it works for everyone. but for me, i get a blank web page after Web Bundling complete.
Started Metro Bundler
Web Bundling complete
even though it works just fine on the emulator. i get no error in the console.
package.json
:
{"name": "imibonano","version": "1.0.0","main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web","eject": "expo eject","test": "jest --watchAll","deploy": "gh-pages -d web-build","predeploy": "expo build:web","commit": "node scripts/github.js" },"dependencies": {"@expo-google-fonts/poppins": "^0.2.2","@expo/webpack-config": "^0.16.24","@react-native-community/masked-view": "0.1.10","@react-native-community/slider": "4.2.1","@react-native-firebase/app": "^14.2.3","@react-native-picker/picker": "2.4.0","@react-navigation/bottom-tabs": "^6.0.9","@react-navigation/material-bottom-tabs": "^5.3.15","@react-navigation/native": "^6.0.6","@react-navigation/native-stack": "^6.2.5","@react-navigation/stack": "^6.0.11","dotenv": "^14.2.0","expo": "~45.0.0","expo-app-loading": "^2.0.0","expo-cli": "^5.4.8","expo-font": "~10.1.0","expo-google-app-auth": "^8.1.7","expo-linear-gradient": "~11.3.0","expo-modules-core": "~0.9.2","expo-splash-screen": "^0.15.1","expo-status-bar": "~1.3.0","firebase": "^9.6.4","jest": "^28.1.0","react": "17.0.2","react-dom": "17.0.2","react-native": "0.68.2","react-native-custom-swiper": "^1.0.16","react-native-flipper": "^0.146.1","react-native-gesture-handler": " ~2.2.1","react-native-pager-view": "5.4.15","react-native-paper": "^4.7.2","react-native-reanimated": "~2.8.0","react-native-safe-area-context": "4.2.4","react-native-screens": "~3.11.1","react-native-swiper-flatlist": "^3.0.16","react-native-vector-icons": "^8.1.0","react-native-web": "0.17.7","react-native-web-swiper": "^2.2.2","react-query": "^3.39.1","react-query-native-devtools": "^4.0.0","react-redux": "^8.0.2" },"devDependencies": {"@babel/core": "^7.12.9","@types/react": "~17.0.21","@types/react-native": "~0.66.13","ts-node": "^10.8.1","typescript": "^4.7.3" },"jest": {"preset": "react-native","moduleFileExtensions": ["ts","tsx","js","jsx","json","node" ] },"private": true}
app.tsx
:
import { StatusBar } from "expo-status-bar";import React from "react";import NavigationStack from "./navigation/NavigationStack";import Providers from "./navigation/index";import useCachedResources from './hooks/useCachedResources';import useColorScheme from './hooks/useColorScheme';import AppLoading from 'expo-app-loading';import { AuthProvider } from "./navigation/AuthProvider";import { SafeAreaView, StyleSheet, Text } from "react-native";import AppNavigation from './navigation';import { useFonts, // Poppins_100Thin, // Poppins_100Thin_Italic, // Poppins_200ExtraLight, // Poppins_200ExtraLight_Italic, // Poppins_300Light, // Poppins_300Light_Italic, Poppins_400Regular, // Poppins_400Regular_Italic, Poppins_500Medium, // Poppins_500Medium_Italic, Poppins_600SemiBold, // Poppins_600SemiBold_Italic, // Poppins_700Bold, // Poppins_700Bold_Italic, // Poppins_800ExtraBold, // Poppins_800ExtraBold_Italic, // Poppins_900Black, // Poppins_900Black_Italic } from '@expo-google-fonts/poppins';export default function App() { const isLoadingComplete = useCachedResources(); const colorScheme = useColorScheme(); const [loaded] = useFonts({ title: require('./assets/fonts/klarissa.regular.ttf'), Poppins_400Regular, Poppins_600SemiBold, Poppins_500Medium }); if (!isLoadingComplete || !loaded) { return <AppLoading />; } else { return <Providers />; }}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#0a0a0a", alignItems: "center", justifyContent: "center",}})
index.js
:
import React from "react";import { SafeAreaView, StyleSheet, Text } from "react-native";import { AuthProvider } from "./AuthProvider";import NavigationStack from "./NavigationStack";export default function Providers() { return (<AuthProvider><SafeAreaView style={styles.container}><NavigationStack /></SafeAreaView></AuthProvider> );}