intellidev1991 / react-native-image-slider-box Goto Github PK

Hi

As seen on title i would like to remove dynamically images from slide, when i choose one image and remove it all images gone, i used index variable and put it in state to get current index, and just slice the item in array:
setState({ images: this.state.images.splice(i, 1) })

when i press on next button slider go next image
that's possible ?

Hi, is there any way to increase the autoplay interval? its currently about 2500ms i guess and i think its a bit quick.

The touchable highlight wrapping the ImageComponent needs underlayColor={'none'} or else when you press the image you get a black background.

I've never seen a fonskion called getPosition. how to get a position without clicking?

Thank you for awesome library. I have a question for image customization. I want to use ImageBackground (https://facebook.github.io/react-native/docs/imagebackground) component for set a text center on image. Like this;
<SliderBox images={this.state.imageList} customImage={(item)=><ImageBackground source={item} style={{width: '100%', height: '100%'}}> <Text>Inside</Text> </ImageBackground>} />
Is it possible?

Is this a bug report, a feature request, or a question?
Bug

Is the bug reproducible in a production environment (not a debug one)?
Yes

Environment
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-snap-carousel": 3.8.4

Target Platform:
Android (9.0)

Bug:
Warning : Calling 'getNode()' on the ref an Animated Component is no longer necessary.

Hello,

I use a prop disableOnPress and meet the warning below. Please help me fix it.

Warning: Failed prop type: Invalid prop `onPress` of type `boolean` supplied to `TouchableHighlight`, expected `function`.
- node_modules/prop-types/checkPropTypes.js:20:20 in printWarning
- node_modules/prop-types/checkPropTypes.js:83:12 in checkPropTypes
- node_modules/react/cjs/react.development.js:1501:19 in validatePropTypes
- node_modules/react/cjs/react.development.js:1590:22 in createElementWithValidation
- node_modules/react-native-image-slider-box/dist/SliderBox.js:58:7 in _renderItem
- node_modules/react-native-image-slider-box/dist/SliderBox.js:130:47 in renderItem
- node_modules/react-native-snap-carousel/src/carousel/Carousel.js:1224:29 in _renderItem

Hi,
I need to show slider images through call api to get images array. I'm facing a bug when reload page and api recall to get images array. Images don't show (blank) when reducing items amount in images array (array change)

how to fix this problem ?

I want to have 2 buttons previous and next. And clicking on those buttons I want to change the image of the slider box. Is there any way to do that?

Any props to adjust image size ?

<SliderBox images={imageList} circleLoop sliderBoxHeight={200} ImageComponentStyle={{ borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }} imageLoadingColor="#90A456" dotColor="#22A4AE" inactiveDotColor="#90A4AE" />

Hi, I can't slide between two photos on IOS, Android works just fine. I don't want autoplay props so I need to slide between photos. Maybe some additional props are required to enable this?

If I am not missing something there is no onLoad prop, and I think we need it.

when use circleloop console log show this error.
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 5760, "dt": 2091, "prevDt": 1034}

Do you guys have any plan to support typescript?

when run in emulator everything work well but when create apk and install it only show a white screen

Is there a way to render our own footer instead of rendering dots? something like 2/5 instead of dots.

I am using this package in "react-native": "0.62.2", which brings up that warning. Below is the complete warning

Calling getNode() on the ref of an Animated component is no longer necessary. You can now directly use the ref instead. This method will be removed in a future release. Personally i think it's something to do with Reanimated being included by default now.

I tried to test the autoplay with circleLoop and I saw the memory usage becomes like following image.

Then I off the autoplay and it is linear. Would be nice if you can take a look :D

Btw, thanks for the great library.

is tehre any way to achieve this like the original library?
https://github.com/archriss/react-native-snap-carousel/blob/master/src/carousel/Carousel.js

I see dot is slower than image

I need popup the image when someone touch the image in slide box. please any help

Hello,

How can i set time for the AutoPlay ?

Thanks

Hello, please is there a way to reduce the time for the transitions for the images?

Image border radius not working
ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 5}}

Hello, I just installed and tried this component.

While it has everything that we need for this project, it just missing dots
Below is my code.

import React, { useState, useEffect } from "react";
import { FlatList, View, StyleSheet,Dimensions } from "react-native";
import firestore from "@react-native-firebase/firestore";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { theme } from "../../utils/theme";
import {
  emailValidator,
  passwordValidator,
  firstNameValidator,
  lastNameValidator
} from "../../utils/utils";
import styles from "../../utils/styles";
import {
  Surface,
  Text,
  TextInput,
  ActivityIndicator,
  Button
} from "react-native-paper";
import { SliderBox } from "react-native-image-slider-box";
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;

