javascript - InstantSearch が切断されないようにするにはどうすればよいですか? (アルゴリア、React Native)

Question

発行イメージ

画像が問題をよく示していることを願っています! 私はInstantSearch（Algoliaを搭載）を使用しようとしていますが、機能を削除するスワイプ権限にreact-native-swipe-list-viewを使用しています。奇抜な色で申し訳ありません。どのコンポーネントがスペースを占めているかを把握する必要がありました。私はoverflow: "visible"を狂ったように設定してきました。また、標高とzIndexを無駄に調整しました。テキストの提案はまだ途切れています。

コードの一部を次に示します。

成分詳細コンテナ.js:

const IngredientDetailContainer = (props) => {

const [name, setName] = useState('');
const [objectId, setObjectId] = useState('');

return (

    <View style={{ elevation:0, zIndex:0, flex: 1.5, flexDirection: 'row', width: '100%', justifyContent: 'center', backgroundColor: 'red', overflow:'hidden' }}>
        <DragIcon />
        <View style={[{ flex: 0.05}]} />
        { Platform.OS === "ios" ?
            (
                <InstantSearch searchClient={searchClient} indexName={ALGOLIA_INDEX_NAME}>
                    <Autofill setName={setName} setObjectId={setObjectId} defaultQuery={''} editing={false} />
                </InstantSearch>
            )
            : (
                <View style={[styles.input, {  backgroundColor:'green', overflow:'visible', marginTop:'10%',  flex: 0.9, fontSize: 13, color: 'gray', fontWeight: 'bold', textAlign: 'center', borderWidth: 2, borderRadius: 20, borderColor: '#D0DBEA', overflow: 'visible', borderStyle: 'solid' }]}>
                    <InstantSearch style={[{overflow:'visible', elevation:5, position:'absolute'}]} searchClient={searchClient} indexName={ALGOLIA_INDEX_NAME}>
                        <View style={[styles.autocompleteContainer, {backgroundColor:'orange', overflow:'visible', marginTop:'-20%', position:'absolute', elevation:15, zIndex: 15}]}>
                            <Autofill style={[{backgroundColor:'black', overflow:'visible', position:'absolute'}]} setName={setName} setObjectId={setObjectId} defaultQuery={''} editing={false} />
                        </View>
                    </InstantSearch>
                </View>
            )
        } 
...

レシピクリエーション2.js:

  const renderItem = data => (
    <IngredientDetailContainer style={[{overflow:'visible'}]} unitOnPress={TriggerModal} />
  );

...

  var IngredientList = (props) => (
    <SwipeListView
    data={listData}
    renderItem={renderItem}
    renderHiddenItem={renderHiddenItem}
    previewOpenValue={-40}
    previewOpenDelay={3000}
    leftOpenValue={75}
    onRowDidOpen={onRowDidOpen}
  />

これを乗り越える方法についてのアイデアは大歓迎です！