Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate rn-tester/js/components/TextInlineView.js to function components (#48640)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48640

As per title.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D68095013

fbshipit-source-id: a593af63029352844e544245d88e7b4c9d7eb75c
This commit is contained in:
Fabrizio Cucci
2025-01-13 08:59:43 -08:00
committed by Facebook GitHub Bot
parent 12e321daf0
commit 1e0009407d
1 changed files with 83 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/components/TextInlineView.js
+83 -101
View File
@@ -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 {
@@ -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 = {