We Keep Coding

Horizontal alignment of items in a list

I have a list with an accordion in react-native, made using the List package from react-native-paper. It works but I would like a helping hand to improve the aesthetic aspect.
As you can see in the screenshot below, the number of objects is not aligned with the other elements. Likewise, but this is a bonus, I would have liked the title to be centered, between quantity and price. And there it is a little complicated, I try to add styles but that does not apply.
I tried that in list.item and in list.accordion:
style={{justifyContent: 'space-between', alignItems: 'center'}}
I would like to know if you can give me any leads, advice or your solution.
Thanks for any help
<List.Section title={item.created_at.substring(0, 10)} titleStyle={{fontSize: 16, color: '#013243'}} key={i.toString()}>
<List.Accordion
title={item.quote_number}
style={{width: '98%'}}
left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../../assets/images/logo.png')} />}>
<List.Item titleStyle={{color: '#F78400'}} title={`Total: ${item.amount} €`}/>
{
item.items.map((product, i) => (
<List.Item
title={product.name.substring(0, 30)}
titleStyle={{fontSize: 14}}
description={product.description}
descriptionStyle={{fontSize: 11}}
descriptionNumberOfLines={4}
key={i.toString()}
left={()=>(<Text>{product.quantity}</Text>)}
right={()=>(<Text>{product.cost} €</Text>)}
/>
))
}
</List.Accordion>
</List.Section>

It can be corrected by applying style to the left and right props as follows:
<List.Item
title={product.name.substring(0, 30)}
titleStyle={{fontSize: 14}}
description={product.description}
descriptionStyle={{fontSize: 11}}
descriptionNumberOfLines={4}
key={i.toString()}
left={()=>(<Text style = {styles.textStyle}>{product.quantity}</Text>)} // styled
right={()=>(<Text style = {styles.textStyle}>{product.cost} €</Text>)} // styled
/>
const styles = Stylesheet.create({
textStyle: {
marginTop: 4, // you may adjust this value according to your requirement
fontSize: 14,
}
})

You can do it easily adding the proper style in every item. Check the bellow snippet. In this way you align vertically the number of objects and also the title is centered.
.product {
width: 500px;
height: 100px;
background-color: black;
color: white;
padding: 5px 10px;
display: flex;
justify-content: space-between;
align-items: center
}
<div class="product">
<div>1</div>
<div>Product 1 title</div>
<div>234.54$</div>
</div>

Adjust height of React Cards without including collapse

Im creating a web interface which is listing various processes and services. These are all listed in React cards which all support expand/collapse - expanding the cards and showing more information. The information shown in expand will vary in size and information and I don't want the cards to adjust height if a card is expanded. The height is aligned when they are collapsed, but I'm unsure to how to not adjust them when a card is expanded. Example:
This image shows how the card height has been aligned to the card with the most content. This is the exact behaviour I want.
The problem occurs when I expand one of the boxes. The content in the other boxes gets aligned to the new size. I want the expand function to not effect the heigh of the other cards.
The custom class of the cards is listed here:
const infoCard = makeStyles({
root: {
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "-webkit-fill-available"
}
})
const createCards:
const classes = infoCard();
...
...
return (
<React.Fragment>
<Card className={classes.root}>
<CardContent> "Add content" </CardContent>
<Collapse>
<CardContent> "Add content" </CardContent>
</Collapse>
</Card>
</React.Fragment>
)
I also want the result to support having additional rows of card below this row.
Does anyone know how to go around this problem?
Thanks in advance!

You need to add
align-items: flex-start;
to the styles of your root element, its stretch by default, which would stretch all the elements to be at the same height
const infoCard = makeStyles({
root: {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "space-between",
height: "-webkit-fill-available"
}
})

circle outline for fontAwesome icons in react native

I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place it inside that but I couldn't make it work.
import IconFA from 'react-native-vector-icons/FontAwesome';
<IconFA
name="plus"
size={moderateScale(30)}
color="black"
style={styles.thumbnail}
/>
{/* <IconFA
name="circle-thin"
size={moderateScale(67)}
color="white"
/> */}
thumbnail: {
height: 68,
width: 68,
position: 'relative',
},
Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.
Reference: https://jsfiddle.net/1d7fvLy5/1/
Snack Expo:
https://snack.expo.io/9Ild0Q1zG
I want to make something like this:
I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.

The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).
You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.
const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
<CircleBorder
size={circleSize}
borderWidth={borderWidth}
borderColor={borderColor}
>
<IconFA {...props} />
</CircleBorder>
);
const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
<View
style={{
width: size,
height: size,
borderRadius: 0.5 * size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor,
borderWidth,
}}>
{children}
</View>
);
The IconInCircle component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.
Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.
Now we can use it like so:
<IconInCircle
name="plus"
size={30}
color="black"
style={styles.thumbnail}
borderWidth={1}
circleSize={50}
/>
Expo Link

