Compatibility with Expo apps

[bboydflo]

hi, thanks for this package. I am trying to use it in an expo app. and I got this error: TypeError: null is not an object (evaluating 'FPStaticServer.start'

Any idea what I am doing wrong? Here is my code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, SafeAreaView } from "react-native";
import { WebView } from 'react-native-webview';
import StaticServer from "@dr.pogodin/react-native-static-server";
import { useEffect, useRef, useState } from 'react';

export default function App() {
  // const [uri] = useState("https://google.com");
  const server = useRef(new StaticServer(5555, "./assets", { localOnly: true, keepAlive: true })).current;
  const [uri] = useState(`http://localhost:${server.port}`);

  useEffect(() => {
    server.start().then((url) => {
      console.log("Serving at URL", url);
    });

    () => {
      // Stop the server
      server.stop();
    }
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        style={styles.container}
        originWhitelist={["*"]}
        source={{ uri }}
        cacheEnabled={true}
        cacheMode={"LOAD_CACHE_ONLY"}
        limitsNavigationsToAppBoundDomains={true}
      />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Here is some output in my logs:

TypeError: null is not an object (evaluating 'FPStaticServer.start')

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:52:4 in showErrorDialog
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:80:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:119:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication

TypeError: null is not an object (evaluating 'FPStaticServer.start')

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

And below are some expo logs:

[birdofpreyru]

Hi @bboydflo , a quick feedback here.

1. Which version of the library do you use, and do you have the new react-native architecture (Turbo Modules) enabled? My best guess is that you used the latest version with Turbo Modules, and it seems I really need to test it myself and fix something. It seems that at this point FPStaticServer evaluates to null in your case (instead of the native module interface), probably you can try to edit that place directly inside your node_modules and check what branch is executed, and why is it going wrong.

2. Looking at your code,

    const server = useRef(new StaticServer(5555, "./assets", { localOnly: true, keepAlive: true })).current;

   this line is not a good idea, I believe effectively you create an instance of StaticServer (the default reference value) on each re-render of App, although only the first of them is recorded in the ref. In you current code you don't access the server instance outside the effect hook at all, so no need for the reference altogether. Otherwise, you better do:

   const serverRef = useRef();
   if (!serverRef.current) serverRef.current = new StaticServer(5555, "./assets", { localOnly: true, keepAlive: true });
   const server = serverRef.current;

[bboydflo]

Hey, thanks for your reply.

1. I don't think I have Turbo Modules enabled as I am trying to use react native via expo.dev
2. probably you're right 👍 I have also fixed that.

Will try to see how/if I can enable Turbo Modules with expo.

[birdofpreyru]

@bboydflo , I actually meant it should work without Turbo Modules (at least works for me), rather then with them :) Though, I haven't tried it with expo. Agh... also all my projects I use it are JS and not TS. Probably, there is some minor mistake in TS, or something particular about TS config in expo, which makes FPStaticServer null, instead of the module instance.

[bboydflo]

Could be. I realized that I also had another webpack-dev-server running in another tmux window which might have an effect on the current expo app. Will try again with a simple js project as well.

[birdofpreyru]

Hey @bboydflo , I double-checked it indeed does not work in an expo app out of the box, and in my current understanding it is just expo not supporting custom react-native libraries, which rely on native code, unless you build and deploy the resulting expo app in a special way.

See Adding custom native code to Expo guide.

I don't know, whether something can be done in a RN library to make it Expo-friendly, and at this time it is beyond my interests and capacity to figure it out myself.

[bboydflo]

thanks! will try it with crate react native app instead

[viljark]

Hi @bboydflo and @birdofpreyru, this library can be used with Expo, but you need to use expo prebuild so that the library's native dependencies would be linked and Pods installed.

Also when using prebuild, you can use config plugins to customize your project from JavaScript without ever needing to directly modify Xcode or Android Studio projects. From my testing so far, it seems you don't need a config plugin for this library.

More info:
https://github.com/expo/fyi/blob/main/prebuilding.md
https://docs.expo.dev/workflow/customizing/
https://docs.expo.dev/development/getting-started/

[QuyetAQ]

I got the following error, can you check it for me? @birdofpreyru

[birdofpreyru]

I guess ./assets does not point to the folder you think it points to, when resolved internally. Better pass in the correct absolute path, or double check where it ends up pointing to.

[QuyetAQ]

I guess ./assets does not point to the folder you think it points to, when resolved internally. Better pass in the correct absolute path, or double check where it ends up pointing to.

I put source file html in here
/android/app/src/main/assets/index.html
seems this path is not correct?

[birdofpreyru]

I think, it is not. It should be a path on the target device, and if you read README carefully, it uses react-native-fs library to figure out correct path for files there, and probably to move them to the folder the server can read.