0

I am trying to create an image carousel using the "react-native-image-slider-box" library. I configured the library classes and parameters properly but I am not able to see the image-carousel in the mobile expo app.

Code that I used:

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

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
        images: [
            require('./commonComponents/photos/photo2.jpeg'),
            require('./commonComponents/photos/photo3.jpg'),
            require('./commonComponents/photos/photo4.jpg'),
            require('./commonComponents/photos/photo3.jpg'),
        ]
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <SliderBox
                    images= { {uri: this.state.images } }
                    sliderBoxHeight={400}
                    onCurrentImagePressed={index =>
                        console.warn(`image ${index} pressed`)
                    }
                />
                <HomeGrid />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
      flex: 1
    }
  });

And the images are present inside a directory like this:

ProjectName
   ---> src
       ---> components
                ---> commonComponents
                        ---> photos
                                ---> photo1.jpeg

Where am I going wrong in this? What should I do to make the image slider working? The output is only showing the HomeGrid component and not the SliderBox component.

shikher.mishra
  • 155
  • 8
  • 24

2 Answers2

0

In the Example of react-native-image-slider-box below, it just import image like this.state.images without uri:

<SliderBox
  images={this.state.images} // like this
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
/>

------update try code-----------work fine----

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { SliderBox } from "react-native-image-slider-box";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        "https://images1.epochhk.com/pictures/112999/Fotolia_61981708_Subscription_L@1200x1200.jpg",
        "https://i1.read01.com/SIG=3d308k4/304a3259317255786a6f.jpg",
        "https://images1.epochhk.com/pictures/112999/Fotolia_61981708_Subscription_L@1200x1200.jpg",
        "https://i1.read01.com/SIG=3d308k4/304a3259317255786a6f.jpg"
      ]
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <SliderBox
          images={this.state.images}
          sliderBoxHeight={200}
          onCurrentImagePressed={index =>
            console.warn(`image ${index} pressed`)
          }
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});
高鵬翔
  • 1,997
  • 2
  • 8
  • 21
  • Still not able to see it, I tried installing it using the command: "npm i react-native-image-slider-box", inside my project, but now getting the error: "Unable to resolve "./SliderBox" from "node_modules/react-native-image-slider-box/index.js" Failed building JavaScript bundle." – shikher.mishra Apr 20 '20 at 08:26
  • Are you import like this `import { SliderBox } from "react-native-image-slider-box";` ? – 高鵬翔 Apr 20 '20 at 08:28
  • I recommend you to 1. npm uninstall react-native-image-slider-box 2. npm i react-native-image-slider-box PS: Why did you install again? – 高鵬翔 Apr 20 '20 at 08:31
  • And if possible, please point out where is this class located, maybe it just the import url fault. – 高鵬翔 Apr 20 '20 at 08:34
  • The class is at the same location, the editor is able to catch the class but for some reason, its not working. I tried uninstalling and installing it again, but it didn't work. – shikher.mishra Apr 20 '20 at 08:36
  • I went to the issue of [react-native-image-slider-box](https://github.com/intellidev1991/react-native-image-slider-box/issues/22), it seems there have some bug to show images sometimes? – 高鵬翔 Apr 20 '20 at 08:38
  • I am not even seeing the slider, the link above shows that only the images are not getting displayed, but for me, it's not even the slider block is coming. – shikher.mishra Apr 20 '20 at 08:40
  • But I try the [sample code](https://codesandbox.io/s/crazy-leavitt-hghwb) on web, it could work. – 高鵬翔 Apr 20 '20 at 08:53
  • Yup I was able to remove the bundling error, but don't know why it is still not working – shikher.mishra Apr 20 '20 at 09:01
  • I change your code and run on web, it looks work fine. I update the code in answer, maybe you could take a try by importing url ? If it works, then change back to your locate image? – 高鵬翔 Apr 20 '20 at 09:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212061/discussion-between--and-shikher-mishra). – 高鵬翔 Apr 20 '20 at 09:05
0

Didn't work for me but you can check node/modules folder

Mehdi Shojarazavi
  • 1