[Native] Update StyledNativeComponent's ref logic to match StyledComponent

Version

• 1.4.4
• react: 16.0.0-alpha.6
• react-native: 0.43.2

Steps to reproduce

• create a styled react native component eg: const Container = styled.View
• render the component

Expected Behavior

no warnings

Actual Behavior

A warning stating:

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

I just upgrade my react-native project from 0.42 to 0.43 and since then I got this warning. I’ve looked into it a little bit and I think it is cause by this line. If I look at the StyleComponent.js file I can see a check for innerRef before settings the ref props (here)

In this commit the check for innerRef is removed but I’m not sure why, the description only states ‘Fix error’.

To fix this issue I think this change in StyledNativeComponent.js shoud work.

    render() {
      const { style, children, innerRef } = this.props // <-- grab innerRef from this.props
      const { generatedStyles } = this.state

      const propsForElement = { ...this.props }
      propsForElement.style = [generatedStyles, style]

      if (innerRef) { // <-- check if innerRef is set before setting the ref prop for propsForElement
        propsForElement.ref = this.generateRef()
        if (isTag(target)) delete propsForElement.innerRef
      }

      return createElement(target, propsForElement, children)
    }

[kitten]

@dbertella Can you open a new issue with the minimal code to reproduce this? Something is probably using the innerRef prop though, since I don’t see how this could be caused in any other way. However, the version of SC you’re using is a factor as well

[dbertella]

I can confirm that switching:

// Container.js
export default (props: Props) => <Container {...props} />;

to

class C extends React.Component {
  props: Props;
  render() {
    return <Container {...props} />;
  }
}

export default C;

Will solve the problem. Any thoughts about it?