Questions regarding Expo Web

Hi beatiful people!

I think it is really great to work with Expo! I have some questions regarding expo-web.

I have build and app for android mostly - I cant really test it on IOS.

When I want to run my project as a WebApp I am getting the first error that makes my App crash because it is saying it cant find Platform in node_modules/Libs/StyleSheet/processColor.js.
I fixed this error by importing from Platform.android and not from Platform only.

The next error is regarding a DrawerNavigation Module in Node_modules. I am not even using it inside my app but I guess it cant handle the package in Web.

I have seen that there are few components that I am using that wont work for web yet for example refreshcontrol or modal.

Is there a concrete way to turn my app into web ? Is it possible to use a different component for Modal for example in the web?

Also I think that even when I fix the DrawerNavigation error there probably will be multiple Errors that are like this…

~Faded

Hi @yesiamfaded , expo-web is still in quite early stages and lots of third-party modules do not support it yet. So unfortunately you will probably find that you need to personally implement a lot of these features instead of using third-party modules. Read this page https://docs.expo.io/tutorial/platform-differences/ for more information.

In general, you want to use the Platform expo module for platform-specific code.

Good luck!

In addition to what @redseb said, another way of handling platform differences is to create different JavaScript files for platform-specific components. Whether the Platform module or the following approach works better for you probably depends on the situation. See which way seems more appropriate for your use case. Of course you can use both methods in different parts of your code if that makes sense.

e.g. you could do this:

// Test.android.js
import React from "react";
import { Text } from "react-native";

export default function Test() {
  return <Text>Testing testing 1 2 3, on Android</Text>;
}

and

// Test.web.js
import React from "react";
import { Text } from "react-native";

export default function Test() {
  return <Text>Testing testing 1 2 3, on Web</Text>;
}

In these platform-specific files you can place e.g. a Modal component for Android and a different one for Web, as long as they have the same name and take the same sort of params etc. it should work. Of course both of those could make use of other common components where that makes sense.

and then in your code you do:

import Test from "./Test";

and the correct file will be imported depending on the platform.

I have not found a page that explains this all properly, but there is some information here (not Expo-specific):

One of the Expo team members kindly created an issue to address this lack of documentation:

2 Likes