React Native, cant use ScrollView inside BottomSheet

Question

I've implemented a search function and page on my app. I open BottomSheets for more information, like a DataTable, but I just cant use a ScrollView inside my BottomSheet, and so not everything fits on my BottomSheet.

import { Div, Text, Button, Input, Image, ScrollDiv } from "react-native-magnus";
import { useState, useCallback, useMemo, useRef } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, StatusBar, TouchableOpacity, Dimensions } from 'react-native';
import React from "react";
import Carousel from "react-native-carousel-control";
import BottomSheet from "react-native-gesture-bottom-sheet";
import env from "../env";
import AddToMealsModal from "./AddToMealsModal";
import { DataTable } from 'react-native-paper';
import { ScrollView } from "react-native-gesture-handler";
import {nutrientsNameAndCategory} from "../utils/nutrientsNameAndCategory";


const FoodInformationModal = (props) => {
    const bottomSheet = React.useRef();
    var nutrientsCarouselItems = props.nutrients.map(nutrient => {
        if (nutrient.amount != 0) {
            return (
                <Div style={{
                    width: 100,
                    height: 100,
                    borderRadius: 5,
                }}>
                    <TouchableOpacity
                        style={{
                            height: 100
                        }}
                        onPress={() => {{
                            alert(nutrientsNameAndCategory[nutrient.nutrientId].name + ": " + nutrient.amount + " mg" )
                        }
                    }}
                    >
                        {nutrient.nutrientId == "ckyvcy4ph00078vpcs4nx4kpn" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/a.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pk00208vpcu5o7a7uj" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/e.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pl00278vpcexyv0pse" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/k.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pm00338vpcliks7a0n" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/b1.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pn00398vpcx6ia3vnv" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/b2.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pt00858vpcdzhjl669" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/b5.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pn00458vpcywk5yrl3" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/b6.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pq00648vpcc83jye8a" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/b7.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4po00518vpco35ce0jb" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/b12.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pr00718vpcccjw7qu5" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/ni.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4ps00788vpca8f1l7w3" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/f.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pv00988vpc709ldv5i" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/ca.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pv01048vpcye864tyg" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/cl.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pw01108vpclxaqkyv4" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/mg.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4px01168vpcva8l1fzv" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/p.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4py01228vpcnw9dr9s4" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/kalium.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pz01288vpcfkpwndxj" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/na.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q001428vpcyxtz3vn3" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/cr.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q101488vpcxpw3v0xy" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/cu.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q201548vpcrifefmwj" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/flour.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q201608vpc6dmw4mao" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/j.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q301738vpc8h7y24v5" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/mn.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q401808vpc7966oalv" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/mo.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q401878vpci9ixunsd" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/se.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q501948vpcppnxoaxy" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/zn.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4q301678vpc4keh8u0t" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/fe.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pp00588vpcsti9l4dx" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/c.png"}}/>}
                        {nutrient.nutrientId == "ckyvcy4pj00148vpcmabjhnp8" && <Image h={100} w={100} source={{uri: "http://" + env.IP + ":4000/images/d.png"}}/>}
                    </TouchableOpacity>
                </Div> 
                );
        } else {
            return (
                <></>
            )
        }
        })
    if (props.nutrients.length > 2) {
        nutrientsCarouselItems.push(<Div />)
    }
    return (
    <Div>
            <Text style={{
                fontWeight: "700",
                fontSize: 20,
                textAlign: "center",
                marginTop: 10,
            }}>
                {props.name}
            </Text>
            <Text style={{
                fontStyle: "italic",
                fontWeight: "500",
                textAlign: "center",
                marginTop: 10
            }}>
                {props.description}
            </Text>
            <Div style={{
                marginTop: 30,
                height: 100,
            }}>
                <Carousel pageStyle={{
                    width: 100
                }}>
                    {nutrientsCarouselItems}
                </Carousel>
            </Div>
                <ScrollView style={{
                        height: "100%",
                        marginBottom: 100,
                        backgroundColor: "red",
                        margin: 20
                    }}>
                    <DataTable>
                        <DataTable.Header>
                            <DataTable.Title>Nährstoff</DataTable.Title>
                            <DataTable.Title>Kategorie</DataTable.Title>
                            <DataTable.Title numeric>Menge in mg</DataTable.Title>
                        </DataTable.Header>
                    
                        {props.nutrients.map((nutrient) => {
                            if (nutrient.amount != 0) {
                                return (
                                    <DataTable.Row>
                                        <DataTable.Cell>{nutrientsNameAndCategory[nutrient.nutrientId].name}</DataTable.Cell>
                                        <DataTable.Cell>{nutrientsNameAndCategory[nutrient.nutrientId].category}</DataTable.Cell>
                                        <DataTable.Cell numeric>{nutrient.amount}</DataTable.Cell>
                                    </DataTable.Row>
                                )
                            }
                        }
                        )}
                    </DataTable>
                    <Button onPress={() => {
                        bottomSheet.current.show()
                    }}>
                        Hinzufügen
                    </Button>
                </ScrollView>
            <Div style={{
                marginLeft: Dimensions.get("screen").width / 2.8
            }}>
            </Div>
            <BottomSheet hasDraggableIcon ref={bottomSheet} height={Dimensions.get("screen").height * 0.9}>
                <AddToMealsModal id={props.id} name={props.name} nutrients={props.nutrients} description={props.description} navigation={props.navigation} bottomSheet={bottomSheet}/>
            </BottomSheet>
    </Div>
    )
}

export default FoodInformationModal;

This is my code for the actual component, which is called in the BottomSheet.

<BottomSheet draggable={true} ref={bottomSheet} height={Dimensions.get("screen").height * 0.9} overDragResistanceFactor={10} detached={true}>
   <BottomSheetModal id={clickedInfo.id} name={clickedInfo.name} nutrients={clickedInfo.nutrients} description={clickedInfo.description} isAdd={isAdd} navigation={ navigation } bottomSheet={bottomSheet} /* meals={meals} *//>
</BottomSheet>

This is how the BottomSheet is called, in combination with the BottomSheetModal component:

import FoodInformationModal from "./FoodInformationModal";
import AddFoodModal from "./AddFoodModal";

export default BottomSheetModal = (props) => {
    if (props.isAdd) {
        return <AddFoodModal bottomSheet={props.bottomSheet} />
    } else {
        return <FoodInformationModal {...props} />
    }
}

Does any of you know how to fix this?

How it looks like with enough space

How it looks like with not enough space

What is the issue here? If it is that you can't use a ScrollView, and you want to, can you say why it's not working, or give an error message? — Abe, May 24 '22 at 14:01
It doesn't throw an error, its just not working. I just cant scroll and there isnt even the scroll bar at the right. — Hagen, May 24 '22 at 14:07
What have you tried? Do any of the answers here help? https://stackoverflow.com/questions/39548664/react-native-scroll-view-not-scrolling — Abe, May 24 '22 at 14:18
Wrapping the Table parts into `` was the solution for me. Thanks — Hagen, May 24 '22 at 14:56
Does this answer your question? [React-Native, Scroll View Not Scrolling](https://stackoverflow.com/questions/39548664/react-native-scroll-view-not-scrolling) — Abe, May 24 '22 at 16:22

score 0 · Answer 1 · answered Oct 18 '22 at 13:01

You can use the component provided by the library

    import React from "react";
    import {View} from "react-native";
    import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";

    const App = () => {
      return (
        <View>
          <BottomSheet
            ref={sheetRef}
            index={1}
            snapPoints={snapPoints}
            onChange={handleSheetChange}>
            <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
              {/*Place your views here*/}
            </BottomSheetScrollView>
          </BottomSheet>
        </View>
      );
    };

React Native, cant use ScrollView inside BottomSheet

1 Answers1