Running the build of create-react-app on Android's Web View

Viewed 1312

I want to run the build of a create-react-app in Android's web-view. When I run a simple web app with JavaScript and CSS, it is running fine. But on trying to run a create-react-app I am ending up with an empty screen.

Here are the steps I followed:

  1. I used the following command for create-react app:

    npm install -g create-react-app

    create-react-app my-app

  2. I created the build file using:

    npm run build

  3. I copied and pasted the build folder into my Android project structure under assets directory. The build files in my Android Project Structure

  4. My Main Activity code:

    public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        WebView view = (WebView) findViewById(R.id.web_view);
        WebSettings webSettings = view.getSettings();
        webSettings.setJavaScriptEnabled(true);
        view.loadUrl("file:///android_asset/build/index.html");
    }
    

    }

I am ending up with a blank screen on running the android app. What am I doing wrong?

1 Answers

Fix these two issues

  1. Make CRA to build relative path,

Open package.json of CRA project and add "homepage": "." next to "version" tag at the same level.

  1. Use HashRouter in react-router.

react-router that is if u are using one and u should. We usually use BrowserRouter. HashRouter is pretty useless and adviced not to use. But this scenario is the best place to use HashRouter.

ps. if you want more explanation or example, post in comments and i'll edit and add those as well

Related