title: react-native-snap-carousel doesn't render properly
body: <p><strong>Summary of Problem</strong></p>
  
  <p>I'm using react-native-snap-carousel and it's not rendering properly.  It only renders after being swiped and I need to it render when the screen initially renders.  When I have the screen assigned to the initial route of my BottomTabNavigator or the initial route in my Stack Navigator in React Navigation, then the carousel renders perfectly.  When I assign the exact same screen to any other route in a Stack Navigator, then it doesn't render the carousel until I swipe it.  </p>
  
  <p>I need to use the screen with the carousel as the second route in my Stack Navigator and I can't figure out how to make it work properly.  </p>
  
  <p><strong>What I've tried</strong></p>
  
  <ol>
  <li>I've tried taking everything else out of the screen </li>
  <li>I've also tried creating a new screen from scratch.  </li>
  <li>I've tested the screen as the initial route in the Stack Navigator and 
  it works perfectly but I still can't get the carousel to render when 
  the screen loads.  </li>
  <li>I've also tried switching to a class based react component and that 
  hasn't helped.</li>
  </ol>
  
  <p><strong><em>Code</em></strong></p>
  
  <p><strong>Component with Carousel</strong></p>
  
  <pre><code>import React, { useState } from "react";
  import { View, Text } from "react-native";
  import { useDispatch } from "react-redux";
  import styles from "./StatSelectorStartComp.style";
  import HeaderText from "~/app/Components/HeaderText/HeaderText";
  import Carousel from "react-native-snap-carousel";
  import LargeButton from "~/app/Components/Buttons/LargeButton/LargeButton";
  import NavigationService from "~/app/services/NavigationService";
  import { saveStartCompStatCategory } from "~/app/Redux/actions/dailyCompActions";
  
  const StatSelectorStartComp = ({}) =&gt; {
    const dispatch = useDispatch();
    const ENTRIES1 = ["Kills", "Wins", "K/D", "Win %"];
    const [selectedStat, setSelectedStat] = useState(ENTRIES1[0]);
  
    const _renderItem = ({ item, index }) =&gt; {
      return (
        &lt;View style={styles.slide}&gt;
          &lt;Text style={styles.compSelectStatCarousel}&gt;{item}&lt;/Text&gt;
        &lt;/View&gt;
      );
    };
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.headerTextView}&gt;
          &lt;HeaderText header={"Configure Competition"} /&gt;
        &lt;/View&gt;
        &lt;Text style={styles.h5Secondary}&gt; Which stat will you track?&lt;/Text&gt;
        &lt;View style={styles.selectStatView}&gt;
          &lt;Text style={styles.mediumGreyedOut}&gt;Most {selectedStat} Wins&lt;/Text&gt;
          &lt;Carousel
            ref={c =&gt; {
              _carousel = c;
            }}
            data={ENTRIES1}
            renderItem={_renderItem}
            sliderWidth={375}
            itemWidth={100}
            onSnapToItem={index =&gt; {
              setSelectedStat(ENTRIES1[index]);
            }}
          /&gt;
        &lt;/View&gt;
        &lt;View style={styles.buttonView}&gt;
          &lt;LargeButton
            onPress={() =&gt; {
              dispatch(saveStartCompStatCategory(selectedStat));
              NavigationService.navigate("CompAddFriends");
            }}
            buttonText="Add Friends"
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  
  export default StatSelectorStartComp;
  </code></pre>
  
  <p><strong>Styles for Component with Carousel</strong></p>
  
  <pre><code>import { StyleSheet } from "react-native";
  import { backgroundColor } from "~/app/Constants";
  import {
    h5Secondary,
    mediumGreyedOut,
    compSelectStatCarousel
  } from "~/app/FontConstants";
  
  export default StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "space-between",
      backgroundColor
    },
    headerTextView: {
      flex: 1
    },
    h5Secondary,
    selectStatView: {
      flex: 3
    },
    mediumGreyedOut,
    compSelectStatCarousel,
    buttonView: {
      flex: 2
    }
  });
  </code></pre>
  
  <p><strong>React Navigation Configuration</strong></p>
  
  <pre><code>const StartCompStack = createStackNavigator({
    StartFriendsComp: {
      screen: StartFriendsComp
    },
    StatSelectorStartComp: {
      screen: CarouselTest
    },
    CompAddFriends: {
      screen: CompAddFriends
    },
    FinalCompScreen: {
      screen: FinalCompScreen
    }
  });
  
  const ProfileStack = createStackNavigator({
    Profile: {
      screen: ProfileScreen
    },
    Settings: {
      screen: SettingsScreen
    }
  });
  
  const BottomTabNav = createBottomTabNavigator(
    {
      Home: {
        screen: HomeScreen
      },
      Competitions: {
        screen: Competitions
      },
      StartComp: {
        screen: StartCompStack,
        navigationOptions: () =&gt; ({
          tabBarVisible: false
        })
      },
      CompScreen: {
        screen: CompScreen
      },
      Friends: {
        screen: FriendsDrawer
      },
      Profile: {
        screen: ProfileStack
      },
      FacebookFriendsList
    },
    {
      tabBarComponent: CustomTabNav,
      initialRouteName: "Home" 
    }
  );
  </code></pre>
  
  <p><strong><em>Pictures outlining the problem</em></strong></p>
  
  <p><strong>When screen loads, carousel not rendered</strong>
  <a href="https://i.stack.imgur.com/oFdUE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oFdUE.png" alt="When screen loads, carousel not rendered"></a></p>
  
  <p><strong>After swiping on carousel</strong>
  <a href="https://i.stack.imgur.com/uT02Z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uT02Z.png" alt="After swiping on carousel"></a></p>