-
Notifications
You must be signed in to change notification settings - Fork 24.9k
Closed
Labels
BugComponent: TextInputRelated to the TextInput component.Related to the TextInput component.Platform: AndroidAndroid applications.Android applications.StaleThere has been a lack of activity on this issue and it may be closed soon.There has been a lack of activity on this issue and it may be closed soon.
Description
React Native version: 0.61.4
OS: Android only
Steps To Reproduce
- Have a <TextInput style={{paddingLeft: 20}} /> in the same suspense border as a suspending component
- Mount the parent component
- The padding is not applied to the text input
- Re-render the component (e.g. by changing state)
- The padding is applied
Describe what you expected to happen:
The padding is applied to the text input.
Snack, code example, screenshot, or link to a repository:
App.js
import React, {Suspense, useState} from 'react';
import {TextInput} from 'react-native';
import SuspendingComponent from './SuspendingComponent';
const App = () => {
const [value, setValue] = useState('');
return (
<Suspense fallback={null}>
<SuspendingComponent />
<TextInput
placeholder="Test placeholder"
value={value}
onChange={({nativeEvent: {text}}) => setValue(text)}
style={{width: '100%', paddingLeft: 20, borderWidth: 1}}
/>
</Suspense>
);
};
export default App;SuspendingComponent.js
let value = false;
const SuspendingComponent = () => {
if (!value) {
throw Promise.resolve().then(() => {
value = true;
});
}
return null;
};
export default SuspendingComponent;This is how it looks like after mount:

Note that the placeholder is moved all the way left, even though the text input has a padding of 20.
Then you start typing (the state update makes the text input re-render) and the padding is applied:

Metadata
Metadata
Assignees
Labels
BugComponent: TextInputRelated to the TextInput component.Related to the TextInput component.Platform: AndroidAndroid applications.Android applications.StaleThere has been a lack of activity on this issue and it may be closed soon.There has been a lack of activity on this issue and it may be closed soon.