Search code examples
react-nativereact-native-ui-kitten

Kitten UI Network Gallery

I am a new but nice programmer in C# . Yet i am trying to learn the React world. It looks good to me. I am trying to use react-native-ui-kitten plugin's RkGallery component.

Simple usage example : 

<RkGallery items={[
  require('path/to/my-awesome-pic-0.jpg'),
  require('path/to/my-awesome-pic-1.jpg'),
]} />

So there comes the question. I tried to implement simple networks images on this component. Like

<RkGallery items={[
  "uri:imageURL1",
  "uri:imageURL2",
]} />

nor

<RkGallery items={[
  <Image style={{width: 150, height: 150}} source={{uri: imgURL1}} />,
  <Image style={{width: 150, height: 150}} source={{uri: imgURL2}} />,
]} />

Yet i couldn't implement it. Anybody can help me ?

Solution

  • Looks like you already have this ability :) If you look through sources, you should see, that RkGallery items are RkGalleryImage. When you pass array of items to RkGallery, it translates it one-by-one into each RkGalleryImage through the source prop. This prop works the same way as it does plain react-native Image component. So you can use it like this:

    <RkGallery items={[
  {uri: 'https://path-to/my-awesome-pic-0.jpg'},
  {uri: 'https://path-to/my-awesome-pic-0.jpg'},
]} />