Use with @storybook/addon-react-native-web

[movie4]

Hello @kristerkari !

Is it possible to use this package with https://storybook.js.org/addons/@storybook/addon-react-native-web ? There is a similar issue https://github.com/storybookjs/addon-react-native-web/issues/50

Thanks!

[kristerkari]

Hello @movie4 !

I doubt that it would work out of the box, and the reason for that is that (if I remember correctly), Storybook is using Metro bundler on the Native side, and Webpack on the Web side.

This transformer is for Metro bundler only, so it probably won't work for the browser version of Storybook.

What I have been personally doing is to use the react-native-postcss-transformer on React Native side, and postcss-loader for Webpack (e.g. React Native Web).

[movie4]

@kristerkari — thank for your answer.

What I have been personally doing is to use the react-native-postcss-transformer on React Native side, and postcss-loader for Webpack (e.g. React Native Web).

Can you show configuration example?

Thanks!

[kristerkari]

Can you show configuration example?

Have a look at the Webpack config here (the same repo also has the React Native config): https://github.com/kristerkari/react-native-css-modules-example/blob/master/webpack.config.js#L45-L63

[movie4]

@kristerkari — Сould you elaborate on what is going wrong

Test.js

import React from 'react'
import { Text, View, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  test: {
    borderWidth: 1,
    padding: 8,
  },
  test_text: {
    borderWidth: 1,
    padding: 8,
    textAlign: 'center'
  }
})

function Test(props) {
  return (
    <View className={styles.test}>
      <Text className={styles.test_text}>Text</Text>
    </View>
  )
}

export { Test }

Work fine in storybook web

Can i use an external stylesheet like bellow

import React from 'react'
import { Text, View } from 'react-native'

import styles from './Test.css'

function Test(props) {
  return (
    <View className={styles.test}>
      <Text className={styles.test_text}>Text</Text>
    </View>
  )
}

export { Test }

.test {
  width: 100%;
  padding: 8px 16px;
  align-self: flex-start;
  border-radius: 6px;
}

if i try this i get an error

Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

Thanks!

[kristerkari]

I'm not sure what exactly is causing that error, but one problem that I ran into was that React Native Web removed the support for the className property, so I had to patch it back so that I could get it to work: https://github.com/kristerkari/react-native-css-modules-example/blob/master/patches/react-native-web%2B0.19.6.patch