Best way I found was to move the ScrollView outside of the card container and get the top position of the ScrollView by calculating the area of the button and container it’s supposed to be relating to. Sort of how tooltips often function.

import { useState } from 'react';
import {
  View,
  StyleSheet,
  Pressable,
  Text,
  ScrollView,
  FlatList,
} from 'react-native';
import Constants from 'expo-constants';
import { Feather } from '@expo/vector-icons';

const data = [
  {
    color: 'red',
  },
  {
    color: 'blue',
  },
  {
    color: 'orange',
  },
  {
    color: 'green',
  },
  {
    color: 'pink',
  },
];

export default function App() {
  const [value, setValue] = useState('Press me!');
  const [heightOfButton, setHeightOfButton] = useState(0);
  const [heightOfContainer, setHeightOfContainer] = useState(0);
  const [shouldShow, setShouldShow] = useState(true);
  // android handles the padding a bit strange but I feel like this is close to what you're looking for.
  const scrollPosition = heightOfContainer + 12 + heightOfButton

  return (
    <View style={styles.container}>
      <View
        onLayout={(e) =>
          setHeightOfContainer(e.nativeEvent.layout.y)
        }
        style={styles.card}>
        <Pressable
          onLayout={(e) =>
            setHeightOfButton(e.nativeEvent.layout.height)
          }
          onPress={() => setShouldShow(true)}
          style={styles.button}>
          <Text>{value}</Text>
          <Feather name="chevron-down" size={24} />
        </Pressable>
      </View>
      {shouldShow ? (
        <FlatList
          style={{
            position: 'absolute',
            top: scrollPosition,
            height: 400,
            width: '80%',
            backgroundColor: 'green',
            alignSelf: 'center',
          }}
          data={data}
          renderItem={({ item }) => (
            <Pressable
              onPress={() => {
                setValue(item.color);
                setShouldShow(false);
              }}
              style={{ height: 200, backgroundColor: item.color }}
            />
          )}
        />
      ) : null}
      {/*<ScrollView 
          style={{ 
            position: 'absolute',
            bottom: height,
            height: 400, 
            width: "80%", 
            backgroundColor: "green", 
            alignSelf: "center"
          }}>
        <View style={{height: 200, backgroundColor: "red"}} />
        <View style={{height: 200, backgroundColor: "blue"}} />
        <View style={{height: 200, backgroundColor: "yellow"}} />
        </ScrollView> */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'lightblue',
    padding: 8,
  },
  card: {
    backgroundColor: 'white',
    height: '30%',
    borderRadius: 8,
    padding: 12,
  },
  button: {
    width: '100%',
    borderColor: 'black',
    borderRadius: 8,
    borderWidth: 1,
    padding: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});

I moved your example to a FlatList as it seems like that was what you were hoping to do in the example.

Here’s the snack https://snack.expo.dev/@corywritescode/frowning-carrot