ScrollView cut off in React Native

Question

I have encountered a problem. ScrollView is cut off at the bottom of the screen on both Android and iOS. It's "unscrollable". My code is rather simple:

 <View style={{ flex: 1 }}>
          <ScrollView style={styles.container}>
            <Image
              style={styles.image}
              source={{ uri: constants.media_url + "/" + data.img }}
            />

            <Text style={styles.title}>{data.heading}</Text>
            <Text style={styles.published_date}>{data.published_date}</Text>

            <Text style={styles.introduction}>
              {stripHTML(data.introduction)}
            </Text>
            <RenderHtml contentWidth={width} source={source} />
          </ScrollView>
        </View>

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
    padding: 10,
    flex: 1,
  },
  image: {
    width: "100%",
    maxHeight: 270,
    height: "100%",
  },
  title: {
    fontSize: 24,
    marginTop: 20,
    fontWeight: "bold",
  },
  introduction: {
    fontWeight: "bold",
  },
  text: {
    fontWeight: "normal",
    marginTop: 13,
  },
  published_date: {
    color: colors.gray,
    marginVertical: 10,
  },
});

As you can see I have used flex tricks, I've also tried padding, everything. It just doesn't work. I use only two libraries in my project: "react-native-render-html": "^6.3.4", and React Navigation.

Thank you!

Answer 1

So, after hours of searching and trying, literally, I have done it.

<View style={{ flex: 1 }}>
          <ScrollView
            style={styles.container}
            contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }}
          >
            <Image
              style={styles.image}
              source={{ uri: constants.media_url + "/" + data.img }}
            />

            <Text style={styles.title}>{data.heading}</Text>
            <Text style={styles.published_date}>{data.published_date}</Text>

            <Text style={styles.introduction}>
              {stripHTML(data.introduction)}
            </Text>
            <RenderHtml contentWidth={width} source={source} />
          </ScrollView>
        </View>

What I changed is I added contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }} to my ScrollView component. For me 300 worked, maybe you can change according to your needs.