Skip to content

Migrate rn-tester/js/examples/AppState/AppStateExample.js to function components #48644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
fabriziocucci wants to merge 3 commits into from
Closed

Migrate rn-tester/js/examples/AppState/AppStateExample.js to function components #48644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d5cb85
Migrate rn-tester/js/components/TextInlineView.js to function compone…
fabriziocucci Jan 13, 2025
fd66367
Migrate rn-tester/js/examples/OrientationChange/OrientationChangeExam…
fabriziocucci Jan 13, 2025
30ff5c8
Migrate rn-tester/js/examples/AppState/AppStateExample.js to function…
fabriziocucci Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 83 additions & 101 deletions packages/rn-tester/js/components/TextInlineView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

import RNTesterText from '../components/RNTesterText';
import React from 'react';
import {useState} from 'react';
import {Image, TouchableHighlight, View} from 'react-native';

function Basic(): React.Node {
Expand Down Expand Up @@ -105,116 +106,97 @@ function ClippedByText(): React.Node {
);
}

type ChangeSizeState = {|
width: number,
|};

class ChangeImageSize extends React.Component<mixed, ChangeSizeState> {
state: ChangeSizeState = {
width: 50,
};

render(): React.Node {
return (
<View>
<TouchableHighlight
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
<RNTesterText style={{fontSize: 15}}>
Change Image Width (width={this.state.width})
</RNTesterText>
</TouchableHighlight>
<RNTesterText>
This is an
<Image
source={{
uri: 'https://picsum.photos/50',
width: this.state.width,
height: 50,
}}
style={{
width: this.state.width,
height: 50,
}}
/>
inline image
function ChangeImageSize(): React.Node {
const [width, setWidth] = useState(50);
return (
<View>
<TouchableHighlight
onPress={() => {
setWidth(width === 50 ? 100 : 50);
}}>
<RNTesterText style={{fontSize: 15}}>
Change Image Width (width={width})
</RNTesterText>
</View>
);
}
</TouchableHighlight>
<RNTesterText>
This is an
<Image
source={{
uri: 'https://picsum.photos/50',
width,
height: 50,
}}
style={{
width,
height: 50,
}}
/>
inline image
</RNTesterText>
</View>
);
}

class ChangeViewSize extends React.Component<mixed, ChangeSizeState> {
state: ChangeSizeState = {
width: 50,
};
function ChangeViewSize(): React.Node {
const [width, setWidth] = useState(50);
return (
<View>
<TouchableHighlight
onPress={() => {
setWidth(width === 50 ? 100 : 50);
}}>
<RNTesterText style={{fontSize: 15}}>
Change View Width (width={width})
</RNTesterText>
</TouchableHighlight>
<RNTesterText>
This is an
<View
style={{
width,
height: 50,
backgroundColor: 'steelblue',
}}
/>
inline view
</RNTesterText>
</View>
);
}

render(): React.Node {
return (
<View>
<TouchableHighlight
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
<RNTesterText style={{fontSize: 15}}>
Change View Width (width={this.state.width})
</RNTesterText>
</TouchableHighlight>
<RNTesterText>
This is an
function ChangeInnerViewSize(): React.Node {
const [width, setWidth] = useState(50);
return (
<View>
<TouchableHighlight
onPress={() => {
setWidth(width === 50 ? 100 : 50);
}}>
{/* When updating `width`, it's important that the only thing that
changes is the width of the pink inline view. When we do this, we
demonstrate a bug in RN Android where the pink view doesn't get
rerendered and remains at its old size. If other things change
(e.g. we display `width` as text somewhere) it could circumvent
the bug and cause the pink view to be rerendered at its new size. */}
<RNTesterText style={{fontSize: 15}}>
Change Pink View Width
</RNTesterText>
</TouchableHighlight>
<RNTesterText>
This is an
<View style={{width: 125, height: 75, backgroundColor: 'steelblue'}}>
<View
style={{
width: this.state.width,
width,
height: 50,
backgroundColor: 'steelblue',
backgroundColor: 'pink',
}}
/>
inline view
</RNTesterText>
</View>
);
}
}

class ChangeInnerViewSize extends React.Component<mixed, ChangeSizeState> {
state: ChangeSizeState = {
width: 50,
};

render(): React.Node {
return (
<View>
<TouchableHighlight
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
{/* When updating `state.width`, it's important that the only thing that
changes is the width of the pink inline view. When we do this, we
demonstrate a bug in RN Android where the pink view doesn't get
rerendered and remains at its old size. If other things change
(e.g. we display `state.width` as text somewhere) it could circumvent
the bug and cause the pink view to be rerendered at its new size. */}
<RNTesterText style={{fontSize: 15}}>
Change Pink View Width
</RNTesterText>
</TouchableHighlight>
<RNTesterText>
This is an
<View style={{width: 125, height: 75, backgroundColor: 'steelblue'}}>
<View
style={{
width: this.state.width,
height: 50,
backgroundColor: 'pink',
}}
/>
</View>
inline view
</RNTesterText>
</View>
);
}
</View>
inline view
</RNTesterText>
</View>
);
}

module.exports = {
Expand Down
135 changes: 58 additions & 77 deletions packages/rn-tester/js/examples/AppState/AppStateExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,109 +11,90 @@
'use strict';

import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {AppStateValues} from 'react-native/Libraries/AppState/AppState';
import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';

import RNTesterText from '../../components/RNTesterText';
import React from 'react';
import {useEffect, useState} from 'react';
import {AppState, Platform, View} from 'react-native';

class AppStateSubscription extends React.Component<
$FlowFixMeProps,
$FlowFixMeState,
> {
state: {
appState: ?string,
eventsDetected: Array<string>,
memoryWarnings: number,
previousAppStates: Array<?(any | string)>,
} = {
appState: AppState.currentState,
previousAppStates: [],
memoryWarnings: 0,
eventsDetected: [],
};
type Props = {
detectEvents?: boolean,
showCurrentOnly?: boolean,
showMemoryWarnings?: boolean,
};

_subscriptions: ?Array<EventSubscription>;
function AppStateSubscription(props: Props) {
const [currentAppState, setCurrentAppState] = useState<?string>(
AppState.currentState,
);
const [previousAppStates, setPreviousAppStates] = useState<string[]>([]);
const [memoryWarnings, setMemoryWarnings] = useState<number>(0);
const [eventsDetected, setEventsDetected] = useState<string[]>([]);

componentDidMount() {
this._subscriptions = [
AppState.addEventListener('change', this._handleAppStateChange),
AppState.addEventListener('memoryWarning', this._handleMemoryWarning),
useEffect(() => {
const subscriptions = [
AppState.addEventListener('change', handleAppStateChange),
AppState.addEventListener('memoryWarning', handleMemoryWarning),
];

if (Platform.OS === 'android') {
this._subscriptions.push(
AppState.addEventListener('focus', this._handleFocus),
AppState.addEventListener('blur', this._handleBlur),
subscriptions.push(
AppState.addEventListener('focus', handleFocus),
AppState.addEventListener('blur', handleBlur),
);
}
}

componentWillUnmount() {
if (this._subscriptions != null) {
for (const subscription of this._subscriptions) {
subscription.remove();
}
}
}
return () => {
subscriptions.forEach(subscription => subscription.remove());
};
}, []);

_handleMemoryWarning = () => {
this.setState({memoryWarnings: this.state.memoryWarnings + 1});
const handleMemoryWarning = () => {
setMemoryWarnings(prev => prev + 1);
};

_handleBlur = () => {
const eventsDetected = this.state.eventsDetected.slice();
eventsDetected.push('blur');
this.setState({eventsDetected});
const handleBlur = () => {
setEventsDetected(prev => [...prev, 'blur']);
};

_handleFocus = () => {
const eventsDetected = this.state.eventsDetected.slice();
eventsDetected.push('focus');
this.setState({eventsDetected});
const handleFocus = () => {
setEventsDetected(prev => [...prev, 'focus']);
};

_handleAppStateChange = (appState: AppStateValues) => {
const previousAppStates = this.state.previousAppStates.slice();
previousAppStates.push(this.state.appState);
this.setState({
appState,
previousAppStates,
});
const handleAppStateChange = (appState: string) => {
setPreviousAppStates(prev => [...prev, appState]);
setCurrentAppState(appState);
};

render(): React.Node {
if (this.props.showMemoryWarnings) {
return (
<View>
<RNTesterText>{this.state.memoryWarnings}</RNTesterText>
</View>
);
}
if (this.props.showCurrentOnly) {
return (
<View>
<RNTesterText>{this.state.appState}</RNTesterText>
</View>
);
}
if (this.props.detectEvents) {
return (
<View>
<RNTesterText>
{JSON.stringify(this.state.eventsDetected)}
</RNTesterText>
</View>
);
}
if (props.showMemoryWarnings) {
return (
<View>
<RNTesterText>{memoryWarnings}</RNTesterText>
</View>
);
}

if (props.showCurrentOnly) {
return (
<View>
<RNTesterText>{currentAppState}</RNTesterText>
</View>
);
}

if (props.detectEvents) {
return (
<View>
<RNTesterText>
{JSON.stringify(this.state.previousAppStates)}
</RNTesterText>
<RNTesterText>{JSON.stringify(eventsDetected)}</RNTesterText>
</View>
);
}

return (
<View>
<RNTesterText>{JSON.stringify(previousAppStates)}</RNTesterText>
</View>
);
}

exports.title = 'AppState';
Expand Down
Loading