Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

with expo after Web Bundling complete , showing blank page

$
0
0

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>  );}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>