ReactNativeコンポーネントを固定するStyleの当て方を知りたい

Question

前提・実現したいこと

React Nativeを利用してアプリ開発をしています。

ScrollViewを利用した表示の中に、ある場所に固定して表示させるコンポーネントを設置したいのですが、画面スクロールに合わせて動いてしまいます。

固定させたいコンポーネントには以下のstyleを当てていますが、動いてしまいます。
position: "absolute",
top: 0,

左上の赤い四角を固定したいです。

解決の方法ご存知の方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

import React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";

export default function TestPosition() {
  let list = [];
  for (let i = 0; i < 10; i++) {
    list.push(
      <View style={styles.listBox} key={i}>
        <Text>List</Text>
      </View>
    );
  }

  return (
    <ScrollView>
      <View style={styles.fix}></View>
      {list}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  fix: {
    height: 50,
    width: 50,
    backgroundColor: "red",
    position: "absolute",
    top: 0,
  },
  listBox: {
    height: 100,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
  },
});

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

<View>
  <View style={styles.fix}></View>
  <ScrollView>
    {list}
  </ScrollView>
</View>

のようにするとどうでしょうか？

Comments

[tomaa]

ご回答いただきありがとうございます。
教えて頂いた方法で、解決できました。
自己解決の方法は、flexを使っていますが、なくても固定して表示できました。

Answer 2

自己解決できましたので投稿します。

固定したいコンポーネントは、ScrollViewと別のコンポーネントにする事が必要でした。

<View style={{ flex: 1 }}>
  <View style={styles.fix}></View>
  <ScrollView>{list}</ScrollView>
</View>