Removing TimerMixin, SubscribableMixin from components.

[elicwhite]

As part of our goal to modernize and type our core components, we need to migrate off of mixins. This task is to track the work to remove TimerMixin from our codebase.

This is step 2. Step 1 can be found here.

TimerMixin enables components to call functions like this.setTimeout and have that timeout automatically cleared when the component is unmounted. In order to remove TimerMixin from these components, we will need to do this work manually.

The following are the individual files that currently use TimerMixin which will need to be migrated. Each file should be migrated in its own PR and each file is about the size of a good first issue to learn and get familiar with a part of the React Native codebase. If you’d like to convert one, pick one from the list, comment on this issue that you are interested in converting it, and follow the tips below for help successfully updating that file.

• IntegrationTests/ReactContentSizeUpdateTest.js
• IntegrationTests/TimersTest.js
• Libraries/Components/TextInput/TextInput.js
• Libraries/Components/Touchable/TouchableOpacity.js
• Libraries/Components/Touchable/TouchableWithoutFeedback.js
• Libraries/Experimental/SwipeableRow/SwipeableRow.js
• Libraries/Lists/ListView/ListView.js (in progress)
• RNTester/js/ProgressBarAndroidExample.android.js
• RNTester/js/ProgressViewIOSExample.js
• RNTester/js/TimerExample.js

Here is an example component that uses setTimeout from TimerMixin.

createReactClass({
  mixins: [TimerMixin],

  render() {
    return (
      <View
        onPress={() => {
          this.setTimeout(() => {
            alert('hi');
          });
        }}>
        Whee
      </View>
    );
  },
});

This would need to be changed to:

createReactClass({
  _timeoutID: (null: ?TimeoutID),

  componentWillUnmount() {
    if (this._timeoutID != null) {
      clearTimeout(this._timeoutID);
    }
  },

  render() {
    return (
      <View
        onPress={() => {
          this._timeoutID = setTimeout(() => {
            alert('hi');
          });
        }}>
        Whee
      </View>
    );
  },
});

For a more complete example you can look at this commit which removes TimerMixin from TimerExample in RNTester.

When submitting a PR removing an instance of TimerMixin, it is important to include a good test plan. This test plan helps reviewers understand the work you did to verify that your changes are correct and complete. Since this changes the runtime logic of these components, it is important that these changes are tested in an app. For most of these components, you should be able to validate your change via RNTester. If there is nothing that exists as-is in RNTester which gives you confidence in your change, adding something to RNTester would be greatly appreciated. :)

[jerod-estapa]

I'll take IntegrationTests/TimersTest.js.

[exced]

Hey, I'll take Libraries/Lists/ListView/ListView.js

[danibonilha]

Hi! I'll take Libraries/Components/Touchable/TouchableOpacity.js = )

[Thomas0c]

I'll grab Libraries/Components/Touchable/TouchableWithoutFeedback.js.

[gvarandas]

I'll take Libraries/Experimental/SwipeableRow/SwipeableRow.js 🤖

[richardcann]

Hi! I'll take Libraries/Components/TextInput/TextInput.js

[nissy-dev]

Hi!
I'll take RNTester/js/ProgressBarAndroidExample.android.js

[peaonunes]

Hello, I will take IntegrationTests/ReactContentSizeUpdateTest.js :)

[gvarandas]

I'll get RNTester/js/ProgressViewIOSExample.js 🤖

[ronal2do]

Are they done? Is there none left for me?    😭😭😭

[sopranolinist]

Missed this one due to life. @TheSavior please keep me in the loop for future contributions on this project, thanks!

[danibonilha]

I can take that one! (TimersTest)

[danibonilha]

@TheSavior I've just started, but I'm seeing it's a big one, if you guys are in a hurry let me know that I will pass it forward because it's release week at work and I don't have a lot of free time, if not, I can take it on the weekend.

[danibonilha]

I'm sorry, I'm working overtime =/. So IntegrationTests/TimersTest.js is available again if anyone wants to grab it.

[exced]

No worries :)
I can take IntegrationTests/TimersTest.js

[RSNara]

@exced and @ronal2do, It looks like there was a conflict for IntegrationTests/TimersTest.js, and I independently reviewed both without realizing they were doing the same thing. 😅

Before I noticed, I imported #21748 internally and made a few modifications to it. @exced, I hope it's okay if I close #21772 and land #21748 instead, since #21748 is already further along in the fb-internal landing process. Thank you to both of you for launching the PRs! But in the future, we should be more careful about these conflicts. 😔

[elicwhite]

You are all amazing. Thanks for all the contributions. This issue is done!