Align vertically to bottom

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