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

[BenjErgizerBunny]

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 (

{item}

);
};

return (


<HeaderText header={"Configure Competition"} />

Which stat will you track?

Most {selectedStat} Wins
<Carousel
ref={c => {
_carousel = c;
}}
data={ENTRIES1}
renderItem={_renderItem}
sliderWidth={375}
itemWidth={100}
onSnapToItem={index => {
setSelectedStat(ENTRIES1[index]);
}}
/>


<LargeButton
onPress={() => {
dispatch(saveStartCompStatCategory(selectedStat));
NavigationService.navigate("CompAddFriends");
}}
buttonText="Add Friends"
/>


);
};

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

[bd-arc]

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

[antonsokolow]

Faced the same problem. triggerRenderingHack() doesn't work for me.

[bd-arc]

@BenjErgizerBunny @onepood Could one of you guys share a Snack example in which the issue can be reproduced?

[HughBerryman]

removeClippedSubviews={false} worked for me from #238

[antonsokolow]

@bd-arc Here you are https://snack.expo.io/@onepood/carousel-only-renders-after-swiping
Looks like it works fine on iOS now.
On Android I see a bug, not sure that it is the same.