alfredopacino
alfredopacino

Reputation: 3241

ScrollView with image and text not scrolling in android

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

Answers (1)

Pritish Vaidya
Pritish Vaidya

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

Related Questions