React Native last child selector not working - react-native

Question

I'm trying to use the last child selector remove the bottom border from the last Text tag here.
I've used both the EStyleSheet and the StyleSheet but it doesn't seem to be working – the last Text tag still has a bottom border.
I've wrapped the Text tags in View and applied the 'opt' style to the View instead and that also doesn't work.
What am I doing something wrong?
import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import {
Text,
View,
Image,
} from 'react-native';
EStyleSheet.build()
const styles = EStyleSheet.create({
container:{
flex:1,
},
options:{
},
opt:{
padding:5,
fontSize:25,
borderWidth:1,
borderColor:'black',
},
'opt:last-child': {
borderBottomWidth:0,
}
});
const Settings = () => {
return <View style={styles.container}>
<View style={styles.options}>
<Text style={styles.opt}>Edit profile</Text>
<Text style={styles.opt}>Preferences</Text>
<Text style={styles.opt}>Account settings</Text>
</View>
</View>
};
export default Settings;

Answer 1

To accomplish an item-order aware styling, try something that makes use of EstyleSheet.child like this way:
const items = ['Edit profile', 'Preferences', 'Account settings'];
const Settings = () => (
<View style={styles.container}>
<View style={styles.options}>
{items.map((text, i) => {
const style = EStyleSheet.child(styles, 'opt', i, items.length);
return <Text style={style}>{text}</Text>;
})}
</View>
</View>
);