|
8 | 8 | * @flow
|
9 | 9 | */
|
10 | 10 |
|
11 |
| -import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter'; |
12 | 11 | import {Dimensions, Text, useWindowDimensions} from 'react-native';
|
13 | 12 | import * as React from 'react';
|
| 13 | +import {useState, useEffect} from 'react'; |
14 | 14 |
|
15 |
| -class DimensionsSubscription extends React.Component< |
16 |
| - {dim: string, ...}, |
17 |
| - {dims: Object, ...}, |
18 |
| -> { |
19 |
| - state: {dims: any, ...} = { |
20 |
| - dims: Dimensions.get(this.props.dim), |
21 |
| - }; |
| 15 | +type Props = {dim: string}; |
22 | 16 |
|
23 |
| - _dimensionsSubscription: ?EventSubscription; |
| 17 | +function DimensionsSubscription(props: Props) { |
| 18 | + const [dims, setDims] = useState(() => Dimensions.get(props.dim)); |
24 | 19 |
|
25 |
| - componentDidMount() { |
26 |
| - this._dimensionsSubscription = Dimensions.addEventListener( |
27 |
| - 'change', |
28 |
| - dimensions => { |
29 |
| - this.setState({ |
30 |
| - dims: dimensions[this.props.dim], |
31 |
| - }); |
32 |
| - }, |
33 |
| - ); |
34 |
| - } |
| 20 | + useEffect(() => { |
| 21 | + const subscription = Dimensions.addEventListener('change', dimensions => { |
| 22 | + setDims(dimensions[props.dim]); |
| 23 | + }); |
35 | 24 |
|
36 |
| - componentWillUnmount() { |
37 |
| - this._dimensionsSubscription?.remove(); |
38 |
| - } |
| 25 | + return () => subscription.remove(); |
| 26 | + }, [props.dim]); |
39 | 27 |
|
40 |
| - render(): React.Node { |
41 |
| - return <Text>{JSON.stringify(this.state.dims, null, 2)}</Text>; |
42 |
| - } |
| 28 | + return <Text>{JSON.stringify(dims, null, 2)}</Text>; |
43 | 29 | }
|
44 | 30 |
|
45 | 31 | const DimensionsViaHook = () => {
|
|
0 commit comments