CODEWITHSUNDEEP
javascriptcssreact-nativereact-native-paper
Mindaugas Nakrošis
Mindaugas Nakrošis

Reputation: 120

React-native text layout

I have a following react-native component:

const TaskItem = () => {
  return (
    <>
      <View
        style={{
          marginTop: 32,
          marginHorizontal: 8,
          display: 'flex',
          flexDirection: 'row',
          backgroundColor: 'red',
        }}
      >
        <Text style={{ marginRight: 8 }}>
          <Text style={{ backgroundColor: 'green' }}>Title:</Text>
        </Text>
        <Text>
          <Text
            style={{
              fontWeight: 'bold',
              color: '#000000',
              backgroundColor: 'blue',
            }}
            numberOfLines={2}
          >
            Very long text Very long text Very long text Very long text Very long text
          </Text>
        </Text>
      </View>
    </>
  );
};

It produces the following screen (background-colors for debugging):

Screen

What I want is:

  1. blue text not to overflow the red container on the right (respect the marginHorizontal: 8)
  2. blue text to start at the beginning of red container on the left (wrap)

Upvotes: 1

Views: 1058

Answers (1)

Kartikey
Kartikey

Reputation: 4992

This is the solution. Check this out from implementation

Your TaskItem should look like this

const TaskItem = () => {
  return (
    <View
      style={{
        marginTop: 32,
        marginHorizontal: 8,
        flexDirection: 'row',
        borderColor: 'black',
        borderWidth: 1,
      }}>
      <Text style={{ marginRight: 8 }}>Title:</Text>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text
          style={{
            fontWeight: 'bold',
            color: '#000000',
          }}
          numberOfLines={2}>
          Very long text Very long text VeVery long text Very long text Very
          long text Very long text VeryVery long text Very long text Very long
          text Very long text VeryVery long text Very long text Very long text
          Very long text VeryVery long text Very long text Very long text Very
          long text Veryry long text Very long text Very long text
        </Text>
      </View>
    </View>
  );
};

Upvotes: 1

Related Questions