He encontrado un problema. ScrollView se corta en la parte inferior de la pantalla tanto en Android como en iOS. Es "no desplazable". Mi código es bastante 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, }, });Como podéis ver he usado trucos de flex, también he probado con padding, de todo. Simplemente no funciona. Solo uso dos bibliotecas en mi proyecto: "react-native-render-html": "^6.3.4" y React Navigation.
¡Gracias!
Entonces, después de horas de buscar e intentar, literalmente, lo logré.
<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> Lo que cambié es que agregué contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }} a mi componente ScrollView. A mi me funciono 300, quizas puedas cambiar segun tus necesidades.