Open felippepuhle opened 4 years ago
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
expois not installed
too.
Should I close this?
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 < notifications@github.com> 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 https://github.com/slorber/gatsby-plugin-react-native-web/issues/24?email_source=notifications&email_token=AAFW6PXZPY4SLAAU7BMMW53Q4DT5BA5CNFSM4KCXS7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7HRI#issuecomment-570815429, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFW6PWPDOP46UE5JHZ4E3DQ4DT5BANCNFSM4KCXS7AA .
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.
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:
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!
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
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 < notifications@github.com> 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 https://github.com/slorber/gatsby-plugin-react-native-web/issues/24?email_source=notifications&email_token=AAFW6PS67IPLHZM5GKYMXU3Q4X65VA5CNFSM4KCXS7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEINGCHI#issuecomment-572154141, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFW6PXAVMFFWDHYOVQCHHLQ4X65VANCNFSM4KCXS7AA .
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 https://github.com/software-mansion/react-native-gesture-handler/issues/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: https://github.com/expo/examples/pull/39
Thanks! Should we close this?
I'll let this open because I'm not sure reanimated works yet
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 |
| ^ 37 | {context => <Comp context={context} {...props} />} 38 | </TransitioningContext.Consumer> 39 | );
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.
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
Is this plugin compatible with
react-native-reanimated
? I don't know what's happening under the hoods, but declaring a simplenew Animated.Value(0)
throw a lot of errors:Browser
Terminal
@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.0
versionThanks guys!