Carousel only renders after swiping. Does not render with initial screen render

Is this a bug report, a feature request, or a question?

Question

---

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.

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. Help would be greatly appreciated because it’s a great library and is working perfectly in my other screens!

What I’ve tried

1. I’ve tried taking everything else out of the screen
2. I’ve also tried creating a new screen from scratch.
3. 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.
4. I’ve also tried switching to a class based react component and that hasn’t helped.

Component with Carousel

`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 = ({}) => { const dispatch = useDispatch(); const ENTRIES1 = [“Kills”, “Wins”, “K/D”, “Win %”]; const [selectedStat, setSelectedStat] = useState(ENTRIES1[0]);

const _renderItem = ({ item, index }) => { return ( <View style={styles.slide}> <Text style={styles.compSelectStatCarousel}>{item}</Text> </View> ); };

return ( <View style={styles.container}> <View style={styles.headerTextView}> <HeaderText header={“Configure Competition”} /> </View> <Text style={styles.h5Secondary}> Which stat will you track?</Text> <View style={styles.selectStatView}> <Text style={styles.mediumGreyedOut}>Most {selectedStat} Wins</Text> <Carousel ref={c => { _carousel = c; }} data={ENTRIES1} renderItem={_renderItem} sliderWidth={375} itemWidth={100} onSnapToItem={index => { setSelectedStat(ENTRIES1[index]); }} /> </View> <View style={styles.buttonView}> <LargeButton onPress={() => { dispatch(saveStartCompStatCategory(selectedStat)); NavigationService.navigate(“CompAddFriends”); }} buttonText=“Add Friends” /> </View> </View> ); };

export default StatSelectorStartComp;`

Style for Component with Carousel

`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 } });`

React Navigation Configuration

`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: () => ({ tabBarVisible: false }) }, CompScreen: { screen: CompScreen }, Friends: { screen: FriendsDrawer }, Profile: { screen: ProfileStack }, FacebookFriendsList }, { tabBarComponent: CustomTabNav, initialRouteName: “Home” } );`

[HughBerriez]

removeClippedSubviews={false} worked for me from #238

[bd-arc]

You might want to take a look at #238 and give a try to the triggerRenderingHack () method.