Skip to content

Instantly share code, notes, and snippets.

@vovkasm

vovkasm/sample.jsx

Created September 3, 2019 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vovkasm/301677818adf2eeca86cd644df5b32d1 to your computer and use it in GitHub Desktop.
Save vovkasm/301677818adf2eeca86cd644df5b32d1 to your computer and use it in GitHub Desktop.
Download ZIP
Poor RN text overflow behavior :-(
Raw
sample.jsx
funciton MyComp() {
return (
<View style={{ flexDirection: 'row', borderColor: 'blue', borderWidth: StyleSheet.hairlineWidth }}>
<View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies finibus elementum.</Text>
</View>
)
}
@vovkasm
Copy link
Author

vovkasm commented Sep 3, 2019

RN (with its defaults)

RN behaviour

Web (with web defaults)

Web behaviour

<div style="display: flex; flex-direction: row; border: 1px solid blue; margin-top: 50; width: 300px;">
 <div style="width: 100px; height: 100px; background: green;"></div>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies finibus elementum.</div>
</div>

Web (with min-width)

Web behaviour

<div style="display: flex; flex-direction: row; border: 1px solid blue; margin-top: 50; width: 300px;">
 <div style="min-width: 100px; height: 100px; background: green;"></div>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies finibus elementum.</div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment