For Code
Expo Snack> https://snack.expo.dev/#stefanosalexandrou/frowning-raisins
What I want to achieve:
I want selected item Fadeout (or add any animation). How can achieve to add animation only on Selected Item.
I don't like this way,
const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
There is any other way?
Related
I want to show some other View (A), when a View (B) already present in the screen within the scrollview, is not visible on the screen.
In short, show View A when View B is not visible on the screen, in react native.
How can i do so, without installing any third party library?
You can make it very simply
Set a state which can be something you can access and change
for example
const [viewToShow, setViewToShow'] = React.useState("A");
Then in the return block just do
{{ viewToShow === "A" && ( <ViewA /> ) }}
{{ viewToSHow === "B" && ( <ViewB /> ) }}
And have maybe a button that wil help you to switch the value of viewToShow
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
I have a simple horizontal slider built using the ScrollView component. There is a button to go to the next slide and when pressed I call scrollTo method on that ScrollView component. I also need to detect when the scroll is finished to display some other animations. I tried using onMomentumScrollEnd and onScrollEndDrag callbacks but on android neither of them is called when I use scrollTo method. Is there any other way to detect scroll 'end' event?
Here is simple example on snack: https://snack.expo.io/#levani/forlorn-bacon
Try this solution, i've modified your snack
I've used onSroll listener with the function :
const scrollDirection = (event) => {
const offsetX = event.nativeEvent.contentOffset.x
const dif = offsetX - (offset || 0);
console.log('dif',dif)
if (dif == 200) {
alert('destination reached')
}
setOffset(offsetX);
};
I want to have a functionality similar to Google Inbox (demo), when swiping an item causes a change of the background color and size of the icon.
My implementation has a ListView of Swipeable components as rows and I want to change the content or style of a row (in the right pane for example) based on the swipe position.
In order to have the ListView to re-render while swiping I added a pos state which I set using the onPanAnimatedValueRef prop of the Swipeable.
The problem is that the ListView doesn't re-render and nothing changes.
<ListView
...
renderRow={(data) => (
<Swipeable rightContent={
<View><Text>{this.state.pos}</Text></View>
}
...
onPanAnimatedValueRef={(pan) => {
pan.addListener(val => {
this.setState({
pos: val.x
});
}}>
{data}
</Swipeable>
)}
/>
Do you see any problem with this?
I would wrap the Swipeable in your own component, hold state there and your animation logic. It is not the ListView's responsibility to rerender the whole thing since the data hasn't changed, just your row itself.
Alternatively, you could change the data via setState to the ListView's data source (which presumably was based in state and hence force a rerender but this is a less efficient path)
I want a row in a FlatList to scroll to the top of the screen whenever a user clicks on it. I am currently doing this by using the scrollToIndex method but the problem is that I have to animate the top margin (from 10 to 0) to get it flushed to the top of the screen. I also have an issue where if a user clicks on a row to expand the row, and a previous row was already expanded, the previous row will collapse causing the original scrollToIndex to animate to some position off the top of the screen.
My current two alternatives are to trigger an additional scrollToIndex once the previous row finishes contracting or use scrollToOffset to figure out where to scroll to based on good old math values. Is there a way to figure out row offset positions by index or some other value whenever it is clicked?
Thanks for any help anybody might be able to provide!
You can use scrollToItem to achieve what you are trying to achieve
So suppose you have this FlatList component
<FlatList
ref={(ref) => { this._flatList = ref; }}
data = {dataSourche}
renderItem = {( info: {item:item, index:number}) => this._renderFlatListItem(info.item, info.index)}
keyExtractor = {(item) => item.id}
decelerationRate={0}
snapToInterval={cardHeight}
snapToAlignment={"start"} //Can also be 'center' or 'end'
onMomentumScrollEnd = {(event) => this._onMomentumScrollEnd(event)}
getItemLayout = {this.getItemLayout}/>
You will need to define a method getItemLayout that will tell the flatList 3 things
length: In your case height of the card
offset: this is distance from top of the list to current card usually we can set it as length * index of the card
index of the card
so this is a sample getItemLayout which you can refer to
getItemLayout = (data, index) => (
{ length: 170, offset: 170 * index, index }
);
Next will be your FlatList scrollToItem call
this._flatList.scrollToItem({
animated:true, //can also be false
item:item,
viewPosition:0 //this is the first position that is currently attached to the window
})
Instead of trying to figure out where to scroll to using the scrollToOffset method, I'm still using the scrollToIndex method and use the viewOffset parameter in order to calculate how much offset to add to the method: the difference between the expanded and collapsed heights of any other currently expanded item (if any) and subtracting the top margin of the clicked item.