I have a screen in my design it will contain multiple images. Its looks like a gallery view. I need to display every item with dynamic width and height. please see the image.
This design pattern is called masonry grid layout. There're many packages that make those layouts.
You can try this https://github.com/hyochan/react-native-masonry-list
Related
I have created a screen with a header on top with some buttons and a main component that will be scrollable and will contain many components called Category. Now I have created category component, and it is responsive on all screens (without wrapping in Scroll View)
When I try to wrap it in ScrollView or FlatList, the layout is behaving quite differently for smaller devices. It is better on Larger devices, but I want the same look on all devices.
This is the link to the snack to check it out.
Some of the code has been commented which means I have tried them but they didn't work and gave different behavior on different devices.
I have tried both flat list and scroll view with different stylings, but i wasn't able to find the perfect styling.
Mobile Phone dimensions i tried on:
5.8"
3.7"
4.0"
5.2"
Before I begin trying to build something I want to check my strategy.
I think the best way to define what I would like to achieve is to build a component using a FlatList that adjusts fontSize dynamically based on the size of the View (or other more appropriately defined size limiting area) in which it is being displayed.
For example, let's say I want a FlatList of items (of data returned from an API call) that displays full-screen on Screen 1 of my app, but in a small corner of Screen 2 of my app. Here's a quick mock of the behavior I would want:
It seems like the alignment of items, flex, other styles could be written so that the proportions/positions stay the same regardless of parent view in which the FlatList is displayed, so I might only have to adjust fontSize.
Can this behavior be achieved using a FlatList and a reference to a dynamic fontSize? If so, where should the "awareness" of the parent View be stored/passed?
I'm looking for general input as to how to achieve this simply, with or without FlatList. I like using FlatList because of how well it works off the shelf for my simple tasks. Hopefully I'm not trying to make it do something it cant.
Thanks!
I am using two different screens for a page but its not responsive.
I have used flex and percentage(%) to adjust margin but did not work for me.
Here is screenshot what actually my screens look like. click here
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?
As shown above, I want to create this two-part screen where I can click onto both the A component and B component on the first view provided here. When a user scrolls B component, it may take up the entire screen and move over the A component. (A component does not move with the FlatList).
I'm new to react native and was wondering how I could create such behavior? I tried using absolute positioning and ListHeaderComponent inside the FlatList but didn't really get anywhere. Let me know if anyone has an idea.
Thanks!
I would try something like the following screen structure:
View
Image
ScrollView w/ trans background that goes to the top of screen
FlatList with top padding to push it below the image
Items in list
/FlatList
/ScrollView
/View
You could also see if react-native-parallax-scroll-view works for you as it looks somewhat similar to what you describe
https://github.com/jaysoo/react-native-parallax-scroll-view