React Native Web compatibility

[VinceBT]

I'm using your package in a RN Web project and I have to do this in my webpack config, else I would get the error "unexpected token import"

    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules\/(?!(react-native-animatable)\/).*/,
      loader: 'babel-loader',
      query: {
        cacheDirectory: true
      }
    }

[ndbroadbent]

@VinceBT This is normal for most react-native-* libraries, since most of them are not compiled. You should add something like this to your webpack config: https://github.com/grabcode/react-native-web-starter/pull/25/files

(Just compile everything that starts with react-native-*)

[KjellConnelly]

Would be cool to have this project precompiled to begin with so we don't need to add the exclude part (as this could end up being a huge string if we had tons of libraries. Not that you need to, but would like that :) especially due to potentially having libraries that aren't prefixed by react-native-

[ndbroadbent]

Hi @KjellConnelly, this is what I put in my webpack config:

    {
      // Many react-native libraries do not compile their ES6 JS.
      test: /\.js$/,
      include: /node_modules\/react-native-/,
      // react-native-web is already compiled.
      exclude: /node_modules\/react-native-web\//,
      loader: 'babel-loader',
      query: { cacheDirectory: true },
    },

That covers all react-native-* libraries, so you don't need to configure each library separately.

[siderakis]

Is it possible to use this library with react-create-app?

I'm guessing not unless this library is precompiled. The class-properties plugin isn't applied on source code in /node_modules/.

/node_modules/react-native-animatable/createAnimatableComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (133:24):

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

BTW thanks for the amazing library, it works great on RN!

[evelant]

@siderakis I haven't quite gotten my app running with react-native-web yet but the best approach I've found is to use react-scripts and customize-cra with a config-overrides.js like this:

//This lets us customize the webpack config from react-scripts without fully ejecting from it and managing it ourselves
//https://github.com/arackaf/customize-cra

const {
    override,
    addDecoratorsLegacy,
    disableEsLint,
    addBundleVisualizer,
    addWebpackAlias,
    addExternalBabelPlugins,
    adjustWorkbox,
    fixBabelImports,
    babelInclude
} = require("customize-cra")
const path = require("path")

module.exports = override(
    // enable legacy decorators babel plugin
    addDecoratorsLegacy(),
    // disable eslint in webpack
    disableEsLint(),
    //async-storage needs an import rewrite until web support gets added to @react-native-community/async-storage
    //https://github.com/necolas/react-native-web/issues/1260
    addWebpackAlias({
        "@react-native-community/async-storage": "react-native-web/dist/exports/AsyncStorage/index.js"
    }),
    addWebpackAlias({
        "react-native$": "react-native-web"
    }),
    fixBabelImports("module-resolver", {
        alias: {
            "^react-native$": "react-native-web"
        }
    }),
    babelInclude([
        path.resolve("src"), // make sure you link your own source
        // any react-native modules you need babel to compile
        path.resolve("node_modules/@react-navigation"),
        path.resolve("node_modules/react-native-vector-icons"),
        path.resolve("node_modules/react-native-animatable")
    ])
)

This lets you ensure that stuff that needs to be run through babel from node_modules does get run through babel. It at least resolves the error you are facing.

[tjann]

Any tips for those not using webpack? I'm following https://medium.com/@jonnykalambay/your-first-hybrid-app-in-15-minutes-react-native-on-the-web-2cc2646051e

[kopax]

Hi, any tip to configure with expo SDK 36 ? It doesn't work on the web.

[YazeedAsaad]

Is it possible to use this library with react-create-app?

I'm guessing not unless this library is precompiled. The class-properties plugin isn't applied on source code in /node_modules/.

/node_modules/react-native-animatable/createAnimatableComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (133:24):

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

BTW thanks for the amazing library, it works great on RN!

i am facing this issue when trying to run my app on web, did you find any solution for this ?

[albertcito]

// Many react-native libraries do not compile their ES6 JS. test: /.js$/, include: /node_modules\/react-native-/, // react-native-web is already compiled. exclude: /node_modules\/react-native-web\//, loader: 'babel-loader', query: { cacheDirectory: true },

@ndbroadbent
Do you have some repository to do it with create-react-app projects.

[albertcito]

I was able to use react-native-animatable with react-native-web with expo, just do it:

npm install -g expo-cli
expo init myapp      
cd myapp
npm i react-native-web  
npm i react-native-animatable
expo start     

[kopax]

I think this one is unnecessary

npm i react-native-web  

[jgo80]

Is it possible to use this library with react-create-app?

/node_modules/react-native-animatable/createAnimatableComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (133:24):

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

@siderakis @YazeedAsaad Yes! I'm using react-native-web with create-react-app in a cross-platform monorepo (where the web app is one of many packages). I managed to get it working with customize-cra like this:

const { override, babelInclude, addBabelPlugins } = require('customize-cra');
const path = require('path');

module.exports = override(
  ...addBabelPlugins(
    'babel-plugin-react-native-web',
    '@babel/plugin-proposal-class-properties',
  ),
  babelInclude([
    path.resolve('src'), // path to index.js of my CRA
    path.resolve('../core'), // path to my cross-platform shared code
    path.resolve('../../node_modules/react-native-animatable'), // path to react-native-animatable in my monorepo
  ]),
);

[codegrabs]

I'm using your package in a RN Web project and I have to do this in my webpack config, else I would get the error "unexpected token import"

    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules\/(?!(react-native-animatable)\/).*/,
      loader: 'babel-loader',
      query: {
        cacheDirectory: true
      }
    }

can you help where to add this? file location and where?

[LuccaBessa]

So... I used react-scripts and customize-cra with a config-overrides.js like this and got it working:

const path = require('path')
const webpack = require('webpack')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath)

// our packages that will now be included in the CRA build step
const appIncludes = [
  resolveApp('src'),
  resolveApp('../common/src'),
  resolveApp('../../node_modules/react-native-gesture-handler/'),
  resolveApp('../../node_modules/react-native-animatable/'),
]

module.exports = function override(config, env) {
  // allow importing from outside of src folder
  config.resolve.plugins = config.resolve.plugins.filter(
    (plugin) => plugin.constructor.name !== 'ModuleScopePlugin',
  )
  config.module.rules[0].include = appIncludes
  config.module.rules[1] = null
  config.module.rules[2].oneOf[1].include = appIncludes
  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve('babel-plugin-react-native-web'),
  ].concat(config.module.rules[2].oneOf[1].options.plugins)
  config.module.rules = config.module.rules.filter(Boolean)
  config.plugins.push(
    new webpack.DefinePlugin({ __DEV__: env !== 'production' }),
  )

  return config
}

[kopax-polyconseil]

Hello, we are trying to configure our repository to support this module with react-native-web, every solution found here did not helped.

We have ejected the create-react-app, is anyone here able to hint us? Thanks for this library!