Skip to content

Commit

Permalink
Deprecate removeListener APIs (#2578)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yungsters
yungsters committed Apr 5, 2021
1 parent 52c8980 commit 772a555
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 121 deletions.
91 changes: 35 additions & 56 deletions docs/accessibilityinfo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,17 @@ const App = () => {
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
useEffect(() => {
AccessibilityInfo.addEventListener(
const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
"reduceMotionChanged",
handleReduceMotionToggled
reduceMotionEnabled => {
setReduceMotionEnabled(reduceMotionEnabled);
}
);
AccessibilityInfo.addEventListener(
const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
"screenReaderChanged",
handleScreenReaderToggled
screenReaderEnabled => {
setScreenReaderEnabled(screenReaderEnabled);
}
);
AccessibilityInfo.isReduceMotionEnabled().then(
Expand All @@ -42,25 +46,11 @@ const App = () => {
);
return () => {
AccessibilityInfo.removeEventListener(
"reduceMotionChanged",
handleReduceMotionToggled
);
AccessibilityInfo.removeEventListener(
"screenReaderChanged",
handleScreenReaderToggled
);
reduceMotionChangedSubscription.remove();
screenReaderChangedSubscription.remove();
};
}, []);
const handleReduceMotionToggled = reduceMotionEnabled => {
setReduceMotionEnabled(reduceMotionEnabled);
};
const handleScreenReaderToggled = screenReaderEnabled => {
setScreenReaderEnabled(screenReaderEnabled);
};
return (
<View style={styles.container}>
<Text style={styles.status}>
Expand Down Expand Up @@ -101,13 +91,17 @@ class AccessibilityStatusExample extends Component {
};
componentDidMount() {
AccessibilityInfo.addEventListener(
this.reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
'reduceMotionChanged',
this._handleReduceMotionToggled
reduceMotionEnabled => {
this.setState({ reduceMotionEnabled });
}
);
AccessibilityInfo.addEventListener(
this.screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
'screenReaderChanged',
this._handleScreenReaderToggled
screenReaderEnabled => {
this.setState({ screenReaderEnabled });
}
);
AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
Expand All @@ -119,52 +113,37 @@ class AccessibilityStatusExample extends Component {
}
componentWillUnmount() {
AccessibilityInfo.removeEventListener(
'reduceMotionChanged',
this._handleReduceMotionToggled
);
AccessibilityInfo.removeEventListener(
'screenReaderChanged',
this._handleScreenReaderToggled
);
this.reduceMotionChangedSubscription.remove();
this.screenReaderChangedSubscription.remove();
}
_handleReduceMotionToggled = reduceMotionEnabled => {
this.setState({ reduceMotionEnabled });
};
_handleScreenReaderToggled = screenReaderEnabled => {
this.setState({ screenReaderEnabled });
};
render() {
return (
<View style={this.styles.container}>
<Text style={this.styles.status}>
<View style={styles.container}>
<Text style={styles.status}>
The reduce motion is{' '}
{this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}.
</Text>
<Text style={this.styles.status}>
<Text style={styles.status}>
The screen reader is{' '}
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
</Text>
</View>
);
}
styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
status: {
margin: 30,
},
});
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
status: {
margin: 30,
},
});
export default AccessibilityStatusExample;
```

Expand Down Expand Up @@ -273,7 +252,7 @@ Query whether a screen reader is currently enabled. Returns a promise which reso
static removeEventListener(eventName, handler)
```

Remove an event handler.
> **Deprecated.** Use the `remove()` method on the event subscription returned by [`addEventListener()`](#addeventlistener).
---

Expand Down
2 changes: 1 addition & 1 deletion docs/appearance.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,4 @@ Add an event handler that is fired when appearance preferences change.
static removeChangeListener(listener)
```

Remove an event handler.
> **Deprecated.** Use the `remove()` method on the event subscription returned by [`addChangeListener()`](#addchangelistener).
57 changes: 27 additions & 30 deletions docs/appstate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,24 @@ const AppStateExample = () => {
const [appStateVisible, setAppStateVisible] = useState(appState.current);
useEffect(() => {
AppState.addEventListener("change", _handleAppStateChange);
const subscription = AppState.addEventListener("change", nextAppState => {
if (
appState.current.match(/inactive|background/) &&
nextAppState === "active"
) {
console.log("App has come to the foreground!");
}
appState.current = nextAppState;
setAppStateVisible(appState.current);
console.log("AppState", appState.current);
});
return () => {
AppState.removeEventListener("change", _handleAppStateChange);
subscription.remove();
};
}, []);
const _handleAppStateChange = (nextAppState) => {
if (
appState.current.match(/inactive|background/) &&
nextAppState === "active"
) {
console.log("App has come to the foreground!");
}
appState.current = nextAppState;
setAppStateVisible(appState.current);
console.log("AppState", appState.current);
};
return (
<View style={styles.container}>
<Text>Current state is: {appStateVisible}</Text>
Expand Down Expand Up @@ -89,23 +87,24 @@ class AppStateExample extends Component {
};
componentDidMount() {
AppState.addEventListener("change", this._handleAppStateChange);
this.appStateSubscription = AppState.addEventListener(
"change",
nextAppState => {
if (
this.state.appState.match(/inactive|background/) &&
nextAppState === "active"
) {
console.log("App has come to the foreground!");
}
this.setState({ appState: nextAppState });
}
);
}
componentWillUnmount() {
AppState.removeEventListener("change", this._handleAppStateChange);
this.appStateSubscription.remove();
}
_handleAppStateChange = nextAppState => {
if (
this.state.appState.match(/inactive|background/) &&
nextAppState === "active"
) {
console.log("App has come to the foreground!");
}
this.setState({ appState: nextAppState });
};
render() {
return (
<View style={styles.container}>
Expand Down Expand Up @@ -163,8 +162,6 @@ addEventListener(type, handler);

Add a handler to AppState changes by listening to the `change` event type and providing the handler

TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate `addEventListener` and `removeEventListener` and use `addListener` and `listener.remove()` directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).

---

### `removeEventListener()`
Expand All @@ -173,7 +170,7 @@ TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate
removeEventListener(type, handler);
```

Remove a handler by passing the `change` event type and the handler
> **Deprecated.** Use the `remove()` method on the event subscription returned by [`addEventListener()`](#addeventlistener).
## Properties

Expand Down
19 changes: 10 additions & 9 deletions docs/dimensions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,15 @@ const screen = Dimensions.get("screen");
const App = () => {
const [dimensions, setDimensions] = useState({ window, screen });
const onChange = ({ window, screen }) => {
setDimensions({ window, screen });
};
useEffect(() => {
Dimensions.addEventListener("change", onChange);
const subscription = Dimensions.addEventListener(
"change",
({ window, screen }) => {
setDimensions({ window, screen });
}
);
return () => {
Dimensions.removeEventListener("change", onChange);
subscription.remove();
};
});
Expand Down Expand Up @@ -90,11 +91,11 @@ class App extends Component {
};
componentDidMount() {
Dimensions.addEventListener("change", this.onChange);
this.dimensionsSubscription = Dimensions.addEventListener("change", this.onChange);
}
componentWillUnmount() {
Dimensions.removeEventListener("change", this.onChange);
this.dimensionsSubscription.remove();
}
render() {
Expand Down Expand Up @@ -167,7 +168,7 @@ Example: `const {height, width} = Dimensions.get('window');`
static removeEventListener(type, handler)
```

Remove an event handler.
> **Deprecated.** Use the `remove()` method on the event subscription returned by [`addEventListener()`](#addeventlistener).
---

Expand Down
45 changes: 21 additions & 24 deletions docs/keyboard.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,22 @@ import React, { useState, useEffect } from "react";
import { Keyboard, Text, TextInput, StyleSheet, View } from "react-native";
const Example = () => {
const [keyboardStatus, setKeyboardStatus] = useState(undefined);
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
setKeyboardStatus("Keyboard Shown");
});
const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
setKeyboardStatus("Keyboard Hidden");
});
// cleanup function
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
showSubscription.remove();
hideSubscription.remove();
};
}, []);
const [keyboardStatus, setKeyboardStatus] = useState(undefined);
const _keyboardDidShow = () => setKeyboardStatus("Keyboard Shown");
const _keyboardDidHide = () => setKeyboardStatus("Keyboard Hidden");
return (
<View style={style.container}>
<TextInput
Expand Down Expand Up @@ -78,27 +79,23 @@ class Example extends Component {
};
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
this.keyboardDidShowSubscription = Keyboard.addListener(
'keyboardDidShow',
this._keyboardDidShow,
() => {
this.setState({ keyboardStatus: 'Keyboard Shown' });
},
);
this.keyboardDidHideListener = Keyboard.addListener(
this.keyboardDidHideSubscription = Keyboard.addListener(
'keyboardDidHide',
this._keyboardDidHide,
() => {
this.setState({ keyboardStatus: 'Keyboard Hidden' });
},
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow = () => {
this.setState({ keyboardStatus: 'Keyboard Shown' });
}
_keyboardDidHide = () => {
this.setState({ keyboardStatus: 'Keyboard Hidden' });
this.keyboardDidShowSubscription.remove();
this.keyboardDidHideSubscription.remove();
}
render() {
Expand Down Expand Up @@ -183,7 +180,7 @@ This can be any of the following:
static removeListener(eventName, callback)
```

Removes a specific listener.
> **Deprecated.** Use the `remove()` method on the event subscription returned by [`addListener()`](#addlistener).
**Parameters:**

Expand Down
2 changes: 1 addition & 1 deletion docs/linking.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ The method returns a `Promise` object. If the user confirms the open dialog or t
removeEventListener(type, handler);
```

Remove a handler by passing the `url` event type and the handler.
> **Deprecated.** Use the `remove()` method on the event subscription returned by [`addEventListener()`](#addeventlistener).
---

Expand Down

0 comments on commit 772a555

Please sign in to comment.