In a react native screen, the top part is a flatlist, and the bottom part is a toolbar, with some buttons in it. And, there is also a hidden component which shows when a button is pressed. What I hope is, when the hidden component is showing, the flatlist is pushed up, so that lower part content of flatlist will be still on the screen.
But the reality is, when the hidden component is showing, it covers the flatlist. I have no way to make flatlist component automatically be smaller.
How to resolve this issue?
thanks
Try styling all three component using flex.
for e.g.
give flatlist flex:3
hidden button flex:1
toolbar flex:2
And now when button appears, height will be automatically adjusted.
Related
Wondering how I can achieve this scrolling behavior like Instagram has on their profile pages with React-Native? More specifically, how I do limit the scroll indicator to just the bottom section rendering the posts?
Instagram scroll behavior vs what I have
So far these are what I've tried with no success:
Using a FlatList with a header component (both sticky and not).
Using a SectionList, with a FlatList in one section, but if set showsVerticalScrollIndicator={false} on the SectionList, the FlatList also does not display the scroll indicator, no matter its value.
Also tried using Animated (react-spring) values and translating components based on scroll offset. This is the closest I've been, but it had more of a parallax effect which isn't really what I'm aiming for. Also, the animation was very choppy.
Been trying my hand at this for a couple of days now so any help is appreciated. Thanks!
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
Hi everyone I try to achieve an effect on an horizontal flatlist in REACT NATIVE.
Actually I have two Flatlist, the top one is Horizontal which contain 9 items like this :
As you can imagine the flatlist overflow so we don't see all the items so we can scroll with touch event.
I want to when a user click on one of the items the red bottom line move animated under the good item. the black one is a static one indicator.
I use the ScrollToIndex flatlist property to move the item a center of the screen.
I cannot get the right X position to animated the slide active indicator from the previous item to the new one.
the Slider is an Animated.View position as absolute with a translationX transform property.
Does anyone have an example or an explanation for that.
Thank you.
CcHuMi
I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.
I've a GUI built app and I set many Icon images in the code for some components.
The thing is I've made sure all "padding" and "margin" values are the same for the different states of the components (unselected, pressed, etc) but when I try to input data into the TextFields, it seems like the dimensions of some components change without notice and they completely mess with my layout.
Even sometimes some of the icons partially disappear. Please see the following screenshot of before and after text input, where the Container and TextFields shrink
I really don't know what else I can do. I have tried many things, but stil the same outcome. Please help.
You need to make the container housing all this components scrollable.
Use Millimeters for your TextField padding and margin, don't use Screen Percentage. From the image in the images you posted, 2mm top and bottom and 1mm left and right would be suitable.
If the components having those icons are pressable like a button, be sure to set their pressedIcon to the same icon.
Lastly, style your TextField Unselected state and copy this to Selected and Pressed states, to avoid erroneous styling.