CODEWITHSUNDEEP
react-nativeexporeact-native-web
Steve C
Steve C

Reputation: 1866

How to automate Expo web index.html styling

EDIT: I returned to a managed workflow, please test any future answers yourself and report back.

I have an ejected (Bare Workflow) Expo React Native app. I am currently working on the web version using react-native-web.

THE PROBLEM

The expo build:web command automatically overwrites the web index.html file with styling that causes my root element views to scroll, while any VirtualizedLists adopt weird styling patterns. Therefore each time I build, I must manually go into the web index.html file and replace the code with this styling recommended from react-native-web, which works perfectly:

html, body { height: 100%; }
body { overflow: hidden; }
#root { display:flex; height:100%; }

THE ASK

Is there any way to automate or define this behavior and replace all this Expo styling with the react-native-web styling? Thanks in advance!

Upvotes: 1

Views: 2080

Answers (3)

lortschi
lortschi

Reputation: 4323

After some researches and read the Expo docs here: https://docs.expo.dev/guides/customizing-metro/#static-files . Figured out to override the index.html it needs to be created manually an public/index.html. Copy the content of web/index.html into the new created index.html and make your changes in that. After rebundle with npx expo start --web the changes would be visible.

Upvotes: 0

Jake
Jake

Reputation: 379

npx expo customize:web then select the file you want to generate. In your case web/index.html.

Upvotes: 1

Nitsan BenHanoch
Nitsan BenHanoch

Reputation: 689

Run expo customize:web and select web/index.html.

It'll create a file named web/index.html. Edit it as you wish.

To revert to the default .html file, delete web/index.html and run expo start --clear

Upvotes: 0

Related Questions