Reputation: 3241
I'm new to RN, not sure why this very simple Component with just an Image and some Text doesn't scroll. I suspect the first Text "title here" could be the problem.
class ScrollContent extends Component {
state = {}
componentDidMount(){
console.log("about componentDidMount")
}
render() {
const { params } = this.props.navigation.state;
return (
<View style={{flex: 1}}>
<ScrollView>
<Image
source={require('./../img/about.jpg')}
style={{height:"40%",resizeMode: 'cover'}}
/>
<Text style={{
fontSize: 22,
color:"white",
backgroundColor:"red",
paddingTop:20,
paddingBottom:20,
paddingLeft:10,
paddingRight:10
}}
>title here</Text>
<Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate diam a euismod euismod. Nullam sagittis pellentesque sem, eu vestibulum diam. Mauris eget egestas quam. Nunc fringilla magna id egestas semper. Mauris aliquet justo a vestibulum malesuada.</Text>
<Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate diam a euismod euismod. Nullam sagittis pellentesque sem, eu vestibulum diam. Mauris eget egestas quam. Nunc fringilla magna id egestas semper.</Text>
</ScrollView>
</View>
);
}
}
Upvotes: 0
Views: 417
Reputation: 22189
Since the Scroll in the Android
is not Inertial as IOS
,
therefore you wont be able to visualise the scroll if the elements contained in your ScrollView
have a total height
less that the screen height
.
Also another point to note you need to supply the height of the Image based on the Dimensions
of the screen, since ScrollView
behaviour differs from the View behaviour
Hope it helps
Upvotes: 1