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

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.

<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?

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

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

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

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.

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

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

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"

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.

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

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}

Hello,

How can i set time for the AutoPlay ?

Thanks

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.

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.

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

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 ?

Do you guys have any plan to support typescript?

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

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) })

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

I see dot is slower than image

 <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

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

Can we disable the scaling effect when image is changing?

I want it slide horizontally without scaling..

Hi!

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

Is there any props to load image until response from server

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,
}

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

Any props to adjust image size ?

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

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

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 ?

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?

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

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

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

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?

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

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

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.

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

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.

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.