Description
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. :)