I can't seem to figure out why a screen in my Android app doesn't scroll at all in the Android emulator. Here's my code:
import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
Text,
ScrollView,
View,
TouchableHighlight,
StyleSheet
} from 'react-native';
const win = Dimensions.get('window');
class DeficiencyItem extends Component {
render() {
const touchable = {
width:win.width/2-20,
height:230,
backgroundColor:'red',
};
return (
<TouchableHighlight style={touchable}>
<View>
<Text>Item Here</Text>
</View>
</TouchableHighlight>
);
}
}
export default class Items extends Component {
static navigationOptions = {title:'hey'};
constructor(props)
{
super(props);
}
render() {
let deficiencies = [];
for(let x = 0; x<12;x++)
{
let row = <DeficiencyItem key={x} />;
deficiencies.push(row);
}
return (
<View style={{flex:1}}>
<ScrollView style={{
margin:5,
flexWrap: 'wrap',
flexDirection:'row',
}}>
{deficiencies}
</ScrollView>
</View>
);
}
}
There are items exceeding the bottom limit of the view port. But touch drag to scroll in the emulator does nothing. What did I do wrong?
if there is no view outside scrollview than remove View element and add flex:1 to scrollview.
Scrollview should be parent view,
<ScrollView style={styles.container}>
<View style={{flex:1}}>
{deficiencies}
</View>
</ScrollView>
container: {
flex: 1,
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With