ScrollView with loop inside of it Not Scrolling React Native-CodePudding

I'm running a loop inside a ScrollView and for no apparent reason it doesn't scroll. I've read other posts where they set flex:1 or flexGrow:1 which I tried but it still doesn't work.

I'm using expo to run the app on my android device.

fooditems.js

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

const foods = [
  {
    title: "chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur,  recusandae error amet cum doloremque mollitia hic, porro autem qui libero fugit atque.",
    image:
      "some image link",
    price: "$ 10.99",
  },
  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },
  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },
];
export default function MenuItems() {
  return (
    <ScrollView>
      {foods.map((food, index) => (
        <View key={index}>
          <View style={styles.menuItemStyle}>
            <FoodInfo food={food} />
            <FoodImage food={food} />
          </View>
          <Divider width={0.5} />
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  menuItemStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 20,
  },
  titleStyle: {
    fontSize: 19,
    fontWeight: "600",
  },
});

I'm not too sure why this is happening but on ios there don't seem to be such a problem

CodePudding user response：

import FoodInfo and FoodImage

I would suggest you to use FlatList instead of scroll view, bcz a large number of data(JSON) is smoothly handled only by flatlist, In future if u r using Any api request for data then its better to go with flatlist

optionally u can reder the view horizontally visit https://reactnative.dev/docs/flatlist

example
import React from 'react';
import {View, FlatList, StyleSheet, Text} from 'react-native';

const Foods = [
  {
    title: "chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur,  recusandae error amet cum doloremque mollitia hic, porro autem qui libero fugit atque.",
    image:
      "some image link",
    price: "$ 10.99",
  },
  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },
  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },
];

const App = () => {
  const renderItem = ({ item }) => (
      <View style={styles.container}>    
      <Text style={styles.title}>{item.title}</Text>
      <Text>{item.description}</Text>
      <Text>{item.image}</Text>
      <Text>{item.price}</Text>
     <View style={{width: "100%", backgroundColor: 'white', height:   
      3,}}/>
      </View>
  );

  return (
   <View >
      <FlatList
        data={Foods}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
   </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 10,
    backgroundColor: 'gray'
  },
  title: {
    fontSize: 32,
  },
});

export default App;

CodePudding user response：

If your items are similar in structure always recommend using FlatList. It will optimize memory usage. Flatlist documentation

But if you still want to use ScrollView use this code. This is working.

import React from 'react';
import { ScrollView, View, StyleSheet, Text } from 'react-native';
import { Divider, Image } from "react-native-elements";

const foods = [
  {
    title: "chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur,  recusandae error amet cum doloremque mollitia hic, porro autem qui libero fugit atque.",
    image:
      "some image link",
    price: "$ 10.99",
  },
  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },
  {
    title: "barbecued chicken",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque quis quam architecto. ",
    image:
      "some image link",
    price: "$ 14.99",
  },
];

const MenuItems = () => {
  return (
    <ScrollView>
      {foods.map((food, index) => (
        <View key={index}>
          <View style={styles.menuItemStyle}>
            <Text style={styles.titleStyle}>{food.description}</Text>
            <Text style={styles.titleStyle}>{food.price}</Text>
          </View>
          <Divider width={0.5} />
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  menuItemStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 20,
  },
  titleStyle: {
    fontSize: 19,
    fontWeight: "600",
  },
});

export default MenuItems;