Skip to content

Commit d4407d6

Browse files
mateoguzmanafacebook-github-bot
mateoguzmana
authored and
facebook-github-bot
committed
Fix RNTester strict mode warnings (facebook#48619)
Summary: 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 TextInput and Image examples that were using `UNSAFE_` lifecycles. - Unifying the auto-expanding example as it was exactly the same for iOS and Android. ## Changelog: [INTERNAL] - Fix RNTester strict mode warnings for TextInput and Image examples Pull Request resolved: facebook#48619 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: fabriziocucci Differential Revision: D68094402 Pulled By: rshest fbshipit-source-id: e13878cb290735095afaef3d0377fd6dab33c380
1 parent 6cb2684 commit d4407d6

File tree

5 files changed

+188
-379
lines changed

5 files changed

+188
-379
lines changed

‎packages/rn-tester/js/examples/Image/ImageExample.js

Lines changed: 106 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -35,37 +35,28 @@ type ImageSource = $ReadOnly<{|
3535
uri: string,
3636
|}>;
3737

38-
type BlobImageState = {|
39-
objectURL: ?string,
40-
|};
41-
4238
type BlobImageProps = $ReadOnly<{|
4339
url: string,
4440
|}>;
4541

46-
class BlobImage extends React.Component<BlobImageProps, BlobImageState> {
47-
state: BlobImageState = {
48-
objectURL: null,
49-
};
42+
const BlobImage = ({url}: BlobImageProps): React.Node => {
43+
const [objectURL, setObjectURL] = React.useState<?string>(null);
5044

51-
UNSAFE_componentWillMount() {
45+
React.useEffect(() => {
5246
// $FlowFixMe[unused-promise]
5347
(async () => {
54-
const result = await fetch(this.props.url);
48+
const result = await fetch(url);
5549
const blob = await result.blob();
56-
const objectURL = URL.createObjectURL(blob);
57-
this.setState({objectURL});
50+
setObjectURL(URL.createObjectURL(blob));
5851
})();
59-
}
52+
}, [url]);
6053

61-
render(): React.Node {
62-
return this.state.objectURL !== null ? (
63-
<Image source={{uri: this.state.objectURL}} style={styles.base} />
64-
) : (
65-
<Text>Object URL not created yet</Text>
66-
);
67-
}
68-
}
54+
return objectURL !== null ? (
55+
<Image source={{uri: objectURL}} style={styles.base} />
56+
) : (
57+
<Text>Object URL not created yet</Text>
58+
);
59+
};
6960

7061
type BlobImageExampleState = {||};
7162

@@ -88,146 +79,121 @@ class BlobImageExample extends React.Component<
8879
}
8980
}
9081

91-
type NetworkImageCallbackExampleState = {|
92-
events: Array<string>,
93-
startLoadPrefetched: boolean,
94-
mountTime: number,
95-
imageHash: number,
96-
|};
97-
9882
type NetworkImageCallbackExampleProps = $ReadOnly<{|
9983
source: ImageSource,
10084
prefetchedSource: ImageSource,
10185
|}>;
10286

