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 descriptions\n\nLorem 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?
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 />;
}
};