[React-Native] Expo Web doesn't support `styled.Component` notation

Environment

System:

• OS: macOS 10.15
• CPU: (8) x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz
• Memory: 1.31 GB / 16.00 GB
• Shell: 5.7.1 - /bin/zsh

Binaries:

• Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
• Yarn: 1.15.2 - /usr/local/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• styled-components: ^4.3.1 => 4.3.1

Reproduction

1. Create a new project with Expo, using TypeScript.
2. Add styled-components as dependency.
3. The target "web" should be specified in app.json, like so:

"platforms": [
  "ios",
  "android",
  "web"
],

Steps to reproduce

1. Add the following line to any used file: import styled from 'styled-components/native.
2. Use const Test = styled.View somewhere.

Expected Behavior

Module builds, everything compiles and I get my styled component.

Actual Behavior

Module build warns (does not error for some reason):

Attempted import error: 'react-native' does not contain a default export (imported as 'reactNative').

in

styled-components/native/dist/styled-components.native.esm.js

It works fine if I import the component separately and use styled() as a function, like so:

import styled from 'styled-components';
import { View } from 'react-native';

const Test = styled(View) //...

[geelen]

Oooh so I was able to confirm that this is fixed in v5 but only if you import styled from 'styled-components/native' (not import styled from 'styled-components')

Same behaviour with styled(Text) with the same import.

With import styled from 'styled-components', on Expo web you get the DOM version, which is still busted in the same way:

Switching to styled(Text) “works”, but treats the Text component like a web component, passing className to it, which ends up with wonky styles:

(Lol, just figured out that that was because I had line-height: 24; not line-height: 24px;. But that shows you about how the DOM and RN versions of SC differ, hey?)

You also get this warning:

Which is discussed in this RNW issue: https://github.com/necolas/react-native-web/issues/1146

As for styled-components/native vs styled-components, I couldn’t remember when that changed. Turns out it was part of the v3 release 18 months ago. I’m guessing anyone who’s done the RNW conversion until this point has been accidentally injecting className props and things have been mostly ok, until now.

TL;DR: v5 works as long as you import styled-components/native!

(Edit: posted my code at https://github.com/geelen/expo-demo-project if anyone needs it)

[geelen]

Found another way, since something we were doing in our app was conflicting with the hooks implementation of v5.

You can stub out the default export in RNW like this:

// config-overrides.js from react-app-rewired

module.exports = function(config, env) {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'react-native': path.resolve(__dirname, 'mocks/react-native')
    }
  };

  return config;
};

// mocks/react-native.js
import * as RN from 'react-native-web';
export default RN;

export {
  createElement,
  findNodeHandle,
  render,
  unmountComponentAtNode, // modules
  processColor,
  NativeModules,
  TextPropTypes,
  ViewPropTypes, // APIs
  AccessibilityInfo,
  Alert,
  Animated,
  AppRegistry,
  AppState,
  AsyncStorage,
  BackHandler,
  Clipboard,
  DeviceInfo,
  Dimensions,
  Easing,
  I18nManager,
  InteractionManager,
  Keyboard,
  LayoutAnimation,
  Linking,
  NativeEventEmitter,
  NetInfo,
  PanResponder,
  PixelRatio,
  Platform,
  Share,
  StyleSheet,
  UIManager,
  Vibration, // components
  ActivityIndicator,
  Button,
  CheckBox,
  FlatList,
  Image,
  ImageBackground,
  KeyboardAvoidingView,
  ListView,
  Modal,
  Picker,
  ProgressBar,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  SectionList,
  Slider,
  StatusBar,
  SwipeableFlatList,
  SwipeableListView,
  Switch,
  Text,
  TextInput,
  Touchable,
  TouchableHighlight,
  TouchableNativeFeedback,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  VirtualizedList,
  YellowBox, // propTypes
  ColorPropType,
  EdgeInsetsPropType,
  PointPropType, // compat (components)
  DatePickerIOS,
  DrawerLayoutAndroid,
  ImageEditor,
  ImageStore,
  InputAccessoryView,
  MaskedViewIOS,
  NavigatorIOS,
  PickerIOS,
  ProgressBarAndroid,
  ProgressViewIOS,
  SegmentedControlIOS,
  SnapshotViewIOS,
  TabBarIOS,
  ToastAndroid,
  ToolbarAndroid,
  ViewPagerAndroid,
  WebView, // compat (apis)
  ActionSheetIOS,
  AlertIOS,
  CameraRoll,
  DatePickerAndroid,
  ImagePickerIOS,
  PermissionsAndroid,
  PushNotificationIOS,
  Settings,
  StatusBarIOS,
  Systrace,
  TimePickerAndroid,
  TVEventHandler,
  VibrationIOS
} from 'react-native-web';

Ain’t pretty, but it works. Gets me styled-components v4.3.2 working with react-native-web v0.11.4