Содержимое исчезает в ListItem

Question

Я пытаюсь создать макет RTL в моем приложении. Я хочу, чтобы мои listitem появлялись на всю ширину экрана. Но я не знаю, как это сделать, используя flexbox

Стиль

list: {
            flexDirection: 'row-reverse',
            alignContent: 'stretch',
        }
listItem: {
            borderBottomWidth: 0.5,
            borderBottomColor: '#d3d1da',
            borderTopWidth: 0,
            // height: 64,
            // justifyContent: 'center',
            marginLeft: -8,
            marginRight: -20,
            flexDirection: 'row-reverse'
        },

Код компонента

<FlatList
 data={this.state.options}
 style={styles.list}
 renderItem={({ item }) => (
   <TouchableOpacity
        onPress={() => { this.openOption(item); }}
    >
    <ListItem
        title={item.val}
        accessibilityLabel={`${item.val + I18n.t('at_button')}`}
        containerStyle={styles.listItem}
        titleStyle={{ color: '#47494d', fontSize: 16 }}
    />
      </TouchableOpacity>
    )}
    keyExtractor={(item, index) => `${index}`}
/>

Когда я отключаю list s flexDirection, текстовое содержимоев ListItem исчезает, а также, когда я отключаю listItem s flexDirection, ширина содержимого не отображается на весь экран. В чем здесь проблема? Я новичок в дизайне flexbox.