CSS is Not working on Web.

[kiritm-nimblechapps]

Hi,

I have integration as follow the steps you provided but the after creating CSS file and apply on js file. it's working fine in the iOS device but not working on web.

My Code :

import React, { Component } from 'react'
import { ScrollView, StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import styles from "./styles.css";


export default class Dashboard extends React.Component {
    render() {
        return (
            <View className={styles.container}>
                <Text className={styles.blue}>Blue Text</Text>
            </View>
        )
    }
}

OnWeb :

OnIOS:

Can you help me.

Thanks.

[kristerkari]

hey @kiritnim!

I think that the problem is that the Web part is not properly set up. Do you have your project somewhere where I could have a look at it? For example a new Github repository?

Here are the docs for Web: https://github.com/kristerkari/react-native-css-modules/blob/master/docs/web-compatibility.md

...and here are the needed files/config from the example app:

• Webpack config: https://github.com/kristerkari/react-native-css-modules-example/blob/master/webpack.config.js
• Web index.js: https://github.com/kristerkari/react-native-css-modules-example/blob/master/index.web.js
• Web index.html: https://github.com/kristerkari/react-native-css-modules-example/blob/master/index.html

[kiritm-nimblechapps]

hey @kiritnim!

I think that the problem is that the Web part is not properly set up. Do you have your project somewhere where I could have a look at it? For example a new Github repository?

Here are the docs for Web: https://github.com/kristerkari/react-native-css-modules/blob/master/docs/web-compatibility.md

...and here are the needed files/config from the example app:

• Webpack config: https://github.com/kristerkari/react-native-css-modules-example/blob/master/webpack.config.js
• Web index.js: https://github.com/kristerkari/react-native-css-modules-example/blob/master/index.web.js
• Web index.html: https://github.com/kristerkari/react-native-css-modules-example/blob/master/index.html

I am use Expo, and the app is start with App.js, So can you help me with expo app.

[kiritm-nimblechapps]

I am use Expo, and the app is start with App.js, So can you help me with expo app.

[kristerkari]

I see, I have not tested the Web compatibility with Expo. I can have a look at it and update the docs to have the instructions for Expo too.

[kiritm-nimblechapps]

Okay. Thanks I wait for it.

[yyaswanth]

Hi @kristerkari

Even i am facing the same issue. I am using the expo. For web css styles are not loading but for mobile ( ios & android ) styles are loading properly. Could you please add the solution.

[RobinS-S]

Has anyone found a solution yet?

[PPillau]

Would be interested too. Any way of getting this to work in Expo Web?

[kristerkari]

@yyaswanth @RobinS-S @PPillau I'm not using Expo myself, but I know that adding the support is a bit trickier at the moment since react-native-web dropped the support for using the className property.

What would probably be required to get it working with Expo Web:

1. Patch react-native-web to bring back support for the className property.
2. Add Webpack configuration to Expo that would use the Webpack (Web) css modules.

[sikaco]

So, is there anyone know how to solve it?

I use expo too, just follow the path from react-native official. 😂

[JoeBoulton]

Any update on this?

[kristerkari]

Any update on this?

Yes, please check https://github.com/kristerkari/react-native-css-modules/issues/37#issuecomment-1269678996