CODEWITHSUNDEEP
cssreact-native
FaysalB
FaysalB

Reputation: 398

text getting cropped on title when it should continue on next line

<View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          height: 130,
          marginVertical: 10,
          overflow: 'hidden'
        }}
      >
        <Image
          source={{
            uri: props.image_medium
          }}
          style={{
            height: 120,
            width: 120,
            borderRadius: 10
          }}
        />
        <View style={{ marginLeft: 10 }}>
          <Text
            style={{
              fontFamily: 'Montserrat_bold',
              fontSize: 14,
              color: Colors.NewBlue
            }}
          >
            {props?.title.trim()}
          </Text>

I'm trying to make the title not crop and continue on the next line instead but the result is as you can see in the photoexample

Upvotes: 0

Views: 33

Answers (1)

FaysalB
FaysalB

Reputation: 398

so I just added flex:1 to the containing view

<View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          height: 130,
          marginVertical: 10,
          overflow: 'hidden'
        }}
      >
        <Image
          source={{
            uri: props.image_medium
          }}
          style={{
            height: 120,
            width: 120,
            borderRadius: 10
          }}
        />
        <View style={{ marginLeft: 10, flex:1}}> // right here
          <Text
            style={{ 
              fontFamily: 'Montserrat_bold',
              fontSize: 14,
              color: Colors.NewBlue
            }}
          >
            {props?.title.trim()}
          </Text>

and voila

Upvotes: 1

Related Questions