react-native

margin and padding are not showing any effect when Text is so lengthy

Below is the style for each list item,

itemStyle: {
   flexDirection: 'row',
   marginHorizontal: 24,
   paddingBottom: 25,
},

There is no margin applied right side of the screen and Text occupied all available space.

How to render the Text with in the margin or padding boundaries?

Solution

  • Put each Text component inside its own View component. The either give the View a padding or give the Text a margin.