React Native JSON object parse to url for SliderBox

Question

I have problem passing URL to SliderBox as props It works fine if I pass image using state or object in component file or at rendered screen. I am using url from JSON object I have used SliderBox like below:

<BackgroundCarousel images={selectedPlace.imageUrl}/>

Below is the component code for SliderBox.

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
 import Colors from '../constants/Colors';
import { SliderBox } from "react-native-image-slider-box";

export default class BackgroundCarousel extends Component {
  constructor(props) {
    super(props);

  } 
  render() {
    return (
    <View style={styles.container}>
     {this.props.images&&this.props.images.map((image,i)=>
     <SliderBox
      key={i}
      images={image}
      sliderBoxHeight={200}
      dotColor={Colors.darkWhite}
      inactiveDotColor="#90A4AE"
      paginationBoxVerticalPadding={20}
      autoplay
      circleLoop
      dotStyle={{
       width: 15,
       height: 15,
       borderRadius: 15,
       marginHorizontal: 10,
       padding: 0,
       margin: 0
     }}
     />
    )
   }
     </View>
   );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Below is a model for my data

class Places {
constructor(
id, 
categoryIds, 
title,
googleRating,
imageUrl, 
restrooms, 
generalDetails, 
whatIsHere,
address, 
website,
phoneNumber,
googleRatingFilter,
parkingFilter,
restroomFilter
){
    this.id =id;
    this.categoryIds = categoryIds;
    this.title =title;
    this.googleRating=googleRating;
    this.imageUrl=imageUrl;
    this.restrooms = restrooms;
    this.generalDetails = generalDetails;
    this.whatIsHere=whatIsHere;
    this.address = address;
    this.website=website;
    this.phoneNumber=phoneNumber;
    this.googleRatingFilter= googleRatingFilter;
    this.parkingFilter= parkingFilter;
    this.restroomFilter= restroomFilter;
}
}
export default Places;

i set a value like below

import Places from '../models/places';

export const PLACES =[
    // Restaurants
        new Places(
         'p1',
         'c3',
         "Nepal's Cafe",
         '970577703',
         '4.3 ✪',
         ["https://media-cdn.tripadvisor.com/media/photo-s/01/e6/a3/7d/nepal-cafe.jpg",
         "https://media-cdn.tripadvisor.com/media/photo-s/05/6d/1a/87/nepal-s-cafe.jpg",
         "https://source.unsplash.com/1024x768/?girl",
         "https://source.unsplash.com/1024x768/?tree"
      ],
         "Yes",
         [
         "Nepal's Cafe",
         'Google Rating - 4.3 ✪',
         'Restrooms - Yes',
         '184 E Elkhorn Ave, Estes Park, CO 80517'
         ],
         [
             'Curry',
             'Momo'
         ],
         '184 E Elkhorn Ave, Estes Park, CO 80517',
         "https://www.facebook.com/pages/Nepals-Cafe/166103146809347?utm_source=tripadvisor&utm_medium=referral",
         '970577703',
         true, //googleRating
         true, // Parking
         true  // Restroom
       ), ....

My ios and android devices show different error.

Below is an image error to see. Any help would be appreciated.

Answer 1

You are getting array.

Try like this

    render() {
     return (
     <View style={styles.container}>
      {this.props.images&&this.props.images.map(image=>
      <SliderBox
       images={image}
       sliderBoxHeight={200}
       dotColor={Colors.darkWhite}
       inactiveDotColor="#90A4AE"
       paginationBoxVerticalPadding={20}
       autoplay
       circleLoop
       dotStyle={{
        width: 15,
        height: 15,
        borderRadius: 15,
        marginHorizontal: 10,
        padding: 0,
        margin: 0
      }}
      />
     )
    }
      </View>
    );
   }

You can check this sample which i created for you to show... As per your objective you can change https://codesandbox.io/s/xenodochial-lumiere-xjhfm