title: Child component style not working, but when i save code in child component then after hot reloading style gets applied to child component
body: <p>I created one custom drawer which consist of menu items. There are three components
  1.CustomDrawer
  2.DrawerMenu
  3.MenuItem</p>
  
  <p>When i test apk using react-native run-android, styles defined to child component (MenuItem) not work.But after hot realoading in child component code save it works properl. I need to apply style on first load.</p>
  
  <p>1.CustomDrawer</p>
  
  <pre><code>import {
    View,
    Text,
    ScrollView,
    TouchableOpacity,
    StyleSheet,
    Image,
  } from 'react-native';
  import * as menuData from './../database/appMenu.json';
  import DrawerMenu from './DrawerMenu.js';
  import DrawerMenuHeader from './DrawerMenuHeader.js';
  
  class CustomDrawer extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const AppMenu = menuData.fcAppMenu; // Drawer Menu list
      const menuHeader = menuData.menuHeader; // Drawer header image and heading
      return (
        &lt;ScrollView &gt;
          &lt;DrawerMenuHeader Header={menuHeader} /&gt;
          &lt;View key='AppMenu' /&gt;
          &lt;DrawerMenu navigationOptions={this.props.navigation} AppMenu={AppMenu} /&gt;
        &lt;/ScrollView&gt;
      );
    }
  }
  
  styles = StyleSheet.create({
    container: {
      paddingTop: 20,
      flex: 1,
    },
    lineStyle: {
      borderWidth: 0.5,
      borderColor: 'black',
      margin: 10,
    },
  
  });
  
  export default CustomDrawer;
  </code></pre>
  
  <p>2.DrawerMenu</p>
  
  <pre><code>import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
  import MenuItem from './MenuItem';
  
  export default class DrawerMenu extends Component {
    constructor(props) {
      super(props);
      this.toggleItemView = this.toggleItemView.bind(this);
      this.state = {
        menuList: [],
      };
    }
  
    toggleItemView = ItemKey =&gt; {
      let menuList = [];
      if (this.state.menuList[ItemKey] === undefined) {
        menuList[ItemKey] = true;
      }
      else {
        menuList[ItemKey] = !this.state.menuList[ItemKey];
      }
      this.setState({ menuList: menuList });
    };
  
    render() {
      const { AppMenu, navigationOptions, childElement } = this.props;
      return (
        &lt;View&gt;
          {AppMenu.map((menu, mainIndex) =&gt; (
            &lt;View
              style={childElement ? styles.navSectionStyle : styles.container}
              key={mainIndex}&gt;
              &lt;TouchableOpacity
                onPress={() =&gt; menu.subMenu.length &gt; 0 ? this.toggleItemView(mainIndex) : navigationOptions.navigate(menu.routeName)
                }&gt;
                &lt;MenuItem name={menu.name} img={menu.img} childElement={childElement}/&gt;
              &lt;/TouchableOpacity&gt;
              {menu.subMenu &amp;&amp; menu.subMenu.length &gt; 0 &amp;&amp;
                this.state.menuList[mainIndex] &amp;&amp;
                &lt;DrawerMenu
                  AppMenu={menu.subMenu}
                  childElement={true}
                  navigationOptions={navigationOptions}
                /&gt;
              }
            &lt;/View&gt;
          ))}
        &lt;/View&gt;
      )
    }
  }
  
  
  styles = StyleSheet.create({
    container: {
      paddingTop: 4,
      // flexDirection:'row',
      // justifyContent:'space-between'
    },
    navSectionStyle: {
      backgroundColor: '#e5e5e5',
      paddingLeft: 10,
      // flexDirection:'row',
      // justifyContent:'space-between'
    },
  });
  
  </code></pre>
  
  <p>3.MenuItem</p>
  
  <pre><code>import React from 'react';
  import { View, Text, StyleSheet, Image } from 'react-native';
  
  export default MenuItem = (props) =&gt; {
      const {name,img,childElement} = props;
      return(
      &lt;View style = { styles.inlineImageText } key={name}&gt;
              &lt;Image
                  source={require("../assets/icons/profile.png")}
                  style={styles.iconSize}
              /&gt;
              &lt;Text
                  style={
                      childElement ? styles.navItemStyle : styles.sectionHeadingStyle
                  }&gt;
                  {name}
              &lt;/Text&gt;
      &lt;/View&gt;
      )
  }
  
  styles = StyleSheet.create({
      inlineImageText: {
        flexDirection: 'row',
        alignItems: 'center'
      },
      iconSize: {
        width: 20,
        height: 20
      },
          sectionHeadingStyle: {
        paddingHorizontal: 5,
        fontSize: 15,
        // fontWeight: 'bold'
      },
      navItemStyle: {
        padding: 4,
        borderColor: '#848484',
        borderBottomWidth: 1,
        fontSize: 13
      },
      navSectionStyle: {
        backgroundColor: '#e5e5e5',
        paddingLeft: 10,
        // flexDirection:'row',
        // justifyContent:'space-between'
      },
    });
  
  </code></pre>