React-Native: Limit the length of Text displayed in a Card Section

Just use style={{flex: 1}} in card or text styling to limit within the card. Use numberOfLines={1} to restrict in one line.


You can combine numberOfLines and width / flex prop to achieve this effect.

<Text numberOfLines={1} style={{ width: 100 }}>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to mak
</Text>

please check this code. you adjust text length according to your space

 <Text numberOfLines={1}>
              {address.length < 35
                ? `${address}`
                : `${address.substring(0, 32)}...`}
            </Text>

Tags:

React Native