So I am building this App where I got a side menu on the left and a leaflet map (vue2-leaflet) to the right side. Got both of these components inside a v-layout row, nested in v-flex elements.
The side menu got a google places search input which sets the center of the leaflet map to the selected location.
Problem -> when I don't specify a fixed width and height, the centered location is off.
My idea was to listen for the resize event on the map instance and then call invalidateSize method, but I can't really get this to work.
Any suggestions on this?
Thanks!
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've created bottom navigation with a custom floating button inside. Button/Menu is opening, but elements inside (with a red circle) are not touchable because the gray container is above them probably. This small fragment of the blue add button which is overlapping the gray container is also not touchable.
I was trying to add zIndex/elevation for menu buttons - but it doesn't help.
How to make a whole floating menu above on all containers.
All elements have a position set to absolute.
Code Reference
https://gist.github.com/gtarnowski/3b36deaeed71abee3d5e84567aa37eea
Image Reference
https://i.stack.imgur.com/fGkw0.jpg
I've tested the code you sent me and it seems to be working correctly. It's emitting the logs.
Below is the Snack link I created:
https://snack.expo.dev/#lineuxyz/greg-error
I am trying to implement static list sized pagination in react native (i.e) will have static list size and on scrolling based on the threshold (say 80% list viewability reached) will add more item at bottom and will remove list items from top. Same way while scrolling up will add list items at top and will remove at bottom.
Issue I am facing is, while on scrolling the listRef.scrollToOffSet (I used getLayout props to find out the height to be adjusted) is not working. It is working fine if I add debugger while dev testing. But without debugger the list is not moving to the specified offset.
Can you please help me out to figure how to implement the same?
I'm implementing a drag and drop grid dashboard similar to cryptotiles.io or microsoft's powerbi. I have the grid working using vue-grid-layout. I want to now implement a drawer to add in more tiles. Would it be possible to render a component on plan on displaying on the grid onto an offscreen canvas. From there convert that to an image and use the image as a preview so that user's know what the component kind of looks like before adding it to the actual grid?
edit: html2canvas offscreen
I found this. I'm wondering if adding to the dom off the window somehow to make a thumbnail would affect performance?
I'm trying to implement scroll-then-fix using NavigationExperimental. (Medium android app implements this.)
First I need to make NavigationHeader scroll with the content instead of fixed at the top. And the Navigation fixed at the top when scrolling to certain position.
My first attempt is let NavigationHeader listen to the scroll event of the NavigationCard, here's the problem:
How do NavigationHeader/NavigationCard communicate each other? NavigationHeader needs to know the scroll position of the NavigationCard to change the state. But they are two separate components.
Or maybe there's an smarter way doing this? Thanks for your help!