Try this, just adjust according to your needs, and also don't forget to support other browsers for flex.
const styles = StyleSheet.create({
thumbnail: {
height: 68,
width: 68,
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #333',
borderRadius: '50%'
},
});

import IconFA from 'react-native-vector-icons/FontAwesome';
<View style={{
position:'relative',
justifyContent:'center',
alignItems:'center',
width:40,
height:40,
backgroundColor:'black'
}}>
<IconFA name='circle-thin' size={40} color='grey'/>
<IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />
</View>
I am new to ReactNative, but above snippet should work in your case
Snack Expo

How can I center the title in Appbar.Header in react-native-paper?

As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.
So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.
const styles = { header: { textAlign: 'center' }}
<Appbar.Header style={styles.header}>
<Appbar.Action icon="close" onPress={() => this.close()} />
<Appbar.Content title={title} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
Considering title accept a node, it can be used to display a react component.
How can I force center the title on all devices?

react-navigation allows passing a component for title instead of a string, so we can do the same thing here:
I wrote an example that accepts a custom title component and can be used wherever we want:
import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
);
const App = () => (
<Appbar.Header>
<Appbar.Action icon="close" onPress={() => this.close()} />
<ContentTitle title={'Title'} style={{color:'white'}} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
);
export default App;
You can check: https://snack.expo.io/r1VyfH1WL

There is 2 approach for this.
First,
The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
// Put empty action here or any action you would like to have
<Appbar.Action/>
</Appbar.Header>
Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)
Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.
<Appbar.Content title='Title'
style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }}
titleStyle={{ alignSelf: 'center' }} />
We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.
The first way is simple but limited, while the second way is powerful but more code to write.

You have to use titleStyle instead of style to center the text. The below code is working for me.
<Appbar.Header>
<Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>
There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.

For 'react-native-paper', this snippet worked for me:
<Button
style = {{justifyContent: 'center'}}
>
Press
</Button>

This should align both text/node title:
<Appbar.Content
title={<Text>title</Text>}
style={{ alignItems: 'center' }}
/>
See https://snack.expo.io/rJUBIR6lU

<Appbar>
<Appbar.Content titleStyle={{alignSelf: 'center'}} title='something' />
</Appbar>

Dynamic positioning of a React JSX button

I am working with React and I need put this button like that:
but I have a big problem because I am forbidden to use margin or other form of positional where I have values with px, or rem, basicaly static positional. Now, I have this code
<div style={{ float: 'right' }}>
<ActionButton style={{
display : 'flex',
flex : '1',
flexDirection: 'row',
alignItems : 'center',
justifyContent : 'center',
height: '40px',
width: '151px',
}} name={<div style = {{
display : 'flex',
flex : '2',
backgroundColor : 'red',
float : 'right'
}}>FILTRAR</div>}
icon={<div style = {{
display : 'flex',
flex : '2',
backgroundColor : 'blue',
width: '24px',
height: '24px',
float : 'left'}}><FilterIcon/></div>}>
</ActionButton>
</div>
And now my button is like that

Parent's styles should already align children (name and icon) by the center, not by the top. And yes, no positioning styles are required, unless there are hardcoded heigh/margin values in children itself.
Desired behavior can be broken because of the implementation of ActionButton.
Anyway, my suggestions to tackle this issue:
use flex-direction: 'row-reverse' instead of floats;
remove display: 'flex' from child elements.
Here is a simplified and working example for web https://codesandbox.io/s/62nynm1wzk, hope it can help you to get started.
Update: here is an example using button instead of div as container, since it is closer to original markup: https://codesandbox.io/s/y7q1vlwkwj

You can use margin in % (ie: 50%) and then use transforms, in percent (ie: transform: translateX(-50%), to adjust position. If you can provide a static stylable html I can produce an example for you.

Try to remove the flex and display style property in name and icon props like below and check it. Because flex:2 will change the width of child element with equal spacing.
<div style={{ float: 'right' }}>
<ActionButton style={{
display : 'flex',
flex : '1',
flexDirection: 'row',
alignItems : 'center',
justifyContent : 'center',
height: '40px',
width: '151px',
}} name={<div style = {{
backgroundColor : 'red',
float : 'right'
}}>FILTRAR</div>}
icon={<div style = {{
backgroundColor : 'blue',
width: '24px',
height: '24px',
float : 'left'}}><FilterIcon/></div>}>
</ActionButton>
</div>