ReactNative ScrollView inside a View

Question

Im trying to make a scrollview inside a View in ReactNative. For some reason i cant scroll in the ScrollView.

render() {
    return (
      <View>
        <View>
          <Text>Top</Text>
        </View>
        <ScrollView >
          <Text>Line 1</Text>
          <Text>Line 2</Text>
          <Text>Line 3</Text>
          <Text>Line 4</Text>
          <Text>Line 5</Text>
          <Text>Line 6</Text>
          <Text>Line 7</Text>
          ...
        </ScrollView>
      </View>
    );
  }

What is wrong here? Im testing on Android

Thanks, Magnus

https://stackoverflow.com/questions/39548664/react-native-scroll-view-not-scrolling — GOXR3PLUS, Jun 15 '20 at 07:51

score 5 · Answer 1 · answered Aug 13 '16 at 07:37

5

You should give the ScrollView a height. From the example in the docs;

<ScrollView style={styles.scrollView}>
...
...
var styles = StyleSheet.create({
  scrollView: {
    height: 300,
  },
});

answered Aug 13 '16 at 07:37

hasseio

599
2
3

Thanks, this wasn't exactly what i was looking for but it led me to the flex layout. Thanks. – hippie Aug 13 '16 at 11:31

score 2 · Accepted Answer · edited Mar 22 '18 at 13:24

don't forget to import scrollview from react native like this :import { Text, View, ScrollView } from 'react-native';

    render() {
        return (
          <View style={styles.container}> // style in firstview
            <View>
              <Text>Top</Text>
            </View>
            <ScrollView contentContainerStyle={styles.Scroll}>// and give style in scrollview
              <Text>Line 1</Text>
              <Text>Line 2</Text>
              <Text>Line 3</Text>
              <Text>Line 4</Text>
              <Text>Line 5</Text>
              <Text>Line 6</Text>
              <Text>Line 7</Text>
            </ScrollView>
          </View>
        );
      }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'orange',
        justifyContent: 'center',
        // alignItems: 'center'
    },
    Scroll: {
      height: 1000,
      paddingVertical: 30,
  }
});

Most upvoted answer [here](https://stackoverflow.com/questions/39548664/react-native-scroll-view-not-scrolling) is more flexible , because with 1000 is kind of weird when you don't know screen height . — GOXR3PLUS, Jun 15 '20 at 07:50

ReactNative ScrollView inside a View

2 Answers2