Skip to content

Commit cc4e4c7

Browse files
mateoguzmanafacebook-github-bot
mateoguzmana
authored and
facebook-github-bot
committed
Fix RNTester strict mode warnings (facebook#48620)
Summary: Follow up from facebook#48619. While investigating facebook#22186, some false positives showed up as some of the examples also have non-strict mode compatible code. In this PR: Converting from class to functional components some `AnExApp` examples that were using `UNSAFE_` lifecycles. ## Changelog: [INTERNAL] - Fix RNTester strict mode warnings for AnExApp examples Pull Request resolved: facebook#48620 Test Plan: - Wrapped the the entry app component in `RNTesterAppShared.js` with `StrictMode` and verified that no warnings are shown anymore for the updated components. - Checked the examples are still working as they were. Reviewed By: rshest Differential Revision: D68092958 Pulled By: cipolleschi fbshipit-source-id: 0f2cea3c679f8db0f13054e2851a73dc23a4c906
1 parent 2f22817 commit cc4e4c7

File tree

6 files changed

+219
-225
lines changed

6 files changed

+219
-225
lines changed

‎packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010

1111
'use strict';
1212

13-
const AnExSet = require('./AnExSet');
14-
const React = require('react');
15-
const {
13+
import AnExSet from './AnExSet';
14+
import React from 'react';
15+
import {
1616
Animated,
1717
LayoutAnimation,
1818
PanResponder,
1919
StyleSheet,
2020
View,
21-
} = require('react-native');
21+
} from 'react-native';
2222

2323
const CIRCLE_SIZE = 80;
2424
const CIRCLE_MARGIN = 18;
@@ -188,7 +188,7 @@ class Circle extends React.Component<any, any> {
188188
</Animated.View>
189189
);
190190
}
191-
_toggleIsActive = (velocity: void) => {
191+
_toggleIsActive = (velocity: ?number) => {
192192
const config = {tension: 30, friction: 7};
193193
if (this.state.isActive) {
194194
Animated.spring(this.props.openVal, {

‎packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExBobble.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010

1111
'use strict';
1212

13-
const React = require('react');
14-
const {Animated, PanResponder, StyleSheet, View} = require('react-native');
13+
import React from 'react';
14+
import {Animated, PanResponder, StyleSheet, View} from 'react-native';
1515

1616
const NUM_BOBBLES = 5;
1717
const RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
@@ -169,4 +169,4 @@ const BOBBLE_IMGS = [
169169
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851562_575284782557566_1188781517_n.png',
170170
];
171171

172-
module.exports = AnExBobble;
172+
export default AnExBobble;

‎packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
import type {GestureState} from 'react-native/Libraries/Interaction/PanResponder';
1414
import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
1515

16-
const React = require('react');
17-
const {Animated, PanResponder, StyleSheet, View} = require('react-native');
16+
import React from 'react';
17+
import {Animated, PanResponder, StyleSheet, View} from 'react-native';
1818

1919
class AnExChained extends React.Component<Object, any> {
2020
constructor(props: Object) {
@@ -119,4 +119,4 @@ const CHAIN_IMGS = [
119119
require('../../assets/bunny.png'),
120120
];
121121

122-
module.exports = AnExChained;
122+
export default AnExChained;

‎packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExScroll.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010

1111
'use strict';
1212

13-
const React = require('react');
14-
const {
13+
import React from 'react';
14+
import {
1515
Animated,
1616
Image,
1717
ScrollView,
1818
StyleSheet,
1919
Text,
2020
View,
21-
} = require('react-native');
21+
} from 'react-native';
2222

2323
class AnExScroll extends React.Component<$FlowFixMeProps, any> {
2424
state: any = {scrollX: new Animated.Value(0)};
@@ -118,4 +118,4 @@ const BUNNY_PIC = {
118118
uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png',
119119
};
120120

121-
module.exports = AnExScroll;
121+
export default AnExScroll;

‎packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js

Lines changed: 89 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -10,100 +10,100 @@
1010

1111
'use strict';
1212

13-
const AnExBobble = require('./AnExBobble');
14-
const AnExChained = require('./AnExChained');
15-
const AnExScroll = require('./AnExScroll');
16-
const AnExTilt = require('./AnExTilt');
17-
const React = require('react');
18-
const {
19-
Animated,
20-
PanResponder,
21-
StyleSheet,
22-
Text,
23-
View,
24-
} = require('react-native');
13+
import AnExBobble from './AnExBobble';
14+
import AnExChained from './AnExChained';
15+
import AnExScroll from './AnExScroll';
16+
import AnExTilt from './AnExTilt';
17+
import React, {useRef, useState} from 'react';
18+
import {Animated, PanResponder, StyleSheet, Text, View} from 'react-native';
2519

26-
class AnExSet extends React.Component<Object, any> {
27-
constructor(props: Object) {
28-
super(props);
29-
function randColor() {
30-
const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
31-
return 'rgb(' + colors.join(',') + ')';
32-
}
33-
this.state = {
34-
closeColor: randColor(),
35-
openColor: randColor(),
36-
};
37-
}
38-
render(): React.Node {
39-
const backgroundColor = this.props.openVal
40-
? this.props.openVal.interpolate({
41-
inputRange: [0, 1],
42-
outputRange: [
43-
this.state.closeColor, // interpolates color strings
44-
this.state.openColor,
45-
],
46-
})
47-
: this.state.closeColor;
48-
const panelWidth =
49-
(this.props.containerLayout && this.props.containerLayout.width) || 320;
50-
return (
51-
<View style={styles.container}>
52-
<Animated.View
53-
style={[styles.header, {backgroundColor}]}
54-
{...this.state.dismissResponder.panHandlers}>
55-
<Text style={[styles.text, styles.headerText]}>{this.props.id}</Text>
56-
</Animated.View>
57-
{this.props.isActive && (
58-
<View style={styles.stream}>
59-
<View style={styles.card}>
60-
<Text style={styles.text}>July 2nd</Text>
61-
<AnExTilt isActive={this.props.isActive} />
62-
<AnExBobble />
63-
</View>
64-
<AnExScroll panelWidth={panelWidth} />
65-
<AnExChained />
66-
</View>
67-
)}
68-
</View>
69-
);
70-
}
20+
const randColor = () => {
21+
const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
22+
return `rgb(${colors.join(',')})`;
23+
};
24+
25+
type AnExSetProps = $ReadOnly<{|
26+
openVal: Animated.Value,
27+
containerLayout: {width: number, height: number},
28+
id: string,
29+
isActive: boolean,
30+
onDismiss: (velocity: number) => void,
31+
|}>;
7132

72-
UNSAFE_componentWillMount() {
73-
this.state.dismissY = new Animated.Value(0);
74-
this.state.dismissResponder = PanResponder.create({
75-
onStartShouldSetPanResponder: () => this.props.isActive,
76-
onPanResponderGrant: () => {
77-
Animated.spring(this.props.openVal, {
78-
// Animated value passed in.
79-
toValue: this.state.dismissY.interpolate({
80-
// Track dismiss gesture
81-
inputRange: [0, 300], // and interpolate pixel distance
82-
outputRange: [1, 0], // to a fraction.
83-
}),
33+
const AnExSet = ({
34+
openVal,
35+
containerLayout,
36+
id,
37+
isActive,
38+
onDismiss,
39+
}: AnExSetProps): React.Node => {
40+
const [closeColor] = useState(randColor());
41+
const [openColor] = useState(randColor());
42+
const dismissY = useRef(new Animated.Value(0)).current;
8443

44+
const dismissResponder = PanResponder.create({
45+
onStartShouldSetPanResponder: () => isActive,
46+
onPanResponderGrant: () => {
47+
Animated.spring(openVal, {
48+
// Animated value passed in.
49+
toValue: dismissY.interpolate({
50+
// Track dismiss gesture
51+
inputRange: [0, 300], // and interpolate pixel distance
52+
outputRange: [1, 0], // to a fraction.
53+
}),
54+
useNativeDriver: false,
55+
}).start();
56+
},
57+
onPanResponderMove: Animated.event(
58+
[null, {dy: dismissY}], // track pan gesture
59+
{useNativeDriver: false},
60+
),
61+
onPanResponderRelease: (e, gestureState) => {
62+
if (gestureState.dy > 100) {
63+
onDismiss(gestureState.vy); // delegates dismiss action to parent
64+
} else {
65+
Animated.spring(openVal, {
66+
// animate back open if released early
67+
toValue: 1,
8568
useNativeDriver: false,
8669
}).start();
87-
},
88-
onPanResponderMove: Animated.event(
89-
[null, {dy: this.state.dismissY}], // track pan gesture
90-
{useNativeDriver: false},
91-
),
92-
onPanResponderRelease: (e, gestureState) => {
93-
if (gestureState.dy > 100) {
94-
this.props.onDismiss(gestureState.vy); // delegates dismiss action to parent
95-
} else {
96-
Animated.spring(this.props.openVal, {
97-
// animate back open if released early
98-
toValue: 1,
70+
}
71+
},
72+
});
73+
74+
const backgroundColor = openVal
75+
? openVal.interpolate({
76+
inputRange: [0, 1],
77+
outputRange: [
78+
closeColor, // interpolates color strings
79+
openColor,
80+
],
81+
})
82+
: closeColor;
9983

100-
useNativeDriver: false,
101-
}).start();
102-
}
103-
},
104-
});
105-
}
106-
}
84+
const panelWidth = (containerLayout && containerLayout.width) || 320;
85+
86+
return (
87+
<View style={styles.container}>
88+
<Animated.View
89+
style={[styles.header, {backgroundColor}]}
90+
{...dismissResponder.panHandlers}>
91+
<Text style={[styles.text, styles.headerText]}>{id}</Text>
92+
</Animated.View>
93+
{isActive && (
94+
<View style={styles.stream}>
95+
<View style={styles.card}>
96+
<Text style={styles.text}>July 2nd</Text>
97+
<AnExTilt isActive={isActive} />
98+
<AnExBobble />
99+
</View>
100+
<AnExScroll panelWidth={panelWidth} />
101+
<AnExChained />
102+
</View>
103+
)}
104+
</View>
105+
);
106+
};
107107

108108
const styles = StyleSheet.create({
109109
container: {
@@ -144,4 +144,4 @@ const styles = StyleSheet.create({
144144
},
145145
});
146146

147-
module.exports = AnExSet;
147+
export default AnExSet;

0 commit comments

Comments
 (0)