Question 33861 in React native Question posted in
The official React Native documentation can be found here.

Breaking custom components on multiple lines – React native

I want to render a list in react native. The list items should be very simple, at least in theory. It has a header and a body. The header is no problem. It’s just a Text component. But I do struggle with the body component.

This is how the list item looks like right now:

Below is an illustration on how I would like the list item to look like:

enter image description here

As you see, the desired result would be to stack all the components in the body next to each other horizontally(flexDirection:’row’), this would require that part of the custom component(se below:"ListItemBodyElement") should break to a new line if it doesn’t fit the previous line.

This is the current code(I’ve left out the code for the header component for brevity):

ParentView:

const ListItemBody = props => {
  return <View style={{flexDirection:'row',flexWrap:'wrap',justifyContent:'flex-start'}}>{props.children}</View>;
};

The props.children contains of x ListItemBodyElement:

const ListItemBodyElement = props => {
  return (
    <View style={{flexDirection:'row'}}>
      {props.icon && <props.icon style={styles.icon} name={props.iconName} />}
      <Text style={{...styles.label, ...props.labelStyle}}>{props.label}</Text>
    </View>
  );
};

Is it possible to achieve the desired result?
Thanks in advance.
/Arif

Tags:

2

Answers


  1. 0

    Try set word-break: break-all on Text.

    This should prevent the text overflow, hopefully making it closer to the desired result.

    More about word-break

    Example:

    <Text style={{ ...styles.label, ...props.labelStyle, wordBreak: "break-all" }}>
  {props.label}
</Text>

    Hope this will help!

    Login or Signup to reply.
  2. 0

    Try rendering all the elements within a Text component. This should order them sequentially and place oversized content on a new line.

    const ListItemBody = props => {
  return <View style={{flexDirection:'row',flexWrap:'wrap',justifyContent:'flex-start'}}>
    <Text>{props.children}</Text>
  </View>;
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search