Can't load the chart in expo sdk version 47

[flexirnd]

Hi everyone , i have facing some issue in my mobile app .I already upgrade expo sdk version from version 45 to version 47 and then i already successful using the eas build to build the apk file . After i download the apk and install to android emulator when i access to my app main screen that will display this error message.

But i try to use ‘expo go’ run that no show the error message.

How to fix this issue ? Has anyone encountered the same problem as me？

[wodin]

Hi @flexirnd

Do you have android and ios directories in your app? If so, you probably ran npx expo run:android ot npx expo prebuild previously. That switches your app to the bare workflow.

Since the app works in Expo Go, it should work fine if you get rid of (or rename) the android and ios directories. See https://expo.fyi/prebuild-cleanup for more details.

If you do not have an android directory, could you post some code from that screen? It looks like you’re using a WebView?

[flexirnd]

Dear @wodin ,

Yes , I 'm using the WebView . Below is my code

import React, { PureComponent, createRef } from "react";
import { StyleSheet, Platform } from "react-native";
import {WebView as RNWebView } from "react-native-webview";
import { Asset } from 'expo-asset';
import api from "../../http/apiRequest";

const script = (title)=>{
  return `var element =  document.getElementById('textContent');
          element.innerHTML = '${title}';
          element.addEventListener("click", ()=>{window.ReactNativeWebView.postMessage('${title}');});`
}
export default class Chart extends PureComponent{
  static defaultProps = {
    onChange: () => {},
    initScript: "",
    data: [],
    webView: RNWebView
  };

  state = {
    isHTMLFileLoaded:false,
    renderedOnce:false
  }

  constructor(props) {
    super(props);
    this.chart = createRef();
  }

  componentDidMount(){
    this.init();
  }

  init = ()=> {
    this.HTMLFile = Asset.fromModule(require('./f2chart.html'))
    if (!this.HTMLFile.localUri) {
      Asset.loadAsync(require('./f2chart.html')).then(() => {
        this.HTMLFile = Asset.fromModule(require('./f2chart.html'));
        this.setState({ isHTMLFileLoaded: true})
      })
    } else {
      this.setState({ isHTMLFileLoaded: true})
    }
  }

  componentDidUpdate(prevProps){
    if (JSON.stringify(prevProps.data) !== JSON.stringify(this.props.data)) {
      this.chart.current.injectJavaScript(`
        chart.changeData(${JSON.stringify(this.props.data)});
        ${script(this.props.title)};`
      );
      //this.chart.current.reload();
    }
  }

  getLeaveDetails = (event) => {
    const {
      nativeEvent: { data }
    } = event;
    api.get("/api/GetLeaveBalanceDetailByEmpNo" , { LeaveCode : data }).then((res)=>{
      let {
        data : { ResponseData }
      } = res
      this.props.onSelectedCallback(ResponseData , data);
    }).catch((e)=>{console.log(e);});
  }

  onMessage = event => {
    const {
      nativeEvent: { data }
    } = event;
    console.log(data);
    // if(this.props.onSelectedCallback){
    //   this.props.onSelectedCallback(JSON.parse(data).memo);
    // }
  };

  render() {
    const {
      webView: WebView,
      data,
      onChange,
      initScript,
      title,
      ...props
    } = this.props;
   
    return (
      <WebView
        javaScriptEnabled
        ref={this.chart}
        allowFileAccess={true}
        scrollEnabled={false}
        style={styles.webView}
        injectedJavaScript={initScript + script(title)}
        originWhitelist={["*"]}
        startInLoadingState={true}
        source={
          this.state.isHTMLFileLoaded ?
          (
            Platform.OS === 'android'
            ? {
            uri: (this.HTMLFile['localUri']).includes('ExponentAsset')
              ? this.HTMLFile['localUri']
              : 'file:///android_asset/' + this.HTMLFile['localUri'].substring(9)
            }
            : require('./f2chart.html')
          ):undefined
        }
        onMessage={this.getLeaveDetails}
        //onMessage={this.onMessage}
        // {...props}
      />
    );
  }
}

const styles = StyleSheet.create({
  webView: {
    flex: 1,
    backgroundColor: "transparent"
  }
});

[wodin]

The way you’re referencing the “f2chart.html” file in the WebView’s source looks suspect.