Why is extended stylesheet not rendering? - reactjs

Question

Brand new project. react-native-extended-stylesheet installed. everything working fine, and then out of nowhere it stops working. here's the full component:
import React from 'react';
import { Image, FlatList, View, Text, StyleSheet, SafeAreaView, TouchableOpacity, Dimensions } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const { height, width } = Dimensions.get('window');
const data = [
{
title: 'Johnny Appleseed',
subtitle: 'November 12, 2019',
img: require('./src/assets/img/johnny_appleseed.png'),
type: 'video'
},
{
title: 'Johnathan Doe',
subtitle: 'November 19, 2019',
img: require('./src/assets/img/johnny_appleseed.png'),
type: 'voice'
}
];
const AgendaItem = (props) => {
return (
<TouchableOpacity onPress={props.onPress}>
<View style={styles.container}>
<View style={styles.leftContainer}>
<Image
resizeMethod={'scale'}
source={
props.type === 'voice' ? (
require('./src/assets/img/voice_icon.png')
) : (
require('./src/assets/img/video_icon.png')
)
}
style={styles.icon}
/>
<View style={styles.textContainer}>
<Text style={styles.title}>{props.title}</Text>
<Text style={styles.subtitle}>{props.subtitle}</Text>
</View>
</View>
<Image source={props.img} style={styles.img} />
</View>
</TouchableOpacity>
);
};
const ProfileList = () => {
return (
<SafeAreaView>
<FlatList
data={data}
renderItem={({ item }) => (
<AgendaItem title={item.title} subtitle={item.subtitle} img={item.img} type={item.type} />
)}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
};
const styles = EStyleSheet.create({
$rem: width > 380 ? 18 : 16,
container: {
flexDirection: 'row',
backgroundColor: '#fff',
borderRadius: 25,
elevation: 3,
marginBottom: 5,
width: '22rem',
justifyContent: 'space-between',
marginHorizontal: '0.5rem',
paddingVertical: '.75rem',
paddingHorizontal: '1.5rem'
},
textContainer: {
justifyContent: 'space-around'
},
leftContainer: {
flexDirection: 'row',
alignItems: 'center'
},
title: {
fontWeight: 'bold',
fontSize: 20,
color: '#454A66'
},
subtitle: {
color: '#454A66',
fontSize: 12
},
img: {
height: '3rem',
width: '3rem',
borderWidth: 1,
borderColor: '#169C75',
borderRadius: 30
},
icon: {
height: '1.5rem',
width: '1.5rem'
}
});
export default ProfileList;
I was just messing with some of the properties and all of a sudden it stopped rendering any style in the styles object. ive tried closing/opening the project. ive tried rebooting system. this just seems buggy because its happened before.
any suggestions or something I missed?