React Native - Some Styles in screen do not load unless i manually save screen file again

I've been battling with this for sometime now, One particular Screen in my react native application loads without some of the styles when i run the application the first time. I have to manually save that screen.js file (which is already saved) in my editor before the app refreshes and load all of the styles on that screen. I tried bundling an unsigned apk to see if the screen will have all the styles loaded in the bundled apk but still doesn't.

So the initial build loads just part of the styles and then saving that particular file again (which is already saved) refreshes the screen with all the styles loaded. I think this is kind of odd and i'll appreciate all the help i can get.

Also i'll like to mention that, the screen giving me this issue is in a BottomTabNavigator and the only part of the screen giving me this issue is the Flatlist Component i'm using to render a list of items on the screen. The other components on the screen render just fine.

This is the code for the screen giving me problems

import React from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity, FlatList } from 'react-native'
import MeetingItem from './meetingItem'

const MeetingsScreen = ({navigation, data})=>{
return <View style={styles.container}>
    <View style={styles.cardContainer}>
        <View style={styles.groupContainer}>
        <Text style={styles.groupTitle} numberOfLines={1}>Groups Masters A </Text>
        <View style={styles.groupDetailsContainer}>
            <Text style={styles.groupDetailsText}><Text>Facilitator: </Text>Frederick Bans</Text>
            <View style={styles.groupNumberContainer}>
                <Text style={styles.groupNumber}>25</Text>
                <Image source={require('../assets/group-white.png')} style={styles.groupIcon}/>
            </View>
        </View>
        </View>
    </View>
    <FlatList 
            data={[1,2,3,4,5,6,7,8,9,11,10,12,13,14,15,16,17,18]}
            renderItem={({item})=> (<TouchableOpacity onPress={()=>navigation.navigate("Chat")}>
            <MeetingItem/>
        </TouchableOpacity>)}
            keyExtractor={item => item.toString()}
            ListFooterComponent={<View style={{marginTop: 100}}/>}
            showsVerticalScrollIndicator={false}
        />  
        {/* <MeetingItem/>
        <MeetingItem/>
        <MeetingItem/>
     */}
</View>
}

MeetingsScreen.navigationOptions = ()=>({
    title: "",
    headerRight: (<TouchableOpacity style={{
        marginRight: 10,
        fontSize: 15, 
        borderColor: "white", 
        borderWidth: 1,
        padding: 4
    }}>
        <Text style={{color: "white"}}>Create Meeting</Text>
    </TouchableOpacity>)
})

const styles = StyleSheet.create({
    container:{
        flex: 1
    },
    headerRight:{
        marginRight: 10,
        fontSize: 15, 
        borderColor: "white", 
        borderWidth: 1,
        padding: 4
    },
    cardContainer:{
        height: 90,
        borderRadius: 0,
        justifyContent: "center",
        backgroundColor: "#067b7a",
        elevation: 3
    },
    groupIcon:{
        width: 30,
        height: 20
    },
    groupContainer:{
        marginHorizontal: 15
    },
    groupDetailsContainer:{
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 10,
    },
    groupDetailsText:{
        color: "white",
        flex: 0.7,
        opacity: 0.7

    },
    groupNumberContainer:{
        flexDirection: "row",
        alignItems: "center",
        flex: 0.2
    },
    groupNumber:{
        fontSize: 15,
        marginRight: 5,
        color: "white"
    },
    groupTitle:{
        fontSize: 21,
        color: "white",
    }
})

export default MeetingsScreen;

And this is the code for the meetingItem I'm rendering in the FlatList

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

const MeetingItem = ({navigation})=>{
    return <View style={styles.container}>
        <View style={styles.dateContainer}>
            <Text style={styles.dateText}>13th Oct 2017</Text>
        </View>

        <View style={styles.titleContainer}>
        <Text style={styles.titleText} numberOfLines={2}>Second Meeting of the month</Text>
        </View>

    </View>
}

styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: "row",
        height: 70,
        justifyContent: "space-around",
        marginVertical: 10,
        marginHorizontal: 10
    }, 
    dateContainer:{
        flex: 0.3,
        borderTopLeftRadius: 4,
        borderBottomLeftRadius: 4,
        justifyContent: "center",
        alignItems: "center",
        padding: 10,
        borderWidth: 1,
        borderColor: "#bdbdbd"
    },
    titleContainer:{
        flex: 0.7,
        borderBottomRightRadius: 4,
        borderTopRightRadius: 4,
        justifyContent: "center",
        alignItems: "center",
        padding: 10,
        borderWidth: 1,
        borderColor: "#bdbdbd"
    },
    dateText:{
        textAlign: "center",
        fontSize:19
    },
    titleText:{
        textAlign: "center",
        fontSize: 16
    }

})

export default MeetingItem;

Thanks in advance for the assistance.