styled-components: Cannot create styled-component for component [object Object]

So, here are what we did, and it somehow worked:

• Learned through https://github.com/styled-components/styled-components/issues/1449#issuecomment-420087359 (changed everywhere in the codebase)

// fails
const ExtendedComponent = styled(OriginalComponent)`
  [Your awesome styles here]
`;

// works
const ExtendedComponent = styled(props => <OriginalComponent {...props} />)`
  [Your awesome styles here]
`;

• I removed babel-polyfill in all places (but had to add it to one other file)

• We were importing styled-components in different places in two different ways. In the docs for styled-components, we found this about using the metro bundler for installation. https://www.styled-components.com/docs/basics#simpler-usage-with-the-metro-bundler

This seems to only be happening on Debug Android builds, NOT release/production builds.

Here is an example of how we are creating a styled component.

const Divider = styled.View`
  width: 100%
  height: 1
  backgroundColor: ${colors.greyLighter}
`;

Now lets look at how React Native views are represented…

import { View } from "react-native";
console.log("RN View == ", JSON.stringify(View));

For debug builds, this returns View == ', '{"$$typeof":60112}' //object representing a forward ref For release builds, this returns View == ', 'RCTView' //string

Which will configure the styled components for each React Native view here…

If you take a look at the react-is variables, you will see it will initialize the following const…

var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;

This will get set to { _k: 'Symbol(react.forward_ref)_k.i0kqk9t5s8' } for both release and debug builds.

Now lets look at the react-is isValidElementType() function, which is called from here

function isValidElementType(type) {
  return (
    typeof type === "string" || // RELEASE BUILDS WILL EARLY RETURN ON THIS CHECK
    typeof type === "function" ||
    // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
    type === REACT_FRAGMENT_TYPE ||
    type === REACT_CONCURRENT_MODE_TYPE ||
    type === REACT_PROFILER_TYPE ||
    type === REACT_STRICT_MODE_TYPE ||
    type === REACT_SUSPENSE_TYPE ||
    (typeof type === "object" &&
      type !== null &&
      (type.$$typeof === REACT_LAZY_TYPE ||
        type.$$typeof === REACT_MEMO_TYPE ||
        type.$$typeof === REACT_PROVIDER_TYPE ||
        type.$$typeof === REACT_CONTEXT_TYPE ||
        type.$$typeof === REACT_FORWARD_REF_TYPE)) // == 60112
  );
}

For release builds, it will return early after hitting this line, because the tag param is RCTView

typeof type === "string"

But for debug builds, it will end up checking the Symbol references, which are NOT set correctly in debug builds.

ex…

type.$$typeof === `{ _k: 'Symbol(react.forward_ref)_k.i0kqk9t5s8' }`
//instead of what it should be checking, is this...
type.$$typeof === 60112

If I hack react-is to not use the symbols, and simply use the hex values (the defaults), then it works on debug builds.

I am not sure what the correct solution is here… I hope this puts someone on the right track to fixing it 😃

My guess is multiple versions of react-is are installed and the symbols are getting clobbered as mentioned above. If you install it as a dependency in your project, it should dedupe and the issue will go away.