We Keep Coding

Nextjs with material-ui; Component displayed twice when CardHeader action is set

I am displaying some material-ui Cards horizontally in a div from data loaded from the backend and rendered server side using NextJS, however when the action property is present in the CardHeader, the view is distorted.
The distortion is a little bit hard to explain so I have reproduced it minimally in CodeSandbox. After removing the action property, the items are rendered correctly, however you will need to reload the mini-browser to see the effect.
<CardActionArea>
<Card>
<CardHeader
avatar={<Avatar alt={value}>{value}</Avatar>}
/** If action is removed, the issue goes away */
action={
<IconButton>
<ThumbUpOutlinedIcon />
</IconButton>
}
title={value}
subheader={value}
/>
<CardContent>
<Typography variant="h6">{value}</Typography>
</CardContent>
</Card>
</CardActionArea>
As you can see above the main div containing the items is at the top with the items horizontally arranged, however there are additional items which are arranged vertically below the div.
My guess is that the top items correctly rendered were rendered in the client side and the bottom items vertically rendered (which also shouldn't be there) were obtained from the server because on inspection of the source, the bottom incorrectly rendered items were not within the __next element.
Why is the presence of the action property in the CardHeader causing this? Or is it possible that my setup with Next and material-ui is incorrect? Thanks.

React Native Android: Contain text to inside parent view on a single line

The picture to the left below is currently how the text is being displayed in my React-Native project, but I would like the text to be displayed like the picture on the right(Made in Swift).
There are 3 major differences
The text on the left prints on two lines if the text to print is long enough, on iOS, the end of the word will just cut off, sometimes in the middle of a letter(so you would only see the left side of an A or something.)
The text on the left will sometimes be printed outside the button(letters like p)
The text on the right will replace the middle of the word with ... if the text is too long
I would like either this effect, or else have the text size shrink in order to fit the text inside the button
This is my Component for these buttons with the text inside
<TouchableOpacity style={styles.button} onPress={onPrs} >
<Text style={styles.text}>{props.name}</Text>
{premiumLabel}
</TouchableOpacity>
And this is the styling that I use for them
const styles = StyleSheet.create({
...
button:{
backgroundColor: '#37E8E8',
justifyContent: 'center',
width:'31%',
borderRadius: 5
},
...

You have to use ellipsizeMode prop for Text which defines how text is truncated. For your requirement we have to use ellipsizeMode="middle", which fits the text in the container and the missing text in the middle is indicated by an ellipsis (...).
ellipsizeMode is ideally used with one more prop which is numberOfLines, but this will work even if just the width is specified for the Text, which is not the case in yours. Hence, numberOfLines={1} should also be added.
In order to get the desired effect, you can use this
<TouchableOpacity style={styles.button} onPress={onPrs} >
<Text style={styles.text} ellipsizeMode="middle" numberOfLines={1}>{props.name}</Text>
{premiumLabel}
</TouchableOpacity>
Read more about ellipsizeMode

React Native get available height for content

I have a custom component which needs its height to be set explicitely. I'm having trouble with calculating the available space on different devices.
The top bar is no problem cause I use the StatusBar height, but on the bottom, the iPhone X has some space for that "bar" and I don't know how to calculate this (I could match the device but maybe there are more devices with this space on the bottom).
Is there any way to calculate this? I'm using Expo btw.

I don't know what is your primary goal but here are my suggestions:
If you want to calculate the available height you can create a View with style {flex:1} then use onLayout built-in function of a View. Here how it works:
onLayout=({nativeEvent})=>{
// Here is height
console.warn(nativeEvent.layout.height)
}
<View style={styles.container}>
<YourComponents/>
{/*The part you want to calculate height*/}
<View style={{flex:1}} onLayout={onLayout}/>
</View>
If you want to just avoid the notch of the device you can use SafeAreaView. Here is the full documentation. PS. react-native's built in SafeAreaView component has been moved to react-native-safe-area-view

Make height of list fill whole page

I am currently trying to make a page with a map on one half and a list on the other. I want to make the list height fill the entire page but I can't seem to find the right way to do so. I am using the react-virtualized list codebase as a starting point and in that code you specify the height dimension by passing in listHeight. But I want the listHeight to be dynamic based on your screen size.
I've tried doing flex: 1, height: 100%, but it doesn't seem to affect the code. I need to somehow make the height value equal to the dimension of the screen size.
<div style={{flex: 1}}>
<AutoSizer>
{({width}) => (
<List
ref="List"
className={styles.List}
height={listHeight}
overscanRowCount={overscanRowCount}
noRowsRenderer={this._noRowsRenderer}
rowCount={rowCount}
rowHeight={
useDynamicRowHeight ? this._getRowHeight : listRowHeight
}
rowRenderer={this._rowRenderer}
scrollToIndex={scrollToIndex}
width={width}
/>
)}
</AutoSizer>
</div>

do style = {{height: "100vh"}}
this will take the entire vertical height of the window

Side navigation scroll icons are not appearing even if the content height is more than screen height

I am using sap.tnt.SideNavigation in order to create side panel.For that i am creating a page and the page has sap.tnt.SideNavigation which consist of navigation items to display in side navigation.So the xml view is like this,
<Page>
<content>
<m:ToggleButton icon="sap-icon://menu2" press="onCollapseExapandPress"/>
<SideNavigation id="sideNavigation" visible="false">
<item>
<NavigationList itemSelect="onItemSelect" items="{path:'/widgetsToLoad/widgets'}">
<NavigationListItem icon="{icon}" visible="{inPanel}"
tooltip="{name}"></NavigationListItem>
</NavigationList>
</item>
</SideNavigation>
</content>
</Page>
After doing this eventhough the content height is nore than screen height it will not show scroll icons instead scroll bar will come.How to fix this?

According to the documentation sap.tnt.SideNavigation should be used only with sap.tnt.ToolPage as parent layout control. Thus it might not work perfectly within a Page control.
In general the scroll items are shown if the SideNavigation is not expanded, otherwise the scroll bar is shown. You can check this by playing around with the ToolPage example.