react-native scrollview doesn't scroll

Question

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?

Tell me how can i also install react native

Tawanda Muzavazi
– Tawanda Muzavazi

2017-10-28 04:27:28 +00:00
Commented Oct 28, 2017 at 4:27 — Tawanda Muzavazi
– Tawanda Muzavazi, Commented Oct 28, 2017 at 4:27

Sagar Chavada · Accepted Answer · 2017-10-28 04:08:26Z

8

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,
  }

answered Oct 28, 2017 at 4:08

Sagar Chavada

5,2697 gold badges43 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user13101751 Over a year ago

This doesn't work for me. Could you take a look here? stackoverflow.com/questions/63437251/…

Hogan · Accepted Answer · 2020-08-10 16:57:25Z

0

My ScrollView is nested in two other views. The issue was solved by providing a height to the scrollview. It's not necessary on iOS so, after adding Platform and Dimensions to react native imports, I do this:

 const { height } = Dimensions.get("screen");
 const styles = StyleSheet.create({
 scrollView: {
   // my outer views have flex:1 so no flex needed here
   alignItems: "center",
   justifyContent: "center", // or whatever you want
   width: "100%,
   height: Platform.OS === "android" ? height * 1.3 : height,
   // if it was just "height", there would be no extra space to scroll on android
 },

 // lots of other styles and stuff

 });

answered Aug 10, 2020 at 16:57

Hogan

1651 gold badge2 silver badges8 bronze badges

2 Comments

user13101751 Over a year ago

What should we use as the height? The screen height? I tried adding height: '50%' but it didn't work for me. Could you take a look here? stackoverflow.com/questions/63437251/…

RowanX Over a year ago

This messes up with the height of the screen in different devices :(

Collectives™ on Stack Overflow

react-native scrollview doesn't scroll

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related