Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bugfix] fix imports for react-native-web #2797

Merged

Conversation

@FiberJW
Copy link
Contributor

FiberJW commented Oct 9, 2019

Hello 馃憢馃従,

This bug surfaced as a result of trying to use styled-components in an Expo universal project (React Native + React Native Web). react-native-web doesn't use default exports like react-native official does, so importing using ES6 default imports breaks it for that react native renderer (TypeError: Cannot read property 'View' of undefined). Using require creates the desired behavior both in react-native and react-native-web without tripping up the navigator is deprecated and has been removed from this package. invariant that pops up when trying to use import * as reactNative from 'react-native'.

It's a pretty simple fix and all of the tests passed, so I hope that this is easy to review and possibly merge.

Thanks!

fixes #2624

-- Juwan Wheatley (@FiberJW)

React Native Web doesn't use default exports, so importing using ES6 imports breaks it for that react-native renderer. Using require creates the same behavior in react-native and react-native-web without tripping up the navigator invariant that pops up when trying to import  * as reactNative from 'react-native'.
@probablyup

This comment has been minimized.

Copy link
Contributor

probablyup commented Oct 10, 2019

LGTM but I'd like to publish it as a test version for people to try out before we merge into master

@probablyup

This comment has been minimized.

Copy link
Contributor

probablyup commented Oct 10, 2019

Try 4.4.0-reactnativewebfix and let me know!

@FiberJW

This comment has been minimized.

Copy link
Contributor Author

FiberJW commented Oct 10, 2019

Worked for me!

Steps:

  1. yarn global add expo-cli
  2. expo init scrnw-test
  3. cd scrnw-test && yarn add styled-components@test
  4. Change container view from RN StyleSheet to styled component using import styled from 'styled-components/native'
  5. expo start -w
  6. Expo CLI launches browser with RN web project. It works as expected
  7. Open up Expo Client on a mobile device and open your app there. It works as expected
  8. Profit 馃挴
@jtparrett

This comment has been minimized.

Copy link

jtparrett commented Oct 10, 2019

This worked perfectly for me 馃檶鉂わ笍

@danilobrinu

This comment has been minimized.

Copy link

danilobrinu commented Oct 10, 2019

@FiberJW can you try with this:

import reactNative from 'react-native'
const { StyleSheet } = reactNative;
@daniellmartins

This comment has been minimized.

Copy link

daniellmartins commented Oct 10, 2019

Doesn't work with SSR, for example Next.js

@FiberJW

This comment has been minimized.

Copy link
Contributor Author

FiberJW commented Oct 10, 2019

@danilobrinu

@FiberJW can you try with this:

import reactNative from 'react-native'
const { StyleSheet } = reactNative;

https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/index.js

@FiberJW

This comment has been minimized.

Copy link
Contributor Author

FiberJW commented Oct 10, 2019

@daniellmartins you're using Next.js+React Native Web+Styled Components? Not sure how because it doesn't work on master. This doesn't break any functionality with Next.JS; it creates the possibility to use it with Next.JS.

@probablyup

This comment has been minimized.

Copy link
Contributor

probablyup commented Oct 22, 2019

@FiberJW can you add a changelog entry and a similar PR for canary? thanks!

@probablyup probablyup added the 4.0 label Oct 22, 2019
@FiberJW

This comment has been minimized.

Copy link
Contributor Author

FiberJW commented Oct 23, 2019

done 馃憤

@probablyup probablyup merged commit 4cf2c5a into styled-components:master Oct 28, 2019
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@FiberJW

This comment has been minimized.

Copy link
Contributor Author

FiberJW commented Oct 28, 2019

Now that I look at it, this fix is already on Canary. I closed my PR accordingly. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can鈥檛 perform that action at this time.