react-native-reanimated #24

felippepuhle · 2020-01-04T19:41:55Z

Is this plugin compatible with react-native-reanimated? I don't know what's happening under the hoods, but declaring a simple new Animated.Value(0) throw a lot of errors:

Browser

./node_modules/react-native-reanimated/src/core/AnimatedBezier.js 129:8
Module parse failed: Unexpected token (129:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default class AnimatedBezier extends AnimatedNode {
>   _value;
|   _bezier;

Terminal

 ~/Pr/gatsby-site  master !4 ?2  gatsby develop                ✔  16:50:14
❯ gatsby develop
success open and validate gatsby-configs - 0.071s
success load plugins - 0.741s
success onPreInit - 0.003s
success initialize cache - 0.012s
success copy gatsby files - 0.261s
success onPreBootstrap - 0.016s
success createSchemaCustomization - 0.004s
success source and transform nodes - 0.088s
warn Plugin `gatsby-source-filesystem` tried to define the GraphQL type `File`,
success building schema - 0.357s
success createPages - 0.005s
success createPagesStatefully - 0.107s
success onPreExtractQueries - 0.003s
success update schema - 0.036s
success extract queries from components - 0.274s
success write out requires - 0.040s
success write out redirect data - 0.003s
success Build manifest and related icons - 0.133s
success onPostBootstrap - 0.194s
⠀
info bootstrap finished - 6.622 s
⠀
success run queries - 0.045s - 14/14 309.76/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (129:8)

File: node_modules/react-native-reanimated/src/core/AnimatedBezier.js:129:8


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (12:10)

File: node_modules/react-native-reanimated/src/animations/TimingAnimation.js:12:10


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:11)

File: node_modules/react-native-reanimated/src/core/AnimatedCall.js:13:11


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (27:40)

File: node_modules/react-native-reanimated/src/createAnimatedComponent.js:27:40


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (36:6)

File: node_modules/react-native-reanimated/src/Transitioning.js:36:6


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (5:7)

File: node_modules/react-native-reanimated/src/core/AnimatedAlways.js:5:7


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (60:8)

File: node_modules/react-native-reanimated/src/core/AnimatedOperator.js:60:8


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedClockTest.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedCond.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedStartClock.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedStopClock.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:16)

File: node_modules/react-native-reanimated/src/core/AnimatedClock.js:6:16


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:21)

File: node_modules/react-native-reanimated/src/core/AnimatedCode.js:6:21


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:8)

File: node_modules/react-native-reanimated/src/core/AnimatedBlock.js:6:8


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:10)

File: node_modules/react-native-reanimated/src/core/AnimatedDebug.js:7:10


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:7)

File: node_modules/react-native-reanimated/src/core/AnimatedFunction.js:7:7


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (86:15)

File: node_modules/react-native-reanimated/src/core/AnimatedNode.js:86:15


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (8:7)

File: node_modules/react-native-reanimated/src/core/AnimatedSet.js:8:7


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (98:13)

File: node_modules/react-native-reanimated/src/core/AnimatedEvent.js:98:13

failed Building development bundle - 4.594s

@EvanBacon I saw that you've got reanimated web examples running, is there anything we must do before make it works?

I can take a look on it with some initial help.

PS: using 2.0.0-beta.0version

Thanks guys!

The text was updated successfully, but these errors were encountered:

felippepuhle · 2020-01-04T20:06:40Z

Apparently it's working on 3.0.0-beta.0, but I had to use "react-native-web": "^0.11.1" to avoid this another error:

Can't resolve 'react-native-web/dist/exports/ToolbarAndroid' in '/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-gesture-handler'

Also, I had to install expo cause I was getting Error: Cannot determine which native SDK version your project uses because the module expo is not installed too.

Should I close this?

slorber · 2020-01-05T20:13:35Z

Hi. I'm on holiday this week but maybe we can get in touch later so that I can help you. The 3. 0 is quite early and we are still figuring things out to make it work nicely Le sam. 4 janv. 2020 à 21:06, Felippe Rodrigo Puhle < [email protected]> a écrit :

…

Apparently it's working on 3.0.0-beta.0, but I had to use "react-native-web": "^0.11.1" to avoid this another error: Can't resolve 'react-native-web/dist/exports/ToolbarAndroid' in '/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-gesture-handler' Also, I had to install expo cause I was getting Error: Cannot determine which native SDK version your project uses because the module expo is not installed too. Should I close this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#24?email_source=notifications&email_token=AAFW6PXZPY4SLAAU7BMMW53Q4DT5BA5CNFSM4KCXS7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7HRI#issuecomment-570815429>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PWPDOP46UE5JHZ4E3DQ4DT5BANCNFSM4KCXS7AA> .

felippepuhle · 2020-01-06T01:38:21Z

Awesome, just let me know when you get some free time. For now 3.0 beta-0 is working, but I’m available if you guys need any help on bug fixes and improvements.

Thanks.

felippepuhle · 2020-01-07T02:15:02Z

In fact I was wrong, just tried to create a build and got a lot of errors again, both on react-native-gesture-handler and react-native-reanimated.

Almost 100% of the errors are:

Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled - Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
Support for the experimental syntax 'classProperties' isn't currently enabled - Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Also got some errors on some components, as:

/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-gesture-handler/touchables/TouchableWithoutFeedback.js: Unexpected token (5:2)

  3 |
  4 | const TouchableWithoutFeedback = React.forwardRef((props, ref) => (
> 5 |   <GenericTouchable ref={ref} {...props} />
    |   ^
  6 | ));

