Problem in setting calling ref inside context api consumer

[hyochan]

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
      Memory: 8.70 GB / 32.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
      Yarn: 1.12.3 - ~/.nvm/versions/node/v10.14.2/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 21, 22, 23, 24, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.3
        System Images: android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.7.0 => 16.7.0 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

I tried to call ref and set this in to react context's state. However, when I use this inside the consumer, ref is not called. See below demo for more detail.

Reproducible Demo

I've uploaded my code in repo. Hope you can test this out.
In MainStackNavigator.js

class RootNavigator extends React.Component<any, any> {
  static router = MainStackNavigator.router;

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'column' }}>
        <ProfileProvider>
          <MainStackNavigator
            navigation={this.props.navigation}
          />
          {/* ref is called */}
          <ProfileModal
            ref={(v) => {
              console.log('v', v);
            }}
          />;
          {/* ref is not called */}
          <ProfileConsumer>
            {
              (data) => {
                console.log(data);
                <ProfileModal
                  ref={(v) => {
                    console.log('v', v);
                    data.modal = v;
                  }}
                  onChat={ () => data.actions.onChatPressed(this.props.navigation) }
                />;
              }
            }
          </ProfileConsumer>
        </ProfileProvider>
      </View>
    );
  }
}

[hyochan]

I've managed to make above work by putting ProfileModal inside Provider. I am not sure this is a workaround or was expected behavior.

[rickhanlonii]

Hey @hyochan, thanks for filing! This is expected, consumers need to be descendants of their provider (see https://reactjs.org/docs/context.html#contextprovider)