Web Support V1 #6782
Comments
|
Awesome video and updates! I couldn't use the |
|
Very cool, cant wait to get more of this tool. |
|
@EvanBacon are there any plans to integrate Fast Refresh for web? i've seen some webpack plugins that give experimental support, but haven't had luck getting all the kinks worked out. excited to see you @ RNA in march! ^_^ |
|
@tehOPEologist expo/expo-cli#1498 |
|
Syntax Error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? |
|
@liming-developer You had to wrap all the elements rendered in a page into a single enclosing tag. Just put a <> ... </> around your code into the render. A div works just as fine |
|
support for expo install @react-native-community/viewpager ??? on Web |
|
|
|
if i using web browser to run..that way same android studio to run |
|
What are V1 and V2, do those relate to the Web support? Will there be a Web Support V2? |
|
I have created a small app with rnw, nextjs and navigation v5, it is very impressive. Any chance we could add better support for react-native-maps in the ecosystem category? I haven't really been able to make it work so far but happy to help if needed |
|
@nonotest, the expo fork of react-native-maps has partial web support for Leaflet. It's a lot of work to add providers so I am mostly prioritizing packages in the Expo ecosystem that I have more freedom to edit. @raarts V1 is what we're working towards right now, V2 means it's on the roadmap but not a priority at the moment. |
|
Yeeeees please. Does this include easier setup for useLinking? Because right now it's near impossible to set it up properly with nested routers and a correct history. If so, I'll repeat my Yeeeees please 😄 |
Hello, |
|
Hello, I m getting below error when allow for permissions for push notification on web app. You must provide Please provide solution if any body have |
|
Hello to all, 37.0.0 is not a valid sdk version option are 35.0.0 |
|
I keep getting when running |
|
@mufeez-amjad You might need this |
|
I've got history support for basic navigators done and working. I was using react-navigation@v4 as a reference. It allows to reload the url with state preserved as along as the screen params are simple objects. import React, { useState, useRef, useEffect } from 'react';
import { Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBrowserHistory, createMemoryHistory } from 'history';
import * as queryString from 'query-string';
const history = Platform.OS === 'web' ? createBrowserHistory() : createMemoryHistory();
export const getActiveScreen = (state) => {
const route = state.routes[state.index];
if (route.state) {
return getActiveScreen(route.state);
}
return { name: route.name, params: route.params };
};
export const getInitialScreen = (initial) => {
if (Platform.OS === 'web') {
const path = window.location.pathname.replace('/', '');
const params = queryString.parse(window.location.search);
return { name: path ? path[0].toUpperCase() + path.slice(1) : initial, params };
}
return { name: initial, params: {} };
};
export const getUrl = (name, params) => {
const query = queryString.stringify(params);
return name[0].toLowerCase() + name.slice(1) + (query ? '?' + query : '');
};
export default WebNavigationContainer = ({ setNavigation, children }) => {
const [currentScreen, setCurrentScreen] = useState(null);
const navigationRef = useRef();
useEffect(() => {
if (navigationRef.current) {
const state = navigationRef.current.getRootState();
setCurrentScreen(getActiveScreen(state));
setNavigation(navigationRef.current);
}
return history.listen((location, action) => {
if (action === 'POP') {
navigationRef.current.goBack();
}
});
}, [navigationRef !== undefined && navigationRef !== null]);
const onStateChange = (state) => {
const nextScreen = getActiveScreen(state);
if (currentScreen.name !== nextScreen.name) {
if (!(nextScreen.name.indexOf('Navigator') > -1)) {
let navigate = history.push;
// if (currentScreen && currentScreen.name.indexOf('Navigator') > -1) {
// navigate = history.replace;
// }
const url = getUrl(nextScreen.name, nextScreen.params);
navigate(url);
setCurrentScreen(nextScreen);
}
}
};
return (
<NavigationContainer ref={navigationRef} onStateChange={onStateChange}>
{children}
</NavigationContainer>
);
};
export const WebNavigator = ({ Comp, screenOptions, initialRouteName, initialRouteParams, children, ...props }) => {
return (
<Comp screenOptions={screenOptions} initialRouteName={initialRouteName} {...props}>
{React.Children.map(children, (child) => {
const initialParams = initialRouteName === child.props.name ? initialRouteParams : {};
return React.cloneElement(child, { initialParams });
})}
</Comp>
);
};Example: import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { WebNavigationContainer, WebNavigator, getInitialScreen } from './navigation';
const Home = ({ navigation }) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home</Text>
<Button title="Login" onPress={() => navigation.navigate('Login', { email: 'abc' })} />
</View>
);
const Login = ({ route: { params } }) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Login</Text>
<Text>Email: {params.email}</Text>
</View>
);
const Stack = createStackNavigator();
export default function App() {
const [navigation, setNavigation] = useState(null);
const { name, params } = getInitialScreen('Home');
return (
<WebNavigationContainer setNavigation={setNavigation}>
<WebNavigator Comp={Stack.Navigator} initialRouteName={name} initialRouteParams={params}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Login" component={Login} />
</WebNavigator>
</WebNavigationContainer>
);
} |
|
Is |
|
Ok customizing webpack as above didn't help. I've found the issue in |
|
@hyochan It works for me. I took this as an example https://github.com/kristerkari/react-native-svg-example. I had initial hiccups but it worked later on. This is my config. const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
}),
babelTransformerPath: require.resolve('react-native-svg-transformer')
},
resolver: {
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg']
}
};
})();and "packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["js", "jsx", "svg", "ts", "tsx"]
}"react-native-svg": "9.13.3",
"react-native-svg-transformer": "^0.14.3", |
|
@pyros2097 Wow! Thanks for sharing so quickly. I've also found the issue as I've posted above. By the way, I am facing another problem in When I set the size manually, as shown above, the image is cut off instead of resizing. |
|
info @expo/ngrok-bin-freebsd-x64@2.2.8: The platform "win32" is incompatible with this module. problem library ngrok intall in windows 10 |
|
@OrlandoGareca - no, that's not what is happening. this is just a warning that npm shows for optional packages, you will see it for macos and linux if you're using windows, you can ignore it. |
|
i opened my app via expo web and some layout attributes changed and it doesnt consume the api |
|
Image is not showing up in the web view, because its set to position: absolute; instead of position: relative; as it should be with react-native. |
|
react-native-modal-datetime-picker doesn't work for web |
|
@G4BB3R - that is unrelated to expo, you should post an issue on the react-native-modal-datetime-picker repository. we can't go around and update everybody's repos to support web, that is not feasible |
|
expo start--web C:/.........../......../node_modules/react-navigation-stack/lib/module/views/Header/Header.js |
|
Looks like console.log() doesn't work for me for web but it does for iOS. Meaning when I do a console.log() message, it shows up on the CLI when i open the app on my phone through tunnel, but it does not show up when I open as a web app (local or not). I'm on Mac OS 11.0.1 and using expo version 4.2.1 thanks |
|
@mahermassoud - console.log on web goes to your browser developer tools logs. we show logs in expo-cli for ios and android because there is no equivalent to this in those cases. it's much better to use your developer tools logs than having to serialize and print the logs in expo-cli terminal. in other words, this is intentional, expected behavior. that said, if you think this is not desirable and would like to propose alternative behavior or some way for us to make this clear, let us know! |
|
@brentvatne OMG Thanks so much!!!!!!!!!!! |
|
Ran into a strange issue on the web version while going thru a Udemy RN course, hopefully others are able to replicate and its not just me. Basically, when you spread your style properties over a view like so... ...generally the second style object you spread over will overwrite any overlapping properties of the first style object, but otherwise keeps all the style properties from the first (styles.container) that weren't overwritten by the second. While this works as intended on my android emulator in the screenshot below, the behavior in web seems to be that it decided to ditch the {styles.container} entirely, and only apply {backgroundColor: props.color}? For reference the style of styles.container was: Image: |
|
@nikurou I'm not sure why that works on native, but it's probably due to the fact that styles aren't actually objects, but optimized references, so you can't spread them. It will work if you use an array instead: <View style={[styles.container, { backgroundColor: props.color }]}>
//some content
</View> |
|
@ianmartorell Thanks! This totally works. As I said, I'm following off a React Native Udemy course, and spreading the style is what the instructor of that course taught. For all intents and purposes, it actually does work perfectly fine when viewed on both iOS and Android, just not on web, but I'll remember to do it your way from now on since it seems to work for web as well. |
|
Hi, I'm wondering what the status on Fast Refresh is? I tried following @EvanBacon's guide, but couldn't get anything working. I was also stuck on live reloading, couldn't find a way to disable that. |
|
Hi, expo go app doesn't get reloading once a plugin is imported |
|
Hi, when I try to run my app as web then show me error like this: |
|
I'm getting a |
|
When using theme props of styled-components is not working on web. Example bellow is returning error. Is returning the following error. |
|
I'm getting the following error, when I try to start my app with expo web: And I'm also getting this error from time to time: Any idea how to solve this? |
|
I'm getting the following error, when I try to start my app with expo web: |
This comment has been minimized.
This comment has been minimized.
|
Hi all: Please excuse my ignorance. When I run my app on Android, deep linking to calendar, phone dialer, and web browser works fine. Perhaps, I need to use SDK 42 to make it work? Thank you. Judi |
@JudiPuak remember that v 39 is gonna be deprecated in the next release. It would be a good idea to create a new branch in your project and test v42.
Here is the link: https://blog.expo.dev/expo-sdk-42-579aee2348b6 |
|
Hello Expo Team:
Failed to complie. Comments: |
|
@cronwel please open an issue on https://github.com/react-navigation/react-navigation instead. |
|
We'll be upgrading to |
|
@EvanBacon Is there a predictable way to get the URL history even though page refresh, or is async storage the best way to go? |
|
@Maker-Mark that question seems better suited for stack overflow, this issue is simply for progress tracking. |
|
I'm marking this issue as complete since all of the V1 tasks are done. Expo SDK components, and APIs are stable on web. The tooling in Expo CLI (expo/webpack-config) should still be considered beta as it's not cross-platform and doesn't share enough with iOS and Android -- ideally we'd have some kinda Webpack for iOS and Android, or metro for web. This has been held up by native platform restrictions that I've been working on for a while like code splitting on native. If you use Expo SDKs with another Webpack config like the Next.js Webpack config, then it should be stable enough for production. I'll continue working on the bundler over in the expo/expo-cli repo (things like Webpack 5 upgrade), and update the CLI warning to more specifically point to Webpack support as being the feature that is still in beta. |
and others
Web support beta has been great, but it's time to make it production ready! Here I've outlined the steps required to creating a production ready system for building basic web apps with Expo (a stable MVP). There are also a few completed V2 features which we can move to another place after V1 is complete.
Navigation
This has elevated to its own category.
PWA
webpack@4.42.0Documentation
styled-componentsvs React Native Style SheetTesting
jest-expojest-expo-enzymejest-expo-puppeteerSDK
V2
react-native-gesture-handlerreact-native-reanimatedreact-native-safe-area-contextreact-native-web-hooksreact-native-shared-elementreact-native-svg@react-native-community/web-viewreact-apple-authenticationintoexpo-apple-authenticationCustom Workflows
V2
Tooling
expo start:web&expo startexpo build:webapp.jsonweb functionalitySnack
Client
The text was updated successfully, but these errors were encountered: