title: (React-Native) Item in Flatlist do not shows the correct style as in Stylesheet on the first load
body: <p>I am trying to create a view with a top card showing an image and a bottom card showing relative information in a horizontal flatlist.</p>
  <p>The style gets broken on the first load and as soon as I refresh the code without any change, the component shows the correct style as expected.</p>
  <p>This is happening after I migrated the react native from 0.60.5 to 0.61.0.</p>
  <p>This is the code for component.</p>
  <pre><code>&lt;View
          accessible={Platform.OS === 'ios' ? false : true}
          style={styles.container}&gt;
          &lt;View style={styles.itemContainer}&gt;
            &lt;View style={styles.topContainer}&gt;
              &lt;ImageBackground
                source={{uri: item.img, cache: 'default'}}
                resizeMode=&quot;contain&quot;
                imageStyle={{borderRadius: 4}}
                style={styles.topContainer}&gt;
              &lt;/ImageBackground&gt;
              &lt;View style={styles.bottomContainer}&gt;
                &lt;Text style={styles.destination}&gt;{item.title}&lt;/Text&gt;
                &lt;Text style={styles.subtitle}&gt;{item.description}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  </code></pre>
  <p>This is the stylesheet.</p>
  <pre><code>import {StyleSheet, Platform} from 'react-native';
  import Color from '../../../../utilities/Color';
  import {BaseStyle} from '../../../../utilities/Style';
  
  const flex1 = {
    flex: 1,
  };
  
  const flexRow = {
    flexDirection: 'row',
  };
  
  const centerView = {
    justifyContent: 'center',
    alignItems: 'center',
  };
  
  const cardStyle = {
    ...Platform.select({
      ios: {
        borderWidth: 1,
        borderColor: Color.white,
        shadowOffset: {width: 1, height: 1},
        shadowOpacity: 0.2,
        shadowRadius: 2,
        borderRadius: 2,
        shadowColor: 'rgba(0, 0, 0, 1.0)',
      },
      android: {
        elevation: 2,
        borderRadius: 2,
      },
    }),
  };
  
  export default StyleSheet.create({
    container: {
      ...flex1,
      padding: 16,
      borderBottomWidth: 1,
      borderColor: '#efefef',
    },
    title: {
      ...BaseStyle.font16RobotoBoldGray,
    },
    subtitle: {
      ...BaseStyle.textSubHead1,
      top: 10,
      marginRight: 10,
      color: Color.lightTextGray,
    },
  });      
  export const ItemStyle = StyleSheet.create({
        container: {
          ...flex1,
          marginBottom: 15,
        },
        itemContainer: {
          height: 210,
          width: 260,
          marginRight: 15,
        },
        topContainer: {
          height: 162,
          borderRadius: 4,
        },
        bottomContainer: {
          ...cardStyle,
          position: 'absolute',
          left: 0,
          right: 0,
          top: 120,
          marginHorizontal: 8,
          paddingHorizontal: 15,
          paddingVertical: 12,
          borderRadius: 4,
          backgroundColor: Color.white,
        },
        destination: {
          ...BaseStyle.textTitle,
          fontSize: 14,
          lineHeight: 18,
          color: Color.darkGray,
          marginBottom: 8,
        },
        subHeading: {
          marginBottom: 4,
        },
        caption: {
          ...BaseStyle.textCaption,
          color: Color.lightTextGray,
        },
        subtitle: {
          ...BaseStyle.textSubHead1,
        },
      });
  </code></pre>
  <p>This is the image at the first load
  <a href="https://i.stack.imgur.com/2Evfq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Evfq.jpg" alt="Error in component style" /></a></p>
  <p>This is the image after I refresh the code.
  <a href="https://i.stack.imgur.com/9ZbeA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZbeA.jpg" alt="Correct style component" /></a></p>
  <p>Please suggest a way, how can I debug it. Or something wrong I am doing in my stylesheet?</p>