Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native scroll view not scrolling

My ScrollView is not scrolling unfortunately, I've tried the solutions posted here: React-Native, Scroll View Not Scrolling, but it doesn't seem to help. Has anyone encountered this and is able to help me with this?

      

 <View style={styles.container}>
<View style={{ flex: 1 }}>
    <ImageBackground
        style={{ height: "100%", width: "100%" }}
        source={{ uri: IMAGE }}
        resizeMode="cover"
    >
        <Overlay styleName="fill-parent">
            <Title>Title</Title>
            {this.renderOffer()}
            {this.renderSwitch()}
        </Overlay>
    </ImageBackground>
</View>
<View style={{ backgroundColor: "white", flex: 1 }}>
    <View style={{ paddingTop: 5 }}>
        <Title styleName="md-gutter-bottom h-center">Title</Title>
    </View>
    <ScrollView
        style={{
            backgroundColor: "white",
            flex: 1,
            marginBottom: 5,
            marginTop: 0
        }}
    >
        <Caption style={{ margin: 10 }}>
            A Stop on the Salt Route 1000 B.C. As they rounded a bend in the
            path that ran beside the river, Lara recognized the silhouette
            of a fig tree atop a nearby hill. The weather was hot and the
            days were long. The fig tree was in full leaf, but not yet
            bearing fruit. Soon Lara spotted other landmarks—an outcropping
            of limestone beside the path that had a silhouette like a man’s
            face, a marshy spot beside the river where the waterfowl were
            easily startled, a tall tree that looked like a man with his
            arms upraised. They were drawing near to the place where there
            was an island in the river. The island was a good spot to make
            camp. They would sleep on the island tonight. Lara had been back
            and forth along the river path many times in her short life. Her
            people had not created the path—it had always been there, like
            the river—but their deerskin-shod feet and the wooden wheels of
            their handcarts kept the path well worn. Lara’s people were salt
            traders, and their livelihood took them on a continual journey.
            At the mouth of the river, the little group of half a dozen
            intermingled families gathered salt from the great salt beds
            beside the sea. They groomed and sifted the salt and loaded it
            into handcarts. When the carts were full, most of the group
            would stay behind, taking shelter amid rocks and simple
            lean-tos, while a band of fifteen or so of the heartier members
            set out on the path that ran alongside the river. With their
            precious cargo of salt, the travelers crossed the coastal
            lowlands and traveled toward the mountains. But Lara’s people
            never reached the mountaintops; they traveled only as far as the
            foothills. Many people lived in the forests and grassy meadows
            of the foothills, gathered in small villages. In return for
            salt, these people would give Lara’s people dried meat, animal
            skins, cloth spun from wool, clay pots, needles and scraping
            tools carved from bone, and little toys made of wood. Their
            bartering done, Lara and her people would travel back down the
            river path to the sea. The cycle would begin again. It had
            always been like this. Lara knew no other life. She traveled
            back and forth, up and down the river path. No single place was
            home. She liked the seaside, where there was always fish to eat,
            and the gentle lapping of the waves lulled her to sleep at
            night. She was less fond of the foothills, where the path grew
            steep, the nights could be cold, and views of great distances
            made her dizzy. She felt uneasy in the villages, and was often
            shy around strangers. The path itself was where she felt most at
            home. She loved the smell of the river on a hot day, and the
            croaking of frogs at night. Vines grew amid the lush foliage
            along the river, with berries that were good to eat. Even on the
            hottest day, sundown brought a cool breeze off the water, which
            sighed and sang amid the reeds and tall grasses. Of all the
            places along the path, the area they were approaching, with the
            island in the river, was Lara’s favorite. The terrain along this
            stretch of the river was mostly flat, but in the immediate
            vicinity of the island, the land on the sunrise side was like a
            rumpled cloth, with hills and ridges and valleys. Among Lara’s
            people, there was a wooden baby’s crib, suitable for strapping
            to a cart, that had been passed down for generations. The island
            was shaped like that crib, longer than it was wide and pointed
            at the upriver end, where the flow had eroded both banks. The
            island was like a crib, and the group of hills on the sunrise
            side of the river were like old women mantled in heavy cloaks
            gathered to have a look at the baby in the crib—that was how
            Lara’s father had once described the lay of the land. Larth
            spoke like that all the time, conjuring images of giants and
            monsters in the landscape. He could perceive the spirits, called
            numina, that dwelled in rocks and trees. Sometimes he could
            speak to them and hear what they had to say. The river was his
            oldest friend and told him where the fishing would be best. From
            whispers in the wind he could foretell the next day’s weather.
            Because of such skills, Larth was the leader of the group.
            “We’re close to the island, aren’t we, Papa?” said Lara. “How
            did you know?” “The hills. First we start to see the hills, off
            to the right. The hills grow bigger. And just before we come to
            the island, we can see the silhouette of that fig tree up there,
            along the crest of that hill.” “Good girl!” said Larth, proud of
            his daughter’s memory and powers of observation. He was a
            strong, handsome man with flecks of gray in his black beard. His
            wife had borne several children, but all had died very young
            except Lara, the last, whom his wife had died bearing. Lara was
            very precious to him. Like her mother, she had golden hair. Now
            that she had reached the age of childbearing, Lara was beginning
            to display the fullness of a woman’s hips and breasts. It was
            Larth’s greatest wish that he might live to see his own
            grandchildren. Not every man lived that long, but Larth was
            hopeful. He had been healthy all his life, partly, he believed,
            because he had always been careful to show respect to the numina
            he encountered on his journeys. Respecting the numina was
            important. The numen of the river could suck a man under and
            drown him. The numen of a tree could trip a man with its roots,
            or drop a rotten branch on his head. Rocks could give way
            underfoot, chuckling with amusement at their own treachery. Even
            the sky, with a roar of fury, sometimes sent down fingers of
            fire that could roast a man like a rabbit on a spit, or worse,
            leave him alive but robbed of his senses. Larth had heard that
            the earth itself could open and swallow a man; though he had
            never actually seen such a thing, he nevertheless performed a
            ritual each morning, asking the earth’s permission before he
            went striding across it. “There’s something so special about
            this place,” said Lara, gazing at the sparkling river to her
            left and then at the rocky, tree-spotted hills ahead and to her
            right. “How was it made? Who made it?” Larth frowned. The
            question made no sense to him. A place was never made, it simply
            was. Small features might change over time. Uprooted by a storm,
            a tree might fall into the river. A boulder might decide to
            tumble down the hillside. The numina that animated all things
            went about reshaping the landscape from day to day, but the
            essential things never changed, and had always existed: the
            river, the hills, the sky, the sun, the sea, the salt beds at
            the mouth of the river. He was trying to think of some way to
            express these thoughts to Lara, when a deer, drinking at the
            river, was startled by their approach. The deer bolted up the
            brushy bank and onto the path. Instead of running to safety, the
            creature stood and stared at them. As clearly as if the animal
            had whispered aloud, Larth heard the words “Eat me.” The deer
            was offering herself.
        </Caption>
    </ScrollView>
