How to pass React Native Component as a JSON object

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?

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 />;
  }
};

Advertisement

Answer