Question 211101 in React native Question posted in
The official React Native documentation can be found here.

react native scrollview not working for me

My code consists on these three views:
App.js

import { StyleSheet, Text, View } from 'react-native';
import HomePage from './pages/homepage/HomePage';

export default function App() {
return (
  <View
    style={[styles.container]}>
    <HomePage/>
  </View>
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
},
});

HomePage.js

import CatPreview from '../../components/CatPreview'

export default function HomePage() {
  const colors_arr = [
      {color:'#2196F3',category:'מסעדה'},
      {color:'#03A9F4',category:'מזנון'},
      {color:'#00BCD4',category:'מלון'},
      {color:'#009688',category:'סושי'},
      {color:'#4CAF50',category:'חלומי'},
      {color:'#8BC34A',category:'לורם'},
      {color:'#CDDC39',category:'איפסום'},
      {color:'#FFEB3B',category:'רוק'},
      {color:'#FFC107',category:'אנד'},
      {color:'#FF9800',category:'רול'},
      {color:'#FF5722',category:'שלום'}
  ];
  return (
     
          <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
              {colors_arr.map((category,key)=>(<CatPreview color={category.color} category={category.category} key={key}/>))}
          </ScrollView>
  
    );
  }

CatPreview.js



export default function CatPreview({color,category}) {
  
  return (
      <View style={[styles.containerr,{backgroundColor:color}]}>
        <View style={{flex:1,alignItems:"center"}}><Text>{category}</Text></View>
        <View style={{flex:2}}></View>
      </View>
  );
}

const styles = StyleSheet.create({
  containerr: {
      // flex: 1,
     height:"25%"
      
      
  },
});

enter image description here

For some reason im unable to scroll (resolving in me only being able to see the first four views).
Iv tried adding the contentContainerStyle={{ flexGrow: 1 }} to the scrollview tag which helped spreading the view across the screen but Im still unable to scroll 🙁 .

thanks everyone.

btw go easy on me im still new to native lol.

Tags:

2

Answers


  1. 0

    Change the height value of the CatPreview.js component to the value mentioned in the below snippet

    import {View,Text,StyleSheet,Dimensions} from 'react-native'

const height = Dimensions.get('window').height //Screen height

export default function CatPreview({color,category}) {
  return (
      <View style={[styles.containerr,{backgroundColor:color}]}>
        <View style={{ flex:1, alignItems:"center", justifyContent: "center"}}>
          <Text>{category}</Text>
        </View>
      </View>
  );
}


const styles = StyleSheet.create({
  containerr: {
    //  flex: 1,
     height: height * 0.35 , //35%    
  },
});
    Login or Signup to reply.
  2. 0

    Just you need to use TouchableOpacity instead of View.

    CatPreview.js

    export default function CatPreview({color,category}) {
  
  return (
      <TouchableOpacity style={[styles.containerr,{backgroundColor:color}]}>
        <View style={{flex:1,alignItems:"center"}}><Text>{category}</Text></View>
        <View style={{flex:2}}></View>
      </TouchableOpacity>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search