Align vertically to bottom - css

I've created a card containing some text and an icon.
I would like to align that icon to bottom. Here is my code:
export default function App() {
return (
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
}}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
...
</View>
<View
style={{
marginLeft: 10,
height: '100%',
// justifyContent: 'flex-end',
// alignContent: 'flex-end',
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
alignContent: 'center',
}}>
<MyIcon color="gray" />
</View>
</View>
</View>
);
}
function MyIcon({ color }) {
return (
<View
style={{
borderRadius: 15,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
}}>
<Svg ...>
...
</Svg>
</View>
);
}
A working snack is here.
The circle containing the icon should be at the bottom, I don't need absolute because I think.
I try flex-end but seems not to work.
As is:
What I want (the cyan circle is the icon):

import * as React from 'react';
import { Text, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
export default function App() {
return (
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
}}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
<Text
numberOfLines={1}
style={{
fontSize: 12,
color: 'black',
fontWeight: '600',
paddingRight: 5,
}}>
Park
</Text>
<Text
numberOfLines={1}
style={{ fontSize: 12, color: 'black', fontWeight: '400' }}>
{`- Something`}
</Text>
</View>
<Text
numberOfLines={1}
style={{
fontSize: 16,
color: 'black',
fontWeight: '600',
paddingVertical: 3,
}}>
A place
</Text>
<Text
numberOfLines={1}
style={{ fontSize: 12, color: 'gray', fontWeight: '400' }}>
10:00 - 17:00
</Text>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
}}>
<MyIcon color="gray" />
</View>
</View>
);
}
function MyIcon({ color }) {
return (
<View
style={{
borderRadius: 15,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
}}>
<Svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.7489 3.91654C11.0386 3.37708 10.8414 2.41269 11.2425 1.64836L9.86861 0.604841C9.4288 0.270796 8.80147 0.356536 8.46742 0.796346L6.29 3.66319L6.78186 4.03677L7.1004 4.27871L6.61652 4.91578L6.29799 4.67385L5.80612 4.30027L0.604492 11.1488C0.270448 11.5887 0.356187 12.216 0.795997 12.55L2.15874 13.5851C2.78224 12.9278 3.81383 12.8315 4.55197 13.3921C5.29012 13.9528 5.47419 14.9724 5.0083 15.7494L6.37042 16.7839C6.81023 17.118 7.43756 17.0322 7.77161 16.5924L12.9732 9.74384L12.4814 9.37026L12.1628 9.12832L12.6467 8.49125L12.9653 8.73318L13.4571 9.10676L15.6345 6.23991C15.9686 5.80011 15.8828 5.17277 15.443 4.83873L14.0697 3.79568C13.4411 4.38723 12.4591 4.45599 11.7489 3.91654ZM8.18717 5.10414L7.86864 4.8622L7.38476 5.49928L7.7033 5.74121L8.68702 6.48837L9.00556 6.73031L9.48944 6.09323L9.1709 5.85129L8.18717 5.10414ZM10.5762 6.91866L10.2577 6.67672L9.7738 7.3138L10.0923 7.55574L11.0761 8.30289L11.3946 8.54483L11.8785 7.90775L11.5599 7.66582L10.5762 6.91866Z"
fill={color}
/>
</Svg>
</View>
);
}
Here is the snack you can check

Instead of
alignContent: 'flex-end'
You should use
alignItems: 'flex-end'

Related

alignment of two different fontSizes texts center react native

<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: 7,
}}>
<Text style={{ color: '#000', fontSize: 25 }}>Status:
<Text style={{
color: "#000", fontSize: 20, width: 210,
// marginTop: 5
}}>{data.status_url}
You can add alignSelf: "center"
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: 7, }}>
<Text style={{ color: '#000',alignSelf: 'center', fontSize: 25 }}>Status: </Text>
<Text style={{ color: "#000",alignSelf: 'center', fontSize: 20, width: 210 }}> {{data.status_url}</Text>
</View>

react-native: list alignment

**How can i make this list smooth? Now its crooked,( 2 and 3 column)
Im trying to do it with marginLeft and marginRight but result is the same. Maybe i shuold use 1 more flatlist i dont know. pls help who knows
**
<FlatList
data={currencyList}
renderItem={({item, index}) => {
let priceColor = item.change24h == 0
? "#757575"
: item.change24h > 0
? "#4BEE70" : "#D84035"
return (
<View style={{
flex: 1,
flexDirection: 'row',
marginBottom: 10,
borderBottomColor: "black",
borderBottomWidth: 1,
alignItems: 'center',
justifyContent: 'space-between'
}}>
{/*Symbol*/}
<View
style={{
marginRight: 20,
}}
>
<Text
style={{
fontSize: 18,
flex: 1,
textAlign: 'left'
}}>
{item.symbol}
</Text>
</View>
{/*Ask*/}
<View style={{
marginRight: 20,
marginLeft: 20,
width: 80,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{
flex: 1,
fontSize: 18,
textAlign: 'left',
alignItems: 'center',
justifyContent: 'center'
}}>
{item.ask}
</Text>
</View>
<View style={{
alignItems: 'center',
justifyContent: 'center'
}}>
<Text
style={{
marginRight: 20,
color: priceColor,
fontSize: 18,
alignItems: 'center',
justifyContent: 'flex-start'
}}
>
{item.change24h}
</Text>
</View>
<View style={{
flexDirection: 'row',
}}>
<Text style={{
textAlign: 'right'
}}>
{item.change24h.toFixed(2)}
</Text>
{
item.change24h != 0 &&
<Image
source={icons.upArrow}
style={{
width: 20,
height: 20,
tintColor: priceColor,
transform: item.change24h > 0 ? [{rotate: "45deg"}] : [{rotate: "125deg"}]
}}
/>
[image of flatlist][1]https://i.stack.imgur.com/8OjNA.png
[1]: https://i.stack.imgur.com/8OjNA.png

View to fit the screen in React Native

Hello there guys
i have a problem with CSS in react native, i want to fit all my components in the screen without ScrollView but i cant seem to figure out what is my problem(i tried to change values for margins or paddings but it will look different in every device.)
As you can see at the attached image:
As you can see the graph below is not in the screen, i need to scroll view to the graph(which i dont want)
here is the code + css : (I dropped some lines to shorten the code(Like the carousel components and etc)
<View style={{ backgroundColor: "#fff" , flex: 1 }}>
<LinearGradient
colors={["#4c669f", "#3b5998", "#192f6a"]}
start={[0, 0]}
end={[1, 0]}
>
<View style={{ marginHorizontal: 20, paddingVertical: 48 }}>
<View style={styles.imageContainer}>
<View>
<View style={styles.check}>
<Ionicons name="md-checkmark" size={20} color={colors.pink} />
</View>
<Image
source={require("../assets/profile-pic.jpeg")}
style={{
width: 100,
height: 100,
borderRadius: 32,
}}
/>
</View>
</View>
<View style={[styles.center, { marginVertical: 12 }]}>
<Text style={styles.title}>
{currentUser.name + " " + currentUser.lastName}
</Text>
<Text style={[styles.subTitle, { marginTop: 8 }]}>
{businessDetails.bussinesName}
</Text>
</View>
</View>
</LinearGradient>
<View style={styles.container}>
<View style={styles.statContainer}>
<Text style={styles.statNumber}>1,700₪</Text>
<Text style={styles.stat}>הכנסה חודשית תופיע כאן</Text>
</View>
</View>
<View style={styles.center}>
<Text style={styles.textGraphTitle}>Graphs Analysis:</Text>
</View>
<View>
</View>
</View>
);
CSS:
center: {
alignItems: "center",
justifyContent: "center",
},
imageContainer: {
alignItems: "center",
justifyContent: "center",
marginTop: 1,
shadowColor: colors.darkBg,
shadowOffset: { height: 3, width: 1 },
shadowOpacity: 0.5,
},
container: {
paddingVertical: 24,
paddingHorizontal: 32,
marginBottom: 8,
backgroundColor: colors.lightBg,
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 16,
borderRadius: 16,
marginTop: -48,
},
statContainer: {
alignItems: "center",
justifyContent: "center",
flex: 1,
},
You are asking responsive app design. Basically, you can use for width and height percentages or dimension.
import { Dimensions} from 'react-native'
const {width, height} = Dimensions.get('window')
One more approach is to use react-native-screens library

Height of View in react native

Is it possible to make the <View /> having the same height? I am fetching a data from server side and some content are short and some are long. So when I display them in a box form, the height of the box aren't same. If I fix the height or minimum height the long text will exceed the height of the box.
EDIT : Sample code
DisplayEguides(){
var winsWidth = Dimensions.get('window').width;
if(this.state.eguides != null){
var eguides = this.state.eguides.map((data, i)=>(
<View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
<View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
<Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
<AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
</View>
</View>
</TouchableOpacity>
</View>
))
return (
<View style={{ paddingHorizontal: 15 }}>
<AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
</View>
);
}
}
Seems like Flexbox in react native is doing the job but need to place at the right element. Setting the view to flex: 1 will auto adjust all content inside it to have the same height. In my case, I have to set flex: 1 at TouchableOpacity since my box style is in this element.
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
{ /* The rest of code goes here */ }
</TouchableOpacity>

How to get rounded image tag on top of two div in react native?

I want to create a profile page where rounded image will be on top of two div in 30:70 ratio where top div will be empty and bottom div will contain few items. I have tried few code snippets from web.
<View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'green', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
<View style={{ flexDirection: 'column', justifyContent: "flex-start", alignItems: "flex-start", alignSelf: "flex-start" }}>
{/* <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end', alignSelf: 'flex-start', margin: 1 }}> */}
<View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "30%", width: "100%" }}></View>
{/* </View> */}
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start', alignSelf: 'flex-start', margin: 1 }}>
<View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "70%", width: "100%" }}></View>
</View>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center', alignSelf: 'center', position: 'absolute' }}>
<View style={{
backgroundColor: 'blue',
borderRadius: 10, height: 100, width: 100, borderRadius: 100 / 2
}}></View>
</View>
</View>
reference image
Taking as reference the image you share with us... You can have two views and set the profile avatar style to:
{
position: 'absolute',
alignSelf: 'center',
etc..
}
Check a quick demo: https://snack.expo.io/#abranhe/avatar-example
App.js
import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native';
import { Ionicons, FontAwesome } from '#expo/vector-icons';
import Constants from 'expo-constants';
import { avatar, background } from './data';
export default class App extends Component {
renderRow({ action, icon, fontAwesome = false }) {
return (
<View style={styles.actionRow}>
{fontAwesome
? <FontAwesome name={icon} size={25} />
: <Ionicons name={icon} size={32} />}
<Text style={styles.text}>{action}</Text>
</View>
);
}
render() {
return (
<View style={styles.container}>
<ImageBackground source={background} style={styles.background}>
<Image source={avatar} style={styles.avatar} />
</ImageBackground>
<View style={styles.content}>
{this.renderRow({ action: 'Scanner', icon: 'ios-camera' })}
{this.renderRow({
action: 'Profile',
icon: 'user-circle-o',
fontAwesome: true,
})}
</View>
</View>
);
}
}
You styles:
const styles = StyleSheet.create({
container: {
flex: 1,
},
background: {
width: '100%',
height: 130,
},
content: {
flex: 1,
marginTop: 80,
marginHorizontal: 10,
},
avatar: {
width: 100,
height: 100,
borderRadius: '50%',
borderWidth: 0.7,
borderColor: 'black',
position: 'absolute',
alignSelf: 'center',
marginTop: 80,
},
actionRow: {
width: '100%',
height: '50',
flexDirection: 'row',
alignItems: 'center',
margin: 10,
},
text: {
marginLeft: 15,
fontWeight: '500',
},
});

Resources