export default function RetailScreen() {

  const [images, setImages] = useState([]);
  useEffect(() => {
    setImages([
      "https://source.unsplash.com/1024x768/?nature",
      "https://source.unsplash.com/1024x768/?water",
      "https://source.unsplash.com/1024x768/?girl",
      "https://source.unsplash.com/1024x768/?tree", 
    ])

  }, []);


  return (
    <Surface style={styles.containerHome}>
      <View style={styles.flex1}>
        <SliderBox images={images}
          // onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
          // currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
          sliderBoxHeight={deviceHeight/3}
          dotColor="red"
          inactiveDotColor="blue"
          dotStyle={{
            width: 15,
            height: 15,
            borderRadius: 15,
            marginHorizontal: 10,
            padding: 0,
            margin: 0
          }} />

      </View>
    </Surface>
  );
}

Let me know if you find any issue? .Thanks

Hi!
is it possible to assign a position to the slide? for example if I put position={2}, I have the second image that appears

I am having issues with touchablehighlights default bg color. see screenshots please.

https://ibb.co/KWvRPt1
https://ibb.co/HtGvRQG

I recommend changing it with simply a view when disableOnPress is given.

I am experiencing this issue with the sliderbox.I am only loading 6 images.

full warning message.
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
"contentLength": 6283.63623046875,
"dt": 2370,
"prevDt": 509,
}

Hi!

Is there a way to use the resizeMode props for Images?

Calling getNode() on the ref of an Animated component is no longer necessary. You can now directly use the ref instead. This method will be removed in a future release. FlatList

Is there a way to define the space between each dot. I am scaling the size of my dost with respect ti number of images. when count is large (more than 10) dost are so small to fit in the screen but spacing between them is ridiculous.

It would be nice if i can set the horizontal spacing between dots.

 <View
              styles={{
                marginTop: 20,
                marginLeft: 10,
                marginEnd: 10,
                alignItems: 'center',
                flexDirection: 'row',
                justifyContent: 'center',
              }}>
              <SliderBox
                images={this.state.images}
                sliderBoxHeight={200}
                parentWidth={Dimensions.get('window').width - 20}
           
    
              />
            </View>

There is no margin start

When I have more than one image it's working perfectly on debug mode , but when I tried to generate a signed apk , it crashed when I have more than one image in the box.
I am using the latest version of the library.

my code is so simple :
state={
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
ads:[ "https://source.unsplash.com/1024x768/?nature",
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?girl",]
}
render(){
return(<SliderBox resizeMode="cover" images={this.state.ads}
parentWidth={this.state.width} sliderBoxHeight={60} paginationBoxStyle={{opacity: 0}}
/>);
}_

OS: Android
Model: Huawia Nova 3
OS version: 9
react-native :V 0.61.5

onCurrentImagePressed prop does not work.
React - 16.9.0
React-Native - 0.61.4
react-native-image-slider-box - 1.0.5

hi, im using this library and my package already installed react native linear gradient, and result this view.

Code

    <KeyboardAvoidingView behavior='position'>
      <Text>TestSliderScreen</Text>
      <SliderBox images={this.state.images} />
    </KeyboardAvoidingView>
 </ScrollView>

how to remove gradient over image ?

Is there any way to know the current image index? I want to load a new screen if a user tries to slide the last image of the gallery.

Thanks for this package, can i show 3 or 4 images per slide like below ?

images prop should support Immutable types.

Currently, the List Immutable type (such as Immutable.List) has to be converted to javascript objects using the .toJSON() function.

hi, really thanks for the component. working perfectly for me but some times images are not loading showing loading indicator like the image shown. my code is as follows.

<SliderBox
images={this.state.photos}
sliderBoxHeight={500}
dotColor="#FFEE58"
inactiveDotColor="#90A4AE"
paginationBoxVerticalPadding={20}
circleLoop
autoplay
resizeMethod={'resize'}
resizeMode={'contain'}
ImageComponentStyle={{ borderRadius: 15, width: '100%' }}
/>

when i browse the link i am able to view the image. please help. thanks

version : "react-native-image-slider-box": "^1.0.12"

Thanks for the package, please is there a way to add an overlay text on the images?

This warning message shown after upgrading RN to : 0.62.0 or 0.62.1

Is there any props to load image until response from server

Can we disable the scaling effect when image is changing?

I want it slide horizontally without scaling..