[Native] Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Version

styled-components: 1.4.6 react-native: 0.44.0

Reproduction

This issue was reported already in #674 but it was considered fix there.
I used this repo to have a simple example:
https://github.com/dbertella/RNstyledPlayground

Steps to reproduce

Declaring a functional component ex:

// Container.js
export default (props) => <View {...props} />

Compose a styled-components with it ex

//index.ios.js
import Container from './Container';
...
const ContainerWithBorder = styled(Container)`
  borderBottomWidth: 1
`;

...
  render() {
    return (
      <ContainerWithBorder>
        <Text>This is my container</Text>
      </ContainerWithBorder>
    );
  }

Expected Behavior

I’m not using ref or innerRef anywhere, I’m not expecting this warning

Actual Behavior

It seems to happen when you have the js debugger active.
Stack trace:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Styled(undefined)`.
    in Unknown (created by Styled(undefined))
    in Styled(undefined) (created by RNstyledComponent)
    in RNstyledComponent
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

[kitten]

This seems to only be affecting v1.x: https://github.com/styled-components/styled-components/blob/master/src/models/StyledNativeComponent.js#L117

It should be fixed in v2, but we need to make sure not to break it in #764

I’m not sure whether it’s worth it to still fix it for v1

[kitten]

@dmueller39 no worries 😃 hope you’re happy with the change