Is this inline block+text layout possible at all in React Native? - html

Question

I'm trying to achieve the following layout in React Native (layout created successfully on web in HTML+CSS):
The tricky part is the gray breadcrumb element that should inline with the description. My code for the breadcrumb+description part is as follows:
<Text style={styles.description}>
<Text style={styles.quantity}>{quantity}</Text>
{description}
</Text>
styles.ts:
description: {
fontSize: 14,
fontFamily: 'light',
flexDirection: 'row',
flexWrap: 'wrap',
},
quantity: {
fontSize: 13,
color: Color.white,
backgroundColor: Color.placeholder,
borderRadius: 16,
paddingHorizontal: 400,
},
It results in this:
As you can see, the borderRadius and padding properties get ignored on the quantity element.
I have also tried doing it with View elements instead of Text ones but the description simply goes fully to the next line when it overflows (classic block behaviour).
So, is there any trick/workaround to achieving this layout in RN? Thanks.

Answer 1

Wrap the nested text in a view with a flex direction of row, and then go about wrapping the text component in a view (demo):
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Text } from 'react-native-paper';
const Color = {
white: 'white',
placeholder: 'blue',
};
const quantity = 50;
const description =
'Once upon a time there was a story told that took a very long time to tell.';
const InlineText = ({ style, children, ...props }) => {
style = StyleSheet.flatten(style)
const textStyle = {
...style,
// // remove styles that dont work on android/ios
paddingHorizontal:null,
marginHorizontal:null,
borderRadius:null
}
return (
<View style={[{alignItems:'center',justifyContent:'center'},style]}>
<Text {...props} style={textStyle}>{children}</Text>
</View>
);
};
export default function App() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.description}>
{/*InlineText no longer inherits the parent text styles*/}
<InlineText style={[styles.description,styles.quantity]}>{quantity}</InlineText>
{description}
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
description: {
fontSize: 14,
fontFamily: 'light',
flexDirection: 'row',
flexWrap: 'wrap',
},
quantity: {
fontSize: 13,
color: Color.white,
backgroundColor: Color.placeholder,
borderRadius: 16,
paddingHorizontal: 5,
marginHorizontal: 3,
},
});