Develop Reference

BottomNavigation in MUI cannot resize smaller than 400px if containing 5 items

I have a bottom navigation that contains 5 elements. When you resize the window lower than 400px, the bottom navigation doesn't "squeeze", so to say; it remains at a minimum 400px which means a scrollbar appears for the x axis.
You can see a minimal reproducible example here: https://codesandbox.io/s/eloquent-sanderson-epuhdf?file=/src/index.js&resolutionWidth=400&resolutionHeight=675
In the example, the min width actually seems to be marginally wider and it always overflows a little, but the principle is still the same.
What I need to do is ensure the padding/whitespace ebtween the elements squeezes together when there's a screen smaller than 400px. I've tried manually overriding the padding both in the sx of the BottomNavigation component, and with the styled utility. With styled I removed the padding from the last child, but then all of the padding of the rest of the items grew to always fill 400px.
I understand there's always a limit; I can't expect to have 5 items on a 200px wide screen. But I should be able to go a bit lower than 400px. Note: If I jsut have 4 items, it resizes jsut fine.
Here' my code currently:
<BottomNavigation
value={value}
onChange={(_, index) => {
getPageIndex(index);
}}
sx={{ maxWidth: "100vw" }}
>
// 5 nav icons
</BottomNavigation>

I found a solution: change the minWidth of action items to 70px. By default it's 80px.
const CustomisedBottomNavigationAction = (props: any) => (
<BottomNavigationAction sx={{ minWidth: "70px" }} {...props} />
);
then, each child of your BottomNavigation:
<CustomisedBottomNavigationAction
label={PageNames.Home}
icon={<HomeIcon />}
component={RouterLink}
to={NavigationRoutes.Home}
/>

How can I reveal an element behind a flatlist and have it interactable in React Native?

I am trying to render an element that is positioned absolutely behind a flatlist and it will be revealed once the user scrolls to the bottom. The issue I am facing is that the element needs to be interactable, and the flatlist root element takes all pointerevents instead of the background element.
const FlatlistOverElement: FC = () => (
<View style={{ flex: 1, width: '100%' }}>
<FlatList
data={data}
style={{ flexGrow: 1 }}
ListFooterComponent={() => (
<View style={{ height: BACKGROUND_ELEMENT_HEIGHT, opacity: 0 }} />
)}
renderItem={RenderItem}
/>
<AbsolutelyPositionedElementBehindFlatList />
</View>
)
I have tried to remove pointerevents from the flatlist, then the flatlist is not scrollable.
I have tried to set the height of the flatlist smaller, and let the content overflow. This allows the user to interact with the element, but for that part of the screen, the user can not scroll the flatlist.
What other approach can I utilise in order to solve this issue ?

You can use zIndex property on the scroll completion. Just provide a higher zIndex value than that of FlatList to absolute component whenever the scroll is completed.
zIndex Layout Props

Thanks for the suggestions. I ended up using a zIndex to put the interactable content in front of the flatlist when having scrolled to the end, as well as adding snap points on both sides of the element. To prevent the user from half revealing the element and not be able to interact with it.

Hover animation in framer motion. text getting visually distorted

I am new to framer motion and I want to make a hover animation on the button. I was able to create the animation successfully but when I hover over the button the text gets distorted and I want to fix it, I have done research but i wasn't able to find a solution
I want to apply animation only to the button not the text inside it
I have tried adding <motion.button layout />
I have tried adding <motion.button layout="position" />
I have also added <span>button text</span>
but the issue is still there
<motion.button
style={{
padding: "10px 30px",
border: "none",
marginTop: "20px"
}}
whileHover={{
scale: 1.1
}}
whileTap={{
scale: 0.9
}}
>
Button
</motion.button>
It would be great if someone would help me in fixing this issue,
https://codesandbox.io/s/late-darkness-ejuzt?file=/src/App.js:134-419 is my code sandbox link where u can see what I'm saying
thanks!

According to this, you can't 'disable' scaling for child components with framer. Try to use react components and variables (or CSS) to disable child scaling.

React Native ScrollView above another ScrollView

I am trying to make something similar to the Instagram ScrollView which is inside the "Search" screen of the app. If you are using iOS and see the app, you will see that when you start typing the username of an user, a ScrollView overlaps the feed ScrollView.
For this I am doing:
<ScrollView>
<HorizontalStoriesList />
...
<Animated.ScrollView
testID="SearchUsersList"
style={[
StyleSheet.absoluteFill,
{
opacity: searchUsersListOpacity,
backgroundColor: colors.white,
},
]}
>
<UsersList data={data} />
</Animated.ScrollView>
</ScrollView>
My problem is that the ScrollView which is more above doesn't have the good height, instead of using its own height it uses the height of the parent scroll view. Also, I am not able to touch the components that are behind this scrollview (The HorizontalStoriesList, for example. I have tried with pointerEvents="none" but this make the Animated Scroll View (the one which is more above) to be untouchable.
Any ideas how to solve this?
Thank you.

Virtualized table scroll on window like a normal table

I am currently trying to integrated a virtualized table in react using react–virtualized, however the table does not seem to render correctly and I am trying to understand as to why. I also have a few other problems that I cant find documentation on how to do as I have pointed out below.
It would be great if anyone has something or could help.
Below is the code I am using and my goal with this is to be able to:
1- Scroll with the page the table
2- Height of rows be automatic and widths
3- The numbers shown in the row need to be formatted some depending on condition and same for wealth depending on condition may show red or green using css.
Now I have been able to get scroll to partially work however at the top of the scroll it shows massive white space when I scroll down while the table is still in view.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
width={1000}
autoHeight
height={height}
headerHeight={30}
rowHeight={40}
scrollTop={scrollTop}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={this.setData.length}
rowGetter={({index}) => this.setData[index]}>
<Column label="Country" dataKey="country" />
<Column label="Flag" dataKey="flag" />
<Column label="Population" dataKey="population" />
<Column label="Wealth" dataKey="wealth" />
</Table>
)}
</WindowScroller>
Also just out of curiosity is there any library or way that you can just render content on scrolling eg infinite loading on scrolling down the screen that way it renders everything out of the screen as it comes in or as its about 200px from coming into view ?

You can use Material-UI tables for a customizable table, it's very easy and flexible.
If you prefer to use a specific table please share code.