OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

FlatList not scrolling

  • Thread starter Thread starter matthiasgoossens
  • Start date Start date
M

matthiasgoossens

Guest
i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction?

render-function and style from my screen file:

Code:
render() {
return (
  <View style={styles.container}>
    <SearchBar />
    <ActivityList style={styles.list} data={this.state.data} />
  </View>
);
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'flex-start',
 },
 list: {
  flex: 1,
  overflow: 'hidden',
 },
});

render function and style from my listitem component:

Code:
export default class CardItem extends React.PureComponent {
render() {
return (
  <View style={styles.cardview}>
    <View style={styles.imagecontainer}>
      <Image
        resizeMode="cover"
        style={styles.cardimage}
        source={{
          uri: this.props.image,
        }}
      />
    </View>
    <View style={styles.cardinfo}>
      <Text style={styles.cardtitle}>{this.props.title}</Text>
      <View style={styles.cardtext}>
        <Text style={styles.textdate}>{this.props.date}</Text>
        <Text style={styles.texthour}>{this.props.hour}</Text>
      </View>
    </View>
  </View>
);
}
}

const styles = StyleSheet.create({
 cardview: {
  flex: 1,
  justifyContent: 'flex-start',
  backgroundColor: 'white',
  elevation: 3,
  maxHeight: 200,
  width: Dimensions.get('window').width - 20,
  margin: 1,
  marginTop: 10,
  borderRadius: 4,
},
imagecontainer: {
 flex: 7,
 height: 140,
 borderRadius: 4,
},
cardimage: {
 flex: 1,
 opacity: 0.8,
 height: 140,
 borderTopLeftRadius: 4,
 borderTopRightRadius: 4,
},
cardinfo: {
 flex: 2,
 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 10,
},
cardtitle: {
 flex: 1,
 fontSize: 16,
 fontWeight: 'bold',
},
cardtext: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'flex-end',
},
textdate: {
 color: '#5e5e71',
},
texthour: {
 color: '#5e5e71',
},
});

render function and style from my list component:

Code:
export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
);

_keyExtractor = item => item.id;

render() {
return (
  <FlatList
    data={this.props.data}
    renderItem={this._renderCardItem}
    contentContainerStyle={styles.cardcontainer}
    keyExtractor={this._keyExtractor}
  />
);
}
}

const styles = StyleSheet.create({
 cardcontainer: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: 'white',
  alignItems: 'center',
  width: Dimensions.get('window').width,
  borderWidth: 0,
 },
});

my data items have all a unique id, title, date, hour.

Read through all available guides and docs and found no solution.

<p>i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction?</p>

<p><strong>render-function and style from my screen file:</strong></p>

<pre><code>render() {
return (
<View style={styles.container}>
<SearchBar />
<ActivityList style={styles.list} data={this.state.data} />
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
},
list: {
flex: 1,
overflow: 'hidden',
},
});
</code></pre>

<p><strong>render function and style from my listitem component:</strong></p>

<pre><code>export default class CardItem extends React.PureComponent {
render() {
return (
<View style={styles.cardview}>
<View style={styles.imagecontainer}>
<Image
resizeMode="cover"
style={styles.cardimage}
source={{
uri: this.props.image,
}}
/>
</View>
<View style={styles.cardinfo}>
<Text style={styles.cardtitle}>{this.props.title}</Text>
<View style={styles.cardtext}>
<Text style={styles.textdate}>{this.props.date}</Text>
<Text style={styles.texthour}>{this.props.hour}</Text>
</View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
cardview: {
flex: 1,
justifyContent: 'flex-start',
backgroundColor: 'white',
elevation: 3,
maxHeight: 200,
width: Dimensions.get('window').width - 20,
margin: 1,
marginTop: 10,
borderRadius: 4,
},
imagecontainer: {
flex: 7,
height: 140,
borderRadius: 4,
},
cardimage: {
flex: 1,
opacity: 0.8,
height: 140,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
},
cardinfo: {
flex: 2,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
},
cardtitle: {
flex: 1,
fontSize: 16,
fontWeight: 'bold',
},
cardtext: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
},
textdate: {
color: '#5e5e71',
},
texthour: {
color: '#5e5e71',
},
});
</code></pre>

<p><strong>render function and style from my list component:</strong></p>

<pre><code>export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
image={item.image}
title={item.title}
date={item.date}
hour={item.hour}
/>
);

_keyExtractor = item => item.id;

render() {
return (
<FlatList
data={this.props.data}
renderItem={this._renderCardItem}
contentContainerStyle={styles.cardcontainer}
keyExtractor={this._keyExtractor}
/>
);
}
}

const styles = StyleSheet.create({
cardcontainer: {
flex: 1,
overflow: 'hidden',
backgroundColor: 'white',
alignItems: 'center',
width: Dimensions.get('window').width,
borderWidth: 0,
},
});
</code></pre>

<p>my data items have all a unique id, title, date, hour.</p>

<p>Read through all available guides and docs and found no solution.</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top