and

/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-reanimated/src/Transitioning.js: Unexpected token (36:6)

  34 |   return props => {
  35 |     return (
> 36 |       <TransitioningContext.Consumer>
     |       ^
  37 |         {context => <Comp context={context} {...props} />}
  38 |       </TransitioningContext.Consumer>
  39 |     );

It's working like a charm on dev env.

Thanks!

felippepuhle · 2020-01-08T16:42:02Z

I was able to solve this by adding the following code to gatsby-node.js, don't know if it's the right way:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /react-native-reanimated|react-native-gesture-handler/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["babel-preset-expo"],
            },
          },
        },
      ],
    },
  })

  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /hammerjs/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

This hammerjs stuff is needed cause it's using window for something, and SSR wasn't working

slorber · 2020-01-08T17:34:06Z

Hi Yeah I know about this, Evan Bacon made a fix recently for hammers but didn't update the lib yet. I'll fix this when I come back next week Le mer. 8 janv. 2020 à 17:42, Felippe Rodrigo Puhle < [email protected]> a écrit :

…

I was able to solve this by adding the following code to gatsby-node.js, don't know if it's the right way: exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { actions.setWebpackConfig({ module: { rules: [ { test: /react-native-reanimated|react-native-gesture-handler/, use: { loader: "babel-loader", options: { presets: ["babel-preset-expo"], }, }, }, ], }, }) if (stage === "build-html") { actions.setWebpackConfig({ module: { rules: [ { test: /hammerjs/, use: loaders.null(), }, ], }, }) } } This hammerjs stuff is needed cause it's using window for something, and SSR wasn't working — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#24?email_source=notifications&email_token=AAFW6PS67IPLHZM5GKYMXU3Q4X65VA5CNFSM4KCXS7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEINGCHI#issuecomment-572154141>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PXAVMFFWDHYOVQCHHLQ4X65VANCNFSM4KCXS7AA> .

slorber · 2020-01-25T15:41:49Z

Hi,

for react-native-gesture-handler, the next release should have the fix (1.5.4, not yet published?), in the meantime you can use https://github.com/software-mansion/react-native-gesture-handler.git#95bfb4df7ce9b1e222d50ead99eee7e27cd79043

see also software-mansion/react-native-gesture-handler#883

I'm going to take a look at reanimated soon.

So far the only stable gatsby/expo app published is being worked on here: expo/examples#39

felippepuhle · 2020-01-26T17:13:58Z

Thanks! Should we close this?

slorber · 2020-01-27T16:42:21Z

I'll let this open because I'm not sure reanimated works yet

JorgeQuevedoC · 2020-05-21T18:31:36Z

It is not working yet, I am trying to use React navigation drawer
/node_modules/react-native-reanimated/src/Transitioning.js
SyntaxError: /home/.../node_modules/react-native-reanimated/src/Transitioning.js: Unexpected token (36:6)

34 | return props => {
35 | return (

36 | <TransitioningContext.Consumer>
| ^
37 | {context => <Comp context={context} {...props} />}
38 | </TransitioningContext.Consumer>
39 | );

slorber · 2020-05-22T10:08:41Z

Hi,

Not sure exactly what is happening here but it looks like a transpilation problem. What's your setup/versions @JorgeQuevedoC ? Also, could you try to use 3.1 and move this plugin first in the gatsby plugins array?

I was able to use Transitioning in web code, but i had a warning saying transition is not supported on web yet.

ezekiel747 · 2021-05-02T17:26:27Z

any update on this?
i'm encountering something similar (see below)
Using latest expo (41) with latest version of gatsby-plugin-react-native-web (followed the steps in @EvanBacon 's tutorial. )

`failed Building static HTML for pages - 0.539s

ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

78 |
79 | const scheduleUpdates =

80 | Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
| ^
81 |
82 | export default class AnimatedNode {
83 | __nodeID;

WebpackError: ReferenceError: requestAnimationFrame is not defined

AnimatedNode.js:80
node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedNode.js:80:27`

slorber closed this as completed May 13, 2020

slorber reopened this May 13, 2020

cmaycumber mentioned this issue Feb 9, 2021

Docs nandorojo/moti#5

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-native-reanimated #24

react-native-reanimated #24

felippepuhle commented Jan 4, 2020 •

edited

Loading

felippepuhle commented Jan 4, 2020

slorber commented Jan 5, 2020 via email

felippepuhle commented Jan 6, 2020

felippepuhle commented Jan 7, 2020

felippepuhle commented Jan 8, 2020

slorber commented Jan 8, 2020 via email

slorber commented Jan 25, 2020

felippepuhle commented Jan 26, 2020

slorber commented Jan 27, 2020

JorgeQuevedoC commented May 21, 2020

slorber commented May 22, 2020

ezekiel747 commented May 2, 2021

react-native-reanimated #24

react-native-reanimated #24

Comments

felippepuhle commented Jan 4, 2020 • edited Loading

felippepuhle commented Jan 4, 2020

slorber commented Jan 5, 2020 via email

felippepuhle commented Jan 6, 2020

felippepuhle commented Jan 7, 2020

felippepuhle commented Jan 8, 2020

slorber commented Jan 8, 2020 via email

slorber commented Jan 25, 2020

felippepuhle commented Jan 26, 2020

slorber commented Jan 27, 2020

JorgeQuevedoC commented May 21, 2020

slorber commented May 22, 2020

ezekiel747 commented May 2, 2021

felippepuhle commented Jan 4, 2020 •

edited

Loading