Does not work with react-native@0.56

[mgcrea]

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
• Memory: 441.04 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
• Yarn: 1.9.4 - /usr/local/bin/yarn
• npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• babel-plugin-styled-components: ^1.6.2 => 1.6.2
• styled-components: ^4.0.0-beta.0 => 4.0.0-beta.0

Reproduction

import React from 'react';
import styled from 'styled-components';

const StyledView = styled.View`
  background-color: papayawhip;
`;

const StyledText = styled.Text`
  color: palevioletred;
`;

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    );
  }
}

export default MyReactNativeComponent;

Steps to reproduce

Run in react-native project with version >= 0.56

Expected Behavior

Does not crash

Actual Behavior

Invariant Violation: Text strings must be rendered within a <Text> component.

This error is located at:
    in Text
    in BaseStyledNativeComponent (created by ForwardRef)
    in RCTView (at View.js:43)
    in HomeScreen (at SceneView.js:9)
    in SceneView (at StackViewLayout.js:481)
    in RCTView (at View.js:43)
    in AnimatedComponent (at StackViewCard.js:48)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:506)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:40)
    in RCTView (at View.js:43)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:59)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at App.js:29)
    in App (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

createTextInstance
    index.bundle?platform=ios&dev=true&minify=false:18290:18
completeWork
    index.bundle?platform=ios&dev=true&minify=false:23314:64
completeUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:24872:36
performUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:25015:36
workLoop
    index.bundle?platform=ios&dev=true&minify=false:25025:47
renderRoot
    index.bundle?platform=ios&dev=true&minify=false:25058:21
performWorkOnRoot
    index.bundle?platform=ios&dev=true&minify=false:25619:23
performWork
    index.bundle?platform=ios&dev=true&minify=false:25551:30
performSyncWork
    index.bundle?platform=ios&dev=true&minify=false:25526:20
requestWork
    index.bundle?platform=ios&dev=true&minify=false:25432:26
scheduleWork
    index.bundle?platform=ios&dev=true&minify=false:25294:28
scheduleRootUpdate
    index.bundle?platform=ios&dev=true&minify=false:25822:21
render
    index.bundle?platform=ios&dev=true&minify=false:26277:26
renderApplication
    index.bundle?platform=ios&dev=true&minify=false:64267:59
run
    index.bundle?platform=ios&dev=true&minify=false:63947:28
runApplication
    index.bundle?platform=ios&dev=true&minify=false:63997:28
__callFunction
    index.bundle?platform=ios&dev=true&minify=false:2608:49
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:2385:31
__guard
    index.bundle?platform=ios&dev=true&minify=false:2561:15
callFunctionReturnFlushedQueue
    index.bundle?platform=ios&dev=true&minify=false:2384:21

Related to:

facebook/react-native#20084
facebook/react#13211

[quantizor]

What in tarnation... so this is an incidental RN 0.56 issue not actually a s-c beta issue correct?

[Aidurber]

I've just booted up a fresh RN@0.56.0 and tried to replicate, it works fine for me following your reproduction steps, @mgcrea. I pasted your code verbatim.

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
• Memory: 136.41 MB / 16.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 10.5.0 - /usr/local/bin/node
• Yarn: 1.7.0 - /usr/local/bin/yarn
• npm: 6.1.0 - /usr/local/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• babel-plugin-styled-components: 1.6.2 => 1.6.2
• styled-components: 4.0.0-beta.0 => 4.0.0-beta.0

[mgcrea]

Did investigate a bit with a fresh project and the issue arise when I add the babel-plugin-styled-components to my .babelrc, eg:

{
  "presets": ["react-native"],
  "plugins": ["styled-components"]
}

Try with:

node_modules/.bin/react-native start --reset-cache

[Aidurber]

@mgcrea Boom, I can now replicate. I made a typo in my babelrc. I did:

    "plugins": ["babel-plugin-styled-components"]

Instead of:

    "plugins": ["styled-components"]

My apologies!

[quantizor]

That should be equivalent in Babel 6?

[Aidurber]

@probablyup React Native 0.56.0 is Babel 7 beta.

[quantizor]

Any chance you could post a repro using expo or something? I don't use RN, personally.

[Aidurber]

@probablyup Apologies for the late reply.
You can find a demo repo here:
https://github.com/Aidurber/styledcomponents-bug

Getting up and running

• XCode installed
• Run yarn install
• Run react-native run-ios

Let me know if you have any issues getting up and running.

[tobiastornros]

Same error with React native 0.57.1. But only if I use React Native Text component inside a styled-component View.

import React from 'react';
import { Text } from 'react-native';
import styled from 'styled-components';

const StyledView = styled.View`
  background-color: papayawhip;
`;

const StyledText = styled.Text`
  color: palevioletred;
`;

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello</StyledText>
        <Text>World!</Text>
      </StyledView>
    );
  }
}

export default MyReactNativeComponent;

[Aidurber]

@tobiastornros Do you have babel-plugin-styled-components installed at all?

[tobiastornros]

@Aidurber No

[quantizor]

Not sure what's going on with your setup, but I just tested it locally and it works fine so closing. If you can come up with a minimal reproduction, feel free to make a new issue.