Simulate display: inline in React Native
You can get this effect by wrapping text elements in other text elements the way you would wrap a span in a div or another element:
<View>
<Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>
</View>
You can also get this effect by declaring a flexDirection:'row' property on the parent along with a flexWrap: 'wrap'. The children will then display inline:
<View style={{flexDirection:'row', flexWrap:'wrap'}}>
<Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text>
</View>
Check out this example.
https://rnplay.org/apps/-rzWGg
Simulate inline-block with React Native
Main change is to add flexWrap: 'nowrap'
to created
style.
Working example: https://rnplay.org/apps/RgpZ5w
Display: Inline Equivalent in React Native
Needed to change the styling to the following:
//container style wrapper for scrollview
footerWrapper: {
flexWrap: 'wrap',
alignItems: 'flex-start',
flexDirection:'row',
},
//non-container style wrapper for scrollview
footerWrapperNC: {
flexDirection:'column',
},
How to get two text elements inline in react native with tailwind
Change flex-row
to simply flex
. flex-row is only setting flex-direction: row
(the flexbox default direction), but it's not setting display: flex
...
<View style={tailwind('flex mb-2 justify-between')}>
<Text>
Text 1
</Text>
{!visible && (
<Text>
Text 2
</Text>
)}
</View>
https://codeply.com/p/UgPU3XXoui
Can't overwrite external stylesheet property with inline style in React Native
I'm still not exactly clear on what the desired outcome is because it's not great to not allow the font size and some others to not be overridden. But, I think this is just as simple as moving the props to the first arg so they are overridden by yours.
render() {
const {style, ...theRest} = this.props;
return (
<TextInput
{...this.props}
style={[styles.defaultText, styles.defaultTextInput] as StyleProp<TextStyle>}
/>
);
}
For more control try removing the style from the props and passing it where desired in the style props so font is overridden but other stuff isn't.
render() {
const {style, ...theRest} = this.props;
return (
<TextInput
style={[styles.defaultText, style, styles.defaultTextInput] as StyleProp<TextStyle>}
{...theRest}
/>
);
}
Finally, you can explicitly remove the ones you don't want overridden thru deconstruction and pass thru anything else.
const {style, ...theRest} = this.props;
const {backgroundColor, borderBottomWidth, ...theRestOfStyle} = style;
Then use it in your style:
<TextInput
style={[styles.defaultText, styles.defaultTextInput, theRestOfStyle] as StyleProp<TextStyle>}
{...theRest}
/>
Related Topics
Bootstrap 4 - Change Position of Carousel Controls
Floating Elements Within a Div, Floats Outside of Div. Why
Which Characters Are Valid in CSS Class Names/Selectors
Margin on Child Element Moves Parent Element
Difference Between Max-Device-Width and Max-Width For Mobile Web
Remove Blue Border from CSS Custom-Styled Button in Chrome
How to Use /Deep/ or ≫≫≫ or ::V-Deep in Vue.Js
Google Chrome Printing Page Breaks
How to Define Colors as Variables in Css
How to Make Bootstrap 4 Columns Have a Height of 100%
Why Does Height 100% Work When Doctype Is Removed
How to Transition Height: 0; to Height: Auto; Using Css
What Does !Important Mean in Css
How to Override Inline Styles With External Css
How to Remove Firefox'S Dotted Outline on Buttons as Well as Links