Simulate Display: Inline in React Native

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



Leave a reply



Submit