babel-plugin-open-source icon indicating copy to clipboard operation
babel-plugin-open-source copied to clipboard

React native web support

Open intergalacticspacehighway opened this issue 2 years ago • 0 comments

Thanks for this coool plugin. This is something I didn't know I needed. 😆 🙏

I am not sure whether this should be merged but opening a PR here to add support for React native web in case someone finds it useful and can just copy-paste. I am adding some steps to make it work in React Native web.

Pass a plugin option {reactNativeWeb: true} to make it work.

// babel.config.js

module.exports = {
    plugins: [
      ['./babel-plugin-open-source/babel.js', { reactNativeWeb: true }],
    ],
  };


More details

React native web 0.13+ doesn't support data-attr syntax. Data attributes can be set using dataSet prop on components. To set data-source, one needs to pass dataSet={{source: value}} as a prop. More info here. https://necolas.github.io/react-native-web/docs/view/#props

Note

Needs react-native-web 0.14 or greater.