Questions tagged [react-native-swiper]

67 questions
6
votes
1 answer

How to properly update a react native swiper component when state changes?

I have a react native component that uses react-native-swiper module. One of the slides in the swiper contains text which is set in the component's state. In the component I also have a modal with form that changes the state's text when user tries…
yzhan
  • 170
  • 1
  • 3
  • 13
5
votes
2 answers

react-native-swiper next/previous button event

The swiper index value comes out in order of page order. However, when the button is pressed, the index value goes up to infinity. ex) next button click-> 6/5, 7/5, 8/5 What I would like to do is stop the button event on 5/5 but I do not know what…
김회준
  • 149
  • 3
  • 13
4
votes
1 answer

React Native Swiper ref element scrollTo does not work on first render

I am implementing an Introduction feature in my app. Where the screens show after splash screen. I used react-native-swiper component for guiding the user to step by step tutorial in my app. Here is my Slider.tsx component code below. type…
3
votes
1 answer

Adding multiple class for Swiper Pagination Bullet

I am trying to add a new element class to each of my pagination bullet, and I want to retain the default style of the swiper. So what I did is pagination={ clickable: true, bulletClass: `swiper-pagination-bullet…
Rich
  • 3,928
  • 4
  • 37
  • 66
3
votes
0 answers

react-native-swiper in android screen rotate from potrait to landscape, the scroll is not rerender

react-native-swiper issue swiper width and height are resized after screen rotation(using Dimensions.get('window').width, and height, but the scroll is not Re_render, it shows the portions of previous slide along with active slide
3
votes
2 answers

I am using react-native-swiper-flatlist , but I cannot figure it out how to use scrollToIndex on button press

I am using react-native-swiper-flatlist , I want to scroll forward to some index by tapping button but no clue how to do it. Although I am very beginner to react native development. I have searched alot but nothing helps, I get an error of undefined…
Talha Asif
  • 35
  • 4
2
votes
0 answers

how to bring smooth swipe experience for react native flat list

I have implemented a FlatList in my React Native app to render elements vertically. Each element takes up the height of the screen, and the user can see one element at a time. Upon scrolling, the user can view the next elements in the list. To…
2
votes
2 answers

When swiping react native app - screens shows twice

Live example https://snack.expo.dev/su1-U5DZc If I swipe screens with buttons - everything okay, but if I swipe with gesture - screens shows twice. Why so? Does this setWtf(state.index); const onTouchStart = (e, state, context) => { …
Hayate
  • 653
  • 1
  • 9
  • 25
2
votes
1 answer

React SwiperJS: horizontally nesting swiper components

When nesting one horizontal swiper within another I have been running into an effect where when the inner swiper reaches the beginning or end of the slide list, the swiping motion begins to move the parent swiper. In order to stop this, I attempted…
2
votes
0 answers

react-native-swiper add child dynamically

I want to add dynamically component in ? Like that: React.useEffect(()=>{ setDataArray([...data, newData]); // newData is just an example. },[index]) return ( { …
KAYZORK
  • 337
  • 1
  • 3
  • 17
2
votes
0 answers

Is there a way to swipe out of React-Native-Swiper component?

I am using react-native-swiper as part of my On-Boarding screens, and once the user swipes through the 3 welcome screens, I want them to be able to swipe once more and the next screen they see will be the main feed screen on which they cannot swipe…
2
votes
2 answers

How to Access Image in local JSON Array

Hijama = [ { name: 'Body Back', pic: '../Images/BackSide.png', }, { name: 'Body Front', pic: '../Images/images.jpg', },]; //here i want to render my pics render_swiper_data = () => { return this.Hijama.map((item, index) => { …
2
votes
2 answers

React Native swiper not working in StackNavigator for IOS

In my app, I have Login Screen, ForgotPassword Screen and SignUp Screen. In SignUp Screen I have used react-native-swiper to displays three step's slides of signup process. And I have wrap-up these screens in StackNavigator and render this…
2
votes
1 answer

How to Integrate react-native-swiper using flatlist

I was trying to integrate react-native-swiper, which loads videos in it. I am looking for a way to integrate it with a flat list. but the data is not loading properly, is there any alternative way to load data using flat list (using…
2
votes
0 answers

Rendering error with Native-base and Swiper

I've been following this tutorial here https://www.youtube.com/watch?v=pgDOpIm6ozQ(#1 Snapchat UI Swipe Animation | React Native Layouts - Expo and Native Base) However when I run it on expo it only shows a blank screen and I checked if there's…
1
2 3 4 5