angry kiwi
angry kiwi

Reputation: 11435

react native scroll view doesnt scroll in android

the scrollview work in ios but not in android

import React from 'react';
import {
    ScrollView,
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class HomeScreen extends React.Component {
    render() {
        return (        
            <ScrollView style={css.outside} contentContainerStyle={css.contentContainer}>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
            </ScrollView>       
        )
    }   
}

const css = StyleSheet.create({
    outside :{

        flex:1,
    },
    contentContainer: {

        paddingTop: 30,
    },
});

snack : https://snack.expo.io/@cosmo/simple-scroll

Upvotes: 0

Views: 59

Answers (1)

Kamal Pandey
Kamal Pandey

Reputation: 1598

You don't have enough content for this. Either add more content or try with below provided one to confirm it is working fine in android.

import React from 'react';
import {
    ScrollView,
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class HomeScreen extends React.Component {
    render() {
        return (        
      <View style={{height: 150}}>
        <ScrollView contentContainerStyle={css.contentContainer}>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
                <Text>some text</Text>
            </ScrollView>       
      </View>

        )
    }   
}

const css = StyleSheet.create({
    contentContainer: {
        paddingTop: 30,
    },
});

Upvotes: 2

Related Questions