I'd like to create a FlatList, that has hundreds of elements. They all contain a View element with a picture, and under that some text in it. It's quite allright, when the texts are short. But it messes up with longer texts, because the "flow out" of the flatlist element. How can I automatically adjust the height of the elements?
My code:
import React from 'react';import { FlatList, StyleSheet, Image, View, Text, TouchableHighlight, SafeAreaView, Dimensions } from 'react-native';const data: any = [ {"id": "f06a6c3b-4d73-11ec-859c-18c04d059af3", "text": "Random text, which is very very very very very very very very very very very very very very very very very very very very very very very very very very very long...","some_name": "Name1", "short": "short text", "image_uri": "https://reactjs.org/logo-og.png" }, {"id": "f06a6c3b-4d73-11ec-859c-18c04d059af4", "text": "Random text", "some_name": "Name2","short": "short text","image_uri": "https://reactjs.org/logo-og.png" }]const Article = (props:any) => (<View style={styles.canvas}><TouchableHighlight activeOpacity={0.9} underlayColor="lightgray" key={props.item.id} style={styles.toucharea}><View style={{ flex: 1 }}><Image style={styles.image} source={{ uri: props.item.image_uri, }} /><View style={styles.article}><Text style={styles.some_name}> {props.item.some_name}</Text><Text style={styles.text}> {props.item.text}</Text><Text style={styles.short}> {props.item.short}</Text></View></View></TouchableHighlight></View>);const renderArticle = (props:any) => (<Article item={props.item}/>);export default function App() { return (<SafeAreaView style={styles.container}><FlatList data={data} renderItem={renderArticle} initialNumToRender={6} keyExtractor={({ id }, index) => id} /> </SafeAreaView> );}const styles = StyleSheet.create({ container: { width: '100%', height: '100%', flex: 1, paddingTop: 12, }, canvas: { minHeight: Dimensions.get('window').width * 0.7, flex: 1, marginTop: '6%', }, toucharea: { flex: 1, }, article: { flex: 0, width: '92%', marginLeft: '4%', marginRight: '4%', alignItems: 'center', }, image: { flex: 1, minHeight: '62%', width: '92%', marginLeft: '4%', marginRight: '4%', justifyContent: "center", borderRadius: 10, overflow: 'hidden', }, text: { flex: 1, fontSize: 20, fontWeight: 'bold', alignSelf: 'flex-start', marginLeft: '3%', marginTop: '2%', }, some_name: { fontSize: 12, alignSelf: 'flex-start', marginLeft: '3%', marginTop: '1%', }, short: { fontSize: 9, bottom: 0, marginTop: 5, alignSelf: 'flex-start', marginLeft: '3%', marginBottom: '1%', },});The result:
