CODEWITHSUNDEEP
react-native
kony
kony

Reputation: 92

ScrollView not scrollable

I have tried finding a solution everywhere but I couldn't find one for my problem. It's a basic example of ScrollView but it doesn't seem to work however I code it. See code:

import React from 'react'
import { StyleSheet, Text, View, FlatList, ScrollView, SafeAreaView, Dimensions, StatusBar } from 'react-native';

const LevelCircle = () => {  
 return (
 <View style={{height: 500}}>
       <ScrollView contentContainerStyle={{ flexGrow: 1 }}> 
        <Text style={styles.paragraph}>
          This is a ScrollView example HEADER.
        </Text>
        <Text style={styles.paragraph}>
            This is a ScrollView example paragraph.
        </Text>
        <Text style={styles.paragraph}>
            This is a ScrollView example paragraph.
        </Text>
        <Text style={styles.paragraph}>
            This is a ScrollView example paragraph.
        </Text>
        <Text style={styles.paragraph}>
            This is a ScrollView example paragraph.
        </Text>
        <Text style={styles.paragraph}>
            This is a ScrollView example paragraph.
        </Text>
        <Text style={styles.paragraph}>
          This is a ScrollView example next.
        </Text>
        <Text style={styles.paragraph}>
          This is a ScrollView example next.
        </Text>
        <Text style={styles.paragraph}>
          This is a ScrollView example next.
        </Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    margin: 24,
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default LevelCircle;

I tried to set contentContainerStyle to flex: 1, and the solution with the padding, but it doesn't seem to work. Also, I tried to set the parent View component style to flex: 1, but then it doesn't show the content inside it.

Upvotes: 1

Views: 246

Answers (1)

Brendan5320
Brendan5320

Reputation: 64

flexGrow: 1 should not be required as the height of the <ScrollView> is bounded by its parent element's fixed height.

When I run your code I see the intended behavior (a 500px bounded scrollView).

screenshot

Upvotes: 2

Related Questions