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!
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.