Is it achievable to create an inline block+text layout in React Native?

Question

Is it achievable to create an inline block+text layout in React Native?

In my React Native project, I am aiming to replicate a layout that I successfully implemented in HTML+CSS on the web:

https://i.sstatic.net/vpbER.png

The challenging part is getting the gray breadcrumb element to align horizontally with the description. Here is the code snippet I have for the breadcrumb and description section:

 <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,
  },

However, this implementation leads to the following outcome:

https://i.sstatic.net/HqTCj.png

Unfortunately, the borderRadius and padding properties seem to be disregarded for the quantity element.

I also experimented with using View elements instead of Text, but the description text consistently wrapped onto a new line when it exceeded the container width (displaying typical block behavior).

Is there any clever workaround or method to achieve this desired layout in React Native? Your insights would be greatly appreciated. Thank you.

html css ios react-native layout

Answer 1

Answer №1

Enclose the inner text within a container with a row flex direction, and proceed to wrap the text component in another container (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 =
  'There was once a tale so long that it took ages to recount.';

const InnerTextComponent = ({ style, children, ...props }) => {
  style = StyleSheet.flatten(style)
  const textStyle = {
    ...style,
    // // remove styles that are not compatible with 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}>
          {/* The InnerTextComponent no longer inherits parent text styles*/}
          <InnerTextComponent style={[styles.description,styles.quantity]}>{quantity}</InnerTextComponent>
          {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,
  },
});

Answer 2

Enclose the inner text within a container with a row flex direction, and proceed to wrap the text component in another container (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 =
  'There was once a tale so long that it took ages to recount.';

const InnerTextComponent = ({ style, children, ...props }) => {
  style = StyleSheet.flatten(style)
  const textStyle = {
    ...style,
    // // remove styles that are not compatible with 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}>
          {/* The InnerTextComponent no longer inherits parent text styles*/}
          <InnerTextComponent style={[styles.description,styles.quantity]}>{quantity}</InnerTextComponent>
          {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,
  },
});

Is it achievable to create an inline block+text layout in React Native?

Answer №1

Similar questions

Populate the div with an image that stretches to the full height

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

Trouble with buttons in table cells

Continuing the Grid

Enhancing Your Website with WordPress Customizer API: Introducing Kirki's Repeater Image Feature

Unable to connect to subview in Interface Builder

How can I change the color of the fa-star symbol from its default yellow to white?

HTML Scripts: Enhancing Web Functionality

Tips on adjusting the label on a datetime-local button

PrimeNG ToolTip fails to appear

Tips on eliminating the excess whitespace remaining at the bottom of the webpage when using JavaScript parallax scrolling

What is causing an empty box to appear due to padding? Is there a way to conceal it

Tips on positioning an element within a bootstrap carousel using z-index or alternative methods

Incorporate dynamic classes into an HTML list using PHP

In order for Filedrop to function properly, the function must contain the alert statement

Bring in the SCSS using a relative path with Angular CLI

Is there a way to modify the form's style to show "none" without submitting the form?

Disable the borders on HTML input fields

Applying CSS link dynamically in NextJS based on the window width

Ways to hide menu click when hovering over it