I am developing a small app with React Native and I am using "react-native-swiper" in my app.
In this package "react-native-swiper", how do I know which page I am on now?
Can I get some value indicates which slide I am on such as slide index?
Now in the screen, there are 2 slides and every slides have same image which position is eccentric outside the slide. And I overlapped 2 images.
The problem is that:
In android, while I push from slide 1 to slide 2, then pink image disappear, but not iOS.
So I want to control it's opacity according to the slide index.
How to get the slide index in "react-native-swiper"?
you can use onIndexChanged prop function Called with the new index when the user swiped
This will give you the index of the current slide.
Related
In my application I want to create a couple animations on my FlatList.
For example, after fetching the data and feeding it to the list I want the items that should be visible to slide from the left. When I'm scrolling each item (at the top) that supposed to disappear will slide out to the right and each item that should appear (at the bottom) should slide from the left. Is it possible in React Native?
I only managed to create one type of animation - items sliding right when they are about to disappear, but I don't have any idea how to make the items to appear from the left.
My Animated.View can receive only one type of transform. So how can create different types of input/output ranges for the top and the bottom of the list?
I tried to find some examples on the internet but couldn't find any for multiple animations, only for one type.
I think you will find React Native Reanimated's Entering and Exiting Animations API
useful for this task. It greatly simplifies animations like this in my experience.
In case you want to get more control. Using a FlatList, you can also use its onScroll prop to get the current value for YOffset (contentOffset.y) via the Reanimated useAnimatedScrollHandler. Thus you can figure out how much has been scrolled.
Which you could then use to manually apply any translateX's required to the Animated.View of whatever items the flatlist is rendering. The logic you'll of course have to figure out though. But it's a start.
Be sure to do any animation interpolates using UI thread worklets on Reanimated only. Good luck!
I currently have a ScrollView/Flatlist containing 4 items with paging enabled. When rendered, each item covers the entire screen in portrait mode. On Android, when the user tries to swipe vertically from one item to another, this requires "large" swipe gestures.
I am trying to increase the "sensitivity" of the react native ScrollView so that the user requires smaller swipe gestures to switch from one item to another.
At the moment the switch to the next/previous page requires that roughly 50% of the target page is visible. I want to reduce this value so that the user does not need to do big swipe gestures.
Any suggestions on how I could fine-tune the props of the ScrollView/FlatList would be great!
As shown in the attached gif, the navigation bar at the bottom and the URL bar at the top are pushed in and out(not just show/hide at once) of view as user scrolls. How can I achieve this 'hiding' effect in React Native? The key point is that the hiding speed of the component should correspond to the scrolling speed.
I have tried giving negative values to the top and bottom, like so:
style={{bottom:dynamicallyChangingScrolledValue()}}
although it does push the view out of the screen, space where the component used to remain in the blank, occupied.
Are they using animations here? or changing some offset value dynamically by incrementing a small amount?
I'm creating a powerpoint which has a contents page, I would like that contents page to have clickable links to other slides in the presentation. The problem is currently those links only work when I go full screen, is there a way which I can click the link without going full screen?
Thanks
As Steve says Links only work in show mode. To get them to work in edit the only way is to RIGHT CLICK on them and choose Open Hyperlink from the menu.
Links only work in Slide Show view.
If you go to Slide Show | Set Up Slide Show, you can choose "Browsed by an individual (window)"
Then the slide show window will be moveable/resizable and won't necessarily fill the screen.
If the problem is that your presenter(s) aren't putting the deck into slide show mode before they start presenting (meaning your links don't work in normal/edit mode), you could try one of these solutions:
Add a solid filled rectangle that fully covers your first slide and set any Entrance animation on it with the Trigger / On Click of set to this shape. Then write the text in the shape "Please press F5 to start this presentation". The shape will never be seen in slide show mode but is a polite reminder for your presenters when they open the .pptx file.
Save the deck in the .ppsx file format, forcing it to automatically start in slide show mode.
I try to jump directly to a slide of my bx slider through a link from another page. For example - on page1.html there is a link to slide 7 of the slider on page2.html. How can I control the gotoslide function from an external page?
for all those who were searching for the same thing. My solution for now:
in the page where the slider is situated:
var startingSlide=document.URL.substring(document.URL.lastIndexOf('?')+1)-1;
and make
startSlide: startingSlide instead of a slide number.
The link from the other page to a specific slide is like this:
specific slide if you want to got to slide 5.
Don't know if that's the best way, but it works.