Fails to run on react-native-web

[bader-ht]

Hi guys. I'm having trouble with this package. It was installed as a dependency of react-native-gifted-chat.

./node_modules/react-native-typing-animation/src/index.js
SyntaxError: /Users/bader/Work/projects/react/gifted-chat-web-demo/node_modules/react-native-typing-animation/src/index.js: Unexpected token (37:6)

  35 | 
  36 |     return (
> 37 |       <View style={[styles.container, style]}>
     |       ^
  38 |         <Dot x={dotX - dotRadius - dotMargin} y={this.state.y1} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
  39 |         <Dot x={dotX} y={this.state.y2} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
  40 |         <Dot x={dotX + dotRadius + dotMargin} y={this.state.y3} radius={dotRadius} style={dotStyles} dotColor={dotColor} />

I'm running through react-native-rewired, which as per gifted chat's documentation, we have the following config-override.js, which changes our build as follows:

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text|expo-av)/,
    use: {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        configFile: false,
        presets: [
          ['@babel/preset-env', { useBuiltIns: 'usage' }],
          '@babel/preset-react',
        ],
        plugins: ['@babel/plugin-proposal-class-properties'],
      },
    },
  })

  return config
}

Any ideas as to whats going wrong? I noticed in the Readme that this specifically supports react-native-web, but this is crashing.

[ghost]

Hi @bader-ht, kindly share your code for the Gifted Chat component on your project.

[xcarpentier]

Hi @bader-ht, did you try to add react-native-typing-animation into exclude glob in webpack config?

[bader-ht]

I don’t think so. I’ll have a go at it now and let you know.

[bader-ht]

Thank you @xcarpentier, that got the project to compile, but typing animation does not actually show. Does Animated.View work on react-native-web?

[xcarpentier]

Yes it should: https://github.com/watadarkstar/react-native-typing-animation/issues/18#issuecomment-569750312