tudo bem? Estou tendo um probleminha e espero que possam me ajudar a responder.
Eu tenho o seguinte código:
<View>
<ScrollView style={styles.scroll} contentContainerStyle={styles.scroll_items} horizontal showsHorizontalScrollIndicator={false}>
{planos.map(plano => (
<View key={plano?.PlanoID} style={styles.card}>
<View style={styles.plano_conteudos_wrapper}>
<Text style={styles.nome_plano}>{ plano?.PlanoNome }</Text>
<View style={styles.items_wrapper}>
{ plano?.Itens?.map(item => (
<Text key={item} style={styles.item_texto}>- { item }</Text>
))}
</View>
</View>
<View style={styles.plano_valores_wrapper}>
{plano?.Valores?.map(vigencia => (
<View key={vigencia?.PlanoVigenciaID} style={styles.valor_wrapper}>
<Text style={styles.vigencia}>{ vigencia?.VigenciaDescricao }</Text>
<Text style={styles.valor}>{ vigencia?.VigenciaValor }</Text>
</View>
))}
</View>
<TouchableOpacity style={styles.botao} onPress={() => {}}>
<Text style={styles.botao_texto}>
Adquirir
</Text>
</TouchableOpacity>
</View>
))}
</ScrollView>
</View>
Style
card: {
marginRight: 15,
width: 350,
marginTop: 20,
marginHorizontal: 15,
backgroundColor: '#FFF',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 6,
justifyContent: 'space-between',
},
plano_conteudos_wrapper: {
width: '100%',
borderBottomWidth: 1,
borderBottomColor: '#a3a3a3'
},
nome_plano: {
fontSize: 22,
fontFamily: 'Medium',
padding: 15,
textTransform: 'uppercase',
},
items_wrapper: {
marginHorizontal: 40,
marginBottom: 20
},
item_texto: {
fontSize: 18,
fontFamily: 'Regular'
},
plano_valores_wrapper: {
width: '80%',
marginVertical: 10,
alignItems: 'center',
alignSelf: 'center'
},
valor_wrapper: {
marginVertical: 10,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingBottom: 5,
borderBottomWidth: 1,
borderBottomColor: '#c4c4c4'
},
vigencia: {
fontSize: 18,
textTransform: 'uppercase'
},
valor: {
fontSize: 18,
color: 'green'
},
botao: {
maxWidth: '80%',
minWidth: '50%',
padding: 10,
backgroundColor: '#652468',
borderRadius: 5,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
marginTop: 10,
marginBottom: 20
},
botao_texto: {
fontSize: 18,
textTransform: 'uppercase',
color: '#FFF'
}
});
Isso imprime o seguinte resultado:


Qual o problema? O tamanho da Scrollview está respeitando o tamanho do maior card, porém por algum motivo, todos os outros cards estão com um height de 100% da Scrollview sendo que não quero isso, quero que cada Card tenha um height “fit-content” para cada card ter seu próprio tamanho e ocupar somente o que precisa.
Como fazer isso?