</View>
<View
    style={{
        flex: 0.2,
        flexDirection: "row",
        justifyContent: "space-between",
        margin: 5
    }}
>
    <View
        style={{
            flex: 1,
            margin: 5,
            marginTop: 0,
            marginRight: 0,
            flexDirection: "row",
            borderRadius: 5,
            borderColor: "white",
            borderWidth: 2
        }}
    >
        <View
            style={{
                flex: 1,
                borderRadius: 5,
                flexDirection: "row",
                justifyContent: "center"
            }}
        >
            <Button
                transparent
                onPress={() => {
                    var tickets = this.state.numTickets;
                    tickets = Math.max(0, tickets - 1);
                    this.setState({ numTickets: tickets });
                }}
            >
                <Entypo name="minus" size={25} style={{ color: "white" }} />
            </Button>
        </View>
        <View
            style={{
                flex: 2,
                alignItems: "center",
                justifyContent: "center"
            }}
        >
            <Text style={{ color: "white", fontSize: 16 }}>
                {this.state.numTickets}
            </Text>
        </View>
        <View
            style={{
                flex: 1,
                borderRadius: 5,
                justifyContent: "space-around",
                flexDirection: "row"
            }}
        >
            <Button
                style={{ alignItems: "center" }}
                transparent
                onPress={() => {
                    var tickets = this.state.numTickets;
                    tickets = Math.max(0, tickets + 1);
                    this.setState({ numTickets: tickets });
                }}
            >
                <Entypo name="plus" size={25} style={{ color: "white" }} />
            </Button>
        </View>
    </View>
    <View
        style={{
            flex: 1,
            margin: 5,
            marginTop: 0,
            borderRadius: 5,
            borderColor: "white",
            borderWidth: 2,
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "center"
        }}
    >
        <Text style={{ fontSize: 16, color: "white" }}>
            Pay €{price * this.state.numTickets}
        </Text>
    </View>
</View>
</View>;

It seems like I've set flex: 1 to all the relevant views, but it's still not possible to make it scroll.

Thanks in advance for any hints on how to improve this.

like image 292
SwimmingG Avatar asked Dec 10 '22 07:12

SwimmingG


2 Answers

try adding <ScrollView contentContainerStyle={{flexGrow:1}}> to your <ScrollView> component.

I had the same issue and this solved it.

like image 189
kahunaRN Avatar answered Dec 19 '22 02:12

kahunaRN


Maybe you should try giving height and width to your ScrollView component. And also, set horizontal prop to false.

like image 42
Ali Zeynalov Avatar answered Dec 19 '22 03:12

Ali Zeynalov