I have this code:
<FlatList
ref={(x) => (this.flatList = x)}
data={players}
style={this.props.style}
/>
What I need is to save the current scroll position of the FlatList when the user e.g. navigates away.
So something like this.flatList.getCurrentScrollPosition().
Is there such a thing?
FlatList inherits all of ScrollView props. Therefore you can use onScroll.
onScroll = (event) => {
const scrollOffset = event.nativeEvent.contentOffset.y
}
Related
I have a React Native app with a parent ScrollView component that wraps other 2 ScrollViews that are siblings. How could I force the parent to only scroll when I've started scrolling from outside the child components?
Current behavior:
When I start scrolling in a child, the child scrolls, but when the list reaches the end, the parent starts scrolling (finger was not removed from the screen, so it was the same scrolling action).
Desired behavior:
When I start scrolling in a child, the child scrolls, but when the list reaches the end, the parent does NOT scroll until I interrupt the current scrolling action and start scrolling again from the area of the parent.
You can't have nested scroll views in the same direction. You can try to improve the UI.
Even for the user this can be confusing.
Send a screenshot, so people can better understand what the goal is.
export const ScrollEnabledContext = createContext(null);
const Parent = () => {
const ref = useRef(null);
const setIsEnabled = (bool) => {
ref.current?.setNativeProps({ scrollEnabled: bool });
};
return (
<ScrollEnabledContext.Provider value={setIsEnabled}>
<ScrollView ref={ref} nestedScrollEnabled={true}>
<ChildScrollView />
</ScrollView>
</ScrollEnabledContext.Provider>
);
};
const ChildScrollView = () => {
const value = useContext(ScrollEnabledContext);
return (
<ScrollView onTouchStart={() => value(false)} onTouchEnd={() => value(true)}>
....
</ScrollView>
);
};
I have content that I want to "refresh" with a RefreshControl but I do not want the content to scroll upwards. I was originally under the impression that setting bounces=false and scrollEnabled=true would achieve this.
How about you set a key to the Component, then update it when you want to refresh it.
When a key changes, React see it as a new component. As a result, it will literally refresh the component.
export default () => {
const [refreshKey, setRefreshKey] = React.useState('randomstring');
// call me when refresh required
const refresh = () => {
setRefreshKey(refreshKey + 'randomstring');
};
return (
<ScrollView key={refreshKey}>
{/* Some Awesome Contents */}
</ScrollView>
);
};
Hi everyone I just want to animate text and image. This code I wrote is animating at the beginnig.When I update the state, animation is gone just changing image and text. How can I fix it.
//the package I installed from npm
import * as Animatable from 'react-native-animatable';
//the images array changes by state
var arr=[{image:require('./assets/img1.png')},{image:require('./assets/img2.png')},{image:require('./assets/img3.png')}];
//The initial state
state = {
uri: require('./assets/img1.png'),
message:"-",
img_rank:0
};
//In onpress method of TocuhableOpacity
<TouchableOpacity
onPress={() => {
const randomIndex = Math.floor(Math.random() * 3);
//state of message
this.setState({ message: "Act1" });
//state of image rank from the array
this.setState({ img_rank: randomIndex })
...
Showing the text and image
//it's showing the image with animation at the beginning
<Animatable.Image source={arr[this.state.img_rank].image} animation="zoomInUp">
</Animatable.Image>
//the text but it's not animating
<Animatable.Text animation="zoomInUp">
<Text>{this.state.message} </Text>
</Animatable.Text>
Thank you.
Firstly, get your animated component's ref into a variable in your class like animatedImageRef.
<Animatable.Image
ref={r => this.animatedImageRef = r}
source={arr[this.state.img_rank].image}
animation={this.state.img_rank ? 'zoomInUp' : undefined}>
</Animatable.Image>
Then, in your onPress function, use this ref to animate your component again.
this.animatedImageRef.startAnimation(500, 0, () => { })
I would like to have an event like onScroll on the ScrollView but onSwipe on the Swiper. And in this callback I would like to get the "swipe progress" (e.g. swiped 50% to the second item). With all the supported callbacks I can do something when the swipe starts or ends but I also want all the steps in between. How could I do this?
To get the scrolled position of the current view
Swiper component is a ScrollView and you can use its native props with Swiper as well, for your case use onScroll prop to get where the scroll is and the percentage swipped.
const viewWidth = Dimensions.get('window').width;
...
<Swiper
scrollEventThrottle={16}
onScroll={(e) =>
const scrolledPercentage =(e.nativeEvent.contentOffset.x / (viewWidth * (this.currentIndex + 1)));
}
>
...
</Swiper>
.
To get the progress of your passed views
Just get the current index with onIndexChanged props and then calculate your progress with the count of your Views inside of the swiper
<Swiper
style={styles.wrapper}
showsButtons={true}
onIndexChanged={(index) => {
let progress= index/totalNumberOfView
let progressInPercentage = Math.floor(progress*100)
this.setState({
progress,
progressInPercentage
})
}
>
I have a scrollview which content is larger than phone screen.
I scroll to the bottom and there I have function that reload content of that scrollview but first clear data source for it.
Reload function is connected to RefreshControl on scrollview.
But RefreshControl is not visible while loading data except when I slightly touch screen where content should be.
And this is only when I start reload from scrollview bottom.
I tried to scroll to top but it doesn't solve it:
onContentSizeChange={(contentWidth, contentHeight) => {
this.scrollView.scrollTo({ y: 0 });
}}
Any idea why this is happening?
<ScrollView
ref={ref => (this.scrollView = ref)}
refreshControl={
<RefreshControl
refreshing={this.props.getDataInProgress}
onRefresh={this.reloadData.bind(this)}
/>
}
>
{this.renderData()}
renderData() {
return this.props.data.map((item, index) => {
return ... some function that return other components
So as I wrote if I pull down loader is visible.
But if I scroll to bottom and click one some button that call same function as pull to refresh loader is not visible.
EXAMPLE