103-
class NetworkImageCallbackExample extends React.Component<
104-
NetworkImageCallbackExampleProps,
105-
NetworkImageCallbackExampleState,
106-
> {
107-
state: NetworkImageCallbackExampleState = {
108-
events: [],
109-
startLoadPrefetched: false,
110-
mountTime: Date.now(),
111-
imageHash: Date.now(),
112-
};
87+
const NetworkImageCallbackExample = ({
88+
source,
89+
prefetchedSource,
90+
}: NetworkImageCallbackExampleProps): React.Node => {
91+
const [events, setEvents] = React.useState<$ReadOnlyArray<string>>([]);
92+
const [startLoadPrefetched, setStartLoadPrefetched] = React.useState(false);
93+
const [mountTime, setMountTime] = React.useState(Date.now());
11394

114-
UNSAFE_componentWillMount() {
115-
this.setState({mountTime: Date.now()});
116-
}
117-
118-
_loadEventFired = (event: string) => {
119-
this.setState(state => ({
120-
events: [...state.events, event],
121-
}));
122-
};
95+
React.useEffect(() => {
96+
setMountTime(Date.now());
97+
}, []);
12398

124-
updateLoadingImageHash = () => {
125-
this.setState({imageHash: Date.now()});
99+
const _loadEventFired = (event: string) => {
100+
setEvents(state => [...state, event]);
126101
};
127102

128-
render(): React.Node {
129-
const {mountTime} = this.state;
130-
return (
131-
<View>
103+
return (
104+
<View>
105+
<Image
106+
source={source}
107+
style={[styles.base, styles.visibleOverflow]}
108+
onError={event => {
109+
_loadEventFired(
110+
`✘ onError "${event.nativeEvent.error}" (+${Date.now() - mountTime}ms)`,
111+
);
112+
}}
113+
onLoadStart={() =>
114+
_loadEventFired(`✔ onLoadStart (+${Date.now() - mountTime}ms)`)
115+
}
116+
onProgress={event => {
117+
const {loaded, total} = event.nativeEvent;
118+
const percent = Math.round((loaded / total) * 100);
119+
_loadEventFired(
120+
`✔ onProgress ${percent}% (+${Date.now() - mountTime}ms)`,
121+
);
122+
}}
123+
onLoad={event => {
124+
if (event.nativeEvent.source) {
125+
const url = event.nativeEvent.source.uri;
126+
_loadEventFired(
127+
`✔ onLoad (+${Date.now() - mountTime}ms) for URL ${url}`,
128+
);
129+
} else {
130+
_loadEventFired(`✔ onLoad (+${Date.now() - mountTime}ms)`);
131+
}
132+
}}
133+
onLoadEnd={() => {
134+
_loadEventFired(`✔ onLoadEnd (+${Date.now() - mountTime}ms)`);
135+
setStartLoadPrefetched(true);
136+
prefetchTask.then(
137+
() => {
138+
_loadEventFired(`✔ prefetch OK (+${Date.now() - mountTime}ms)`);
139+
// $FlowFixMe[unused-promise]
140+
Image.queryCache([IMAGE_PREFETCH_URL]).then(map => {
141+
const result = map[IMAGE_PREFETCH_URL];
142+
if (result) {
143+
_loadEventFired(
144+
`✔ queryCache "${result}" (+${Date.now() - mountTime}ms)`,
145+
);
146+
} else {
147+
_loadEventFired(
148+
`✘ queryCache (+${Date.now() - mountTime}ms)`,
149+
);
150+
}
151+
});
152+
},
153+
error => {
154+
_loadEventFired(
155+
`✘ prefetch failed (+${Date.now() - mountTime}ms)`,
156+
);
157+
},
158+
);
159+
}}
160+
/>
161+
{startLoadPrefetched && (
132162
<Image
133-
source={this.props.source}
163+
source={prefetchedSource}
134164
style={[styles.base, styles.visibleOverflow]}
135-
onError={event => {
136-
this._loadEventFired(
137-
`✘ onError "${event.nativeEvent.error}" (+${Date.now() - mountTime}ms)`,
138-
);
139-
}}
140165
onLoadStart={() =>
141-
this._loadEventFired(`✔ onLoadStart (+${Date.now() - mountTime}ms)`)
166+
_loadEventFired(
167+
`✔ (prefetched) onLoadStart (+${Date.now() - mountTime}ms)`,
168+
)
142169
}
143-
onProgress={event => {
144-
const {loaded, total} = event.nativeEvent;
145-
const percent = Math.round((loaded / total) * 100);
146-
this._loadEventFired(
147-
`✔ onProgress ${percent}% (+${Date.now() - mountTime}ms)`,
148-
);
149-
}}
150170
onLoad={event => {
151171
if (event.nativeEvent.source) {
152172
const url = event.nativeEvent.source.uri;
153-
this._loadEventFired(
154-
`✔ onLoad (+${Date.now() - mountTime}ms) for URL ${url}`,
173+
_loadEventFired(
174+
`✔ (prefetched) onLoad (+${
175+
Date.now() - mountTime
176+
}ms) for URL ${url}`,
155177
);
156178
} else {
157-
this._loadEventFired(`✔ onLoad (+${Date.now() - mountTime}ms)`);
158-
}
159-
}}
160-
onLoadEnd={() => {
161-
this._loadEventFired(`✔ onLoadEnd (+${Date.now() - mountTime}ms)`);
162-
this.setState({startLoadPrefetched: true}, () => {
163-
prefetchTask.then(
164-
() => {
165-
this._loadEventFired(
166-
`✔ prefetch OK (+${Date.now() - mountTime}ms)`,
167-
);
168-
// $FlowFixMe[unused-promise]
169-
Image.queryCache([IMAGE_PREFETCH_URL]).then(map => {
170-
const result = map[IMAGE_PREFETCH_URL];
171-
if (result) {
172-
this._loadEventFired(
173-
`✔ queryCache "${result}" (+${
174-
Date.now() - mountTime
175-
}ms)`,
176-
);
177-
} else {
178-
this._loadEventFired(
179-
`✘ queryCache (+${Date.now() - mountTime}ms)`,
180-
);
181-
}
182-
});
183-
},
184-
error => {
185-
this._loadEventFired(
186-
`✘ prefetch failed (+${Date.now() - mountTime}ms)`,
187-
);
188-
},
179+
_loadEventFired(
180+
`✔ (prefetched) onLoad (+${Date.now() - mountTime}ms)`,
189181
);
190-
});
182+
}
191183
}}
184+
onLoadEnd={() =>
185+
_loadEventFired(
186+
`✔ (prefetched) onLoadEnd (+${Date.now() - mountTime}ms)`,
187+
)
188+
}
192189
/>
193-
{this.state.startLoadPrefetched ? (
194-
<Image
195-
source={this.props.prefetchedSource}
196-
style={[styles.base, styles.visibleOverflow]}
197-
onLoadStart={() =>
198-
this._loadEventFired(
199-
`✔ (prefetched) onLoadStart (+${Date.now() - mountTime}ms)`,
200-
)
201-
}
202-
onLoad={event => {
203-
// Currently this image source feature is only available on iOS.
204-
if (event.nativeEvent.source) {
205-
const url = event.nativeEvent.source.uri;
206-
this._loadEventFired(
207-
`✔ (prefetched) onLoad (+${
208-
Date.now() - mountTime
209-
}ms) for URL ${url}`,
210-
);
211-
} else {
212-
this._loadEventFired(
213-
`✔ (prefetched) onLoad (+${Date.now() - mountTime}ms)`,
214-
);
215-
}
216-
}}
217-
onLoadEnd={() =>
218-
this._loadEventFired(
219-
`✔ (prefetched) onLoadEnd (+${Date.now() - mountTime}ms)`,
220-
)
221-
}
222-
/>
223-
) : null}
224-
<RNTesterText style={styles.networkImageText} variant="label">
225-
{this.state.events.join('\n')}
226-
</RNTesterText>
227-
</View>
228-
);
229-
}
230-
}
190+
)}
191+
<RNTesterText style={styles.networkImageText}>
192+
{events.join('\n')}
193+
</RNTesterText>
194+
</View>
195+
);
196+
};
231197

232198
type NetworkImageExampleState = {|
233199
error: ?string,

0 commit comments

Comments
 (0)