Good day guys , is there anyway I can control how far the flatlist can scroll ? I'm trying to make an image viewer. When there is multiple image , the user can scroll to the 2nd image without reaching the 3rd image. Thank you. Expected outcome :
Either you can use a library like react native snap carousel
or use the function of scrollToIndex inside any function ,so that you can control which index the user goes ==
scrollToNext(){
this.flatListRef.scrollToIndex({animated: true, index: newIndex});
}
<Flatlist
ref={ref => {
this.flatListRef = ref;
}}
/>
hope it helps. feel free for updates
Related
I need to use a callback function for the mouse click event. Below code is working in React web app:
const checkAnswer = (e: React.MouseEvent<HTMLButtonElement>) => {
const answer = e.currentTarget.value // here .value property is undefined and gives error in React-Native. Just e.currentTarget is defined.
const correct = questions[number].correct_answer === answer
if(correct) setScore(prev => prev + 1)
}
But I couldn't apply it on React Native (mobile) for Pressable or TouchableOpacity.
This is the render part of React web app's code:
<button value={answer} onClick{checkAnswer} />
and I try to apply it on React Native. The value will be passed to button's value. But there is no "value" option in native's Pressable component. Therefore I am confused
Any help?
you can determine touch events by following
<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />
Here is some similar scenario what I could able to understand from the question.
There is a Score state which will store the user's score of a quiz game.
There is a array of question where all the options and correct option are given.
There will be a button for the option, if user choose a option, and based on that it will validate if user is correct or not.
It might not be the exact scenario of you. But this could definitely help to solve your scenario.
Here is a solution for the scenario => solution.
If you click on the solution link you will be redirect to a page which is similar to the screenshot attached below. On very right you will find "My Device", "Android", "ios", choose any and run. Run via "my device" with expo app installed in your mobile if you don't want to be in queue for some certain time.
Note: from your code this is for React web:
<button value={answer} onClick{checkAnswer} />
but in React Native you have to use a click event like this:
<TouchableOpacity onPress={()=>buttonHandler()}></TouchableOpacity>
Here ()=> and () extra need to be added to work a function properly.
Also instead of .map() function you can use FlatList to improve your app. FlatList support lazy loading.
I am new to ReactNative and have encountered an issue regarding page refreshing. I have some filters in my screen and will like the page to refresh once any of these filters are pressed, but am unable to find any guides on how to do so. I have searched endlessly but only found numerous guides on refreshing with pulldown, and I feel like the solution has something to do with React.useEffect but am unfamiliar with that.
The important parts of my code are as below:
The TouchableOpacity component to trigger the refresh:
<TouchableOpacity
style={styles.filterButton}
onPress={() => {
sortByRating()
}}
>
where sortByRating() is a function to sort my eateriesToShow array based on their ratings.
The FlatList I want to be refreshed on filter:
<FlatList
data={eateriesToShow}
keyExtractor={item => item.id.toString()}
renderItem={renderItem}
showsVerticalScrollIndicator={true}
/>
</View>
)
}
Currently my eateriesToShow array gets sorted, but the FlatList does not get refreshed. Any help will be appreciated.
You want your flatist to update when the data is changed. refreshing your flautist is another thing. So what I suggest you to do is use the useState hook.
const [yourList, setYourList] = useState<string | null>(null)
like this (you don't need the types if you are using javascript instead of typescript)
and then when sorting by rating you should do setYourList(newEateriesArray)
and your flautist should update.
Here is what is happening:
-I am developing a blogging app in RN. Each user has a profile page, where all the posts written by the users are visible.
-Each post has a thumbnail image, and I am rendering the posts in FlatList as I should.
-However, if the list is large enough, e.g. 100+, the images in the posts flicker when scrolling up/down, for both iOS and Android. This is understandably a bad user experience.
-Interesting thing is if list is reasonably small, the images won't flicker at all. If this were a syntax issue, all the images should flicker.
-Is this kind of behavior expected in using FlatList? i.e. when rendering a large list of items it will have issues? If so, what can I do to prevent flickering?
FYI, below is the code that I am using for FlatList component. Simple enough:
const PostArray = (props) => {
return (
(props.postarray===null ?
null :
<FlatList
data={props.postarray}
style={{marginTop:10}}
renderItem={({ item }) =>
<ProfilePostsPreview item={item}/>
}
keyExtractor={(item, index) => index.toString()}
/>
)
)
}
Any advice? Thanks in advance!
I have a large long image with a few inputs at the bottom in my react native view. When the view loads I want it to be "scrolled" to the bottom of the page -- all the examples I can find online are triggered because of some event that the user does.
I want to call scrollToEnd() but I'm not sure where in the lifecycle the ref will actually be set -- anyone have ideas?
Use scrollToEnd this way. It will take to the bottom of ScrollView
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}>
I am not clear with your question but
With react-native Image component we have onLoad prop. I think this is what you are looking for.
try something like:
<Image source={{uri...}} onLoad={(e)=>this.handleImageLoaded(e)}/>
then inside handleImageLoaded method you can use scrollToEnd() with some ref as per your code.
also there are other useful props like onLoadStart/End check here
https://facebook.github.io/react-native/docs/image
Or if you are just waiting for the view to render then to scroll
for that I think componentDidAppear() lifecycle method, if using react-native -navigation by wix
or with react-navigation
willFocus, willBlur, didFocus and didBlur events for the component render cycle.. explained here
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
As we can use load more functionality when onEndReached, the same way how can we use load more when we reach to the top of the list ?
Also while doing this when I load more data at the top, Flat list moves to the very top element and hence scroll becomes infinite.
thanks.
1) You can use onScroll callback and get offset from top from event.nativeEvent.contentOffset.y
0 means the top point
For example:
<FlatList
data={messages}
onScroll={
(event: NativeSyntheticEvent<NativeScrollEvent>) =>
onContentOffsetChanged(event.nativeEvent.contentOffset.y)
}
/>
onContentOffsetChanged = (distanceFromTop: number) => {
distanceFromTop === 0 && makeSomething();
}
2) Or you can use "inverted" property and onEndReached will call at top of the screen
inverted
Reverses the direction of scroll. Uses scale transforms of -1.
Yes, we can achieve this in React native 0.60 and above, since the significant changes been made in the Virtual list. Still its doesn't contain the solution for Android.
You can achieve it by inverted prop. When you FlatList is inverted your onEndReached would be called when you reach the top.