Align vertically to bottom - css

Question

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):

Answer 1

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

Answer 2

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