I want to use react-native-intro-slider in my react native application to make the intro pages as a slider. I have already implemented the pages as react functional components (where I can import them and use, ex:- ). But it seems that react native slider takes an array of json objects as inputs.
Ex:-
const slides = [ { key: 1, title: 'Title 1', text: 'Description.nSay something cool', image: require('./assets/1.jpg'), backgroundColor: '#59b2ab', }, { key: 2, title: 'Title 2', text: 'Other cool stuff', image: require('./assets/2.jpg'), backgroundColor: '#febe29', }, { key: 3, title: 'Rocket guy', text: 'I'm already out of descriptionsnnLorem ipsum bla bla bla', image: require('./assets/3.jpg'), backgroundColor: '#22bcb5', } ];
Instead of above json objects I want to pass the already created pages (functional components) as an input array. Something similar to below code:
const slides = [ { key: 1, <Page 1/> }, { key: 2, <Page2 /> }, { key: 3, <Page3 /> } ];
How can I do it, please?
Advertisement
Answer
That’s not part of their API. But I suppose you could switch components in the renderItem function.
const slides = ["1", "2"]; const renderItem = ({ item }) => { switch(item) { case "1": return <Page1 />; } };