ScrollView with loop inside of it Not Scrolling React Native

Question

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.

EDIT: Same code with FlatList but it still won't scroll.

export default function MenuItems() {
  const renderItem = ({ item }) => (
    <View>
      <View style={styles.menuItemStyle}>
        <FoodInfo food={item} />
        <FoodImage food={item} />
      </View>
      <Divider
        width={0.5}
        orientation="vertical"
        style={{ marginHorizontal: 20 }}
      />
    </View>
  );
  return (
    <View>
      <FlatList
        data={foods}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  menuItemStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 20,
  },
  titleStyle: {
    fontSize: 19,
    fontWeight: "600",
  },
});
const FoodInfo = (props) => (
  <View style={{ width: 240, justifyContent: "space-between" }}>
    <Text style={styles.titleStyle}>{props.food.title}</Text>
    <Text>{props.food.description}</Text>
    <Text>{props.food.price}</Text>
  </View>
);

const FoodImage = (props) => (
  <View>
    <Image
      source={{ uri: props.food.image }}
      style={{ width: 100, height: 100, borderRadius: 9 }}
    />
  </View>
);

Try using a Flatlist which is much more efficient and better compared to what you have done. <View><FlatList/></View> — Akshay Shenoy
– Akshay Shenoy, Commented Dec 5, 2021 at 8:30

Sudharsan Palanisamy · Accepted Answer · 2021-12-05 08:34:03Z

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;

I'm following a tutorial and this is pretty confusing right now. It should be possible to use ScrollView
Yeah you need to import these two components in your app folder. <FoodInfo food={food} /> <FoodImage food={food} />
that's "unnecessary" code that's why I didn't add it at first but let me add it so it's clearer

007 · Accepted Answer · 2021-12-05 10:28:46Z

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;

Collectives™ on Stack Overflow

ScrollView with loop inside of it Not Scrolling React Native

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related