[0.49.1] Statically defined variables in a component do not persist after mounting

[Brian-Kaplan]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 7.7.1
Yarn: Not Found
npm: 5.0.3
Watchman: 4.7.0
Xcode: Xcode 9.0 Build version 9A235
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.1 => 0.49.1

Steps to Reproduce

I create a component called StaticComponent that declares a static class variable called instance to be null. Once this component is mounted it will set the static class variable instance to be itself.

class StaticComponent extends Component {
  static instance = null;

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    StaticComponent.instance = this;
  }
...

Then any other component that renders this component should be able to get the exact instance that was created upon mounting. What is returned every time is null...

export default class App extends Component {
  onPress() {
    // instance is always null
    const instance = StaticComponent.instance;
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this.onPress} />
        <StaticComponent />
      </View>
    );
  }
}

I can confirm that this worked in 0.48.2. After upgrading to 0.49.1 it fails. I can recreate the issue using a fresh project from of react-native init.

If you actually go to the snack below you'll see that the instance is defined as it should be. Snack is still on react-native 0.48.0 so that's why. This blog post talks about the versions they're on.

"I am happy to announce... Expo SDK 21.0.0! It is based on React Native 0.48 “August”.
https://blog.expo.io/expo-sdk-21-0-0-is-now-available-be33b79921b7

If I copy paste the code I put into the snack back into my editor then run it with 0.49.1, the StaticComponent is not defined when it should be.

Reproducible Demo

https://snack.expo.io/Sy6djeN3W

[nicholasmarais1158]

A more simple example to demonstrate this issue. Appears to be an issue when using class variables in jsx/tsx.

import React, {
  Component,
} from 'react';
import {
  View,
} from 'react-native';

class TestComponent extends Component<{}, {}> {
  static SIZE = 100;

  public render(): JSX.Element {
    return <View
      style={{
        width: TestComponent.SIZE,
        height: TestComponent.SIZE,
        backgroundColor: 'red'
      }}/>
  }
}

export default TestComponent;

[Brian-Kaplan]

TestComponent.SIZE is null when given to the style?

[nicholasmarais1158]

undefined to be specific.

10-16 15:15:51.747 7406-9094/com.example I/ReactNativeJS: TestComponent.SIZE = undefined

import React, {
  Component,
} from 'react';
import {
  View,
} from 'react-native';

class TestComponent extends Component<{}, {}> {
  static SIZE = 100;

  public render(): JSX.Element {
    console.log(`TestComponent.SIZE = ${TestComponent.SIZE}`);

    return <View
      style={{
        width: TestComponent.SIZE,
        height: TestComponent.SIZE,
        backgroundColor: 'red'
      }}/>
  }
}

export default TestComponent;

[nicholasmarais1158]

I'm using the following workaround until this issue is explained and/or fixed;

import React, {
  Component,
} from 'react';
import {
  View,
} from 'react-native';

const SIZE = 100; // Solution if this constant is used outside of this component

class TestComponent extends Component<{}, {}> {
  private readonly SIZE_INTERNAL = 100; // Solution if this constant is used only within this component

  public render(): JSX.Element {
    console.log(`this.SIZE_INTERNAL = ${this.SIZE_INTERNAL}`);
    console.log(`SIZE = ${SIZE}`);

    return <View
      style={{
        width: this.SIZE_INTERNAL,
        height: this.SIZE_INTERNAL,
        backgroundColor: 'red'
      }}/>
  }
}

export default TestComponent;
export {
  SIZE as SIZE_EXTERNAL,
}

10-17 08:09:52.931 4104-4427/com.example I/ReactNativeJS: this.SIZE_INTERNAL = 100
10-17 08:09:52.943 4104-4427/com.example I/ReactNativeJS: SIZE = 100

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[aarondail]

Could we have this reopened, it is an actual problem with a simple repro?

[hramos]

I suspect this is more of an issue in React. I'm reopening, though I think you might have better luck checking out https://reactjs.org/community/support.html for pointers.

[vTrip]

Also getting undefined when accessing statics on a component - please keep this issue open

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[react-native-bot]

It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

[darksheepgod]

Still happens on v0.55.4.
Should be a Metro bug.

It only occurs when using static properties. For now just use static methods instead.
e.g. change "SIZE" to getSIZE() and setSIZE()

[phips28]

still happens on v0.56.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.