Doesn't work: Dynamic render swiper page (show/hide).

I have used child components as each swipe page.
// for eg
// child components
export default component1 Site extends Component {
render(){
return <Text>Component1</Text>
}
}

// parent component (Having swiper)
<Swiper
ref={el => this.contentRef(el)}
scrollEnabled={true}
loop={false}
showsButtons={false}
showsPagination={false}
<Component1 />
<Component2 />
<Component3 />
<Component4 />
<Component5 />
</Swiper>

Now I have to show dynamic show/hide pages based on i had values like

• showComponent1 == true
• showComponent2 == false
• showComponent3 == false
• showComponent4 == true

when I applied it as following,
<Swiper
ref={el => this.contentRef(el)}
scrollEnabled={true}
loop={false}
showsButtons={false}
showsPagination={false}
{ showComponent1 && <Component1 />}
{ showComponent2 && <Component2 />}
{ showComponent3 && <Component3 />}
{ showComponent4 && <Component4 />}
<Component5 />
</Swiper>

Problem:

• It still display component2 and component3 in swiper. I cant use array or map for rendering pages in swiper because each are different components

Start by reproducing the conditional child rendering shown in the issue with react-native-swiper, then inspect how Swiper discovers and renders its child components. Confirm the behavior with showComponent2 and showComponent3 false; done means those pages no longer appear while the enabled pages remain available.