Issue with Flexbox content in Row, for React Native - css

Question

I'm having some issues with FlexBox of an Item in React Native my wish is to have a table using a row with this look:
(Sorry for my poor Paint Skills but all the text Name and numbers should be center vertical and Horizontally)
How it Currently looks:
Now the issue is that as you can see the image gets out of the Card Look and also it is not complete from the Sides.
Also there are other team Data which the images are bigger or the names are bigger and therefore the images is even further to the left :S
Example:
Finally here is the Code of the Item where I create the Row:
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const TablaItem = props => {
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<View style={styles.container}>
<View style={styles.flexItem}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: props.image}} />
</View>
</View>
<View style={styles.flexItem}>
<Text>{props.name}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.games}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.win}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.draw}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.loose}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.infavor}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.against}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.points}</Text>
</View>
</View>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 50,
margin: 20,
justifyContent: 'center',
alignItems: 'center'
},
container: {
flex: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
flexWrap: 'nowrap'
},
flexItem: {
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto',
alignSelf:'auto',
marginHorizontal: 10,
},
imageContainer: {
alignSelf: 'flex-end',
width: '200%',
height: '100%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
marginHorizontal: 10,
},
image: {
width: '100%',
height: '100%'
},
});
export default TablaItem;
And Here the code of the page where I render those items in a FlatList:
import React, { useState, useEffect, useCallback } from 'react';
import { FlatList, Button, ActivityIndicator, View, StyleSheet, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as tablaActions from '../store/actions/tabla';
import Colors from '../constants/Colors';
import Tabla from '../components/tablas/TablaItem';
import Encabezado from '../components/tablas/TablaEncabecado';
const TablaScreen = props => {
const [isLoading, setIsLoading] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false);
const [error, setError] = useState();
const tabla1 = useSelector(state => state.tabla.tabla1);
const tabla2 = useSelector(state => state.tabla.tabla2);
const dispatch = useDispatch();
//Aqui se llama a Load Tabla para llamar partidos desde el API
const loadTablas = useCallback(async () => {
setError(null);
setIsRefreshing(true);
try {
await dispatch(tablaActions.fetchTabla());
} catch (err) {
setError(err.message);
}
setIsRefreshing(false);
}, [dispatch, setIsLoading, setError]);
//unsuscribe de Tablas
useEffect(() => {
const unsubscribeTablas = props.navigation.addListener('focus', loadTablas);
return () => {
unsubscribeTablas();
};
}, [loadTablas]);
//useEffect (carga inicial) de Tablas
useEffect(() => {
setIsLoading(true);
loadTablas().then(() => {
setIsLoading(false);
});
}, [dispatch, loadTablas]);
if (error) {
return <View style={styles.centered} >
<Text>Ah Ocurrido un Error {error}</Text>
<Button title='Probar de Nuevo' onPress={loadTablas} color={Colors.secondary} />
</View>
}
if (isLoading) {
return <View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.secondary} />
</View>
}
//Checkeo de Partidos no Vacio.
if (!isLoading && tabla1 === 0 || tabla2 === 0) {
return <View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.secondary} />
</View>
}
return(
<>
<Text style={styles.grupo}>Grupo A</Text>
<FlatList
onRefresh={loadTablas}
refreshing={isRefreshing}
data={tabla1}
keyExtractor={item => item.teamId.toString()}
renderItem={
itemData => <Tabla
image={itemData.item.logo}
name={itemData.item.teamName}
games={itemData.item.matchsPlayed}
win={itemData.item.win}
draw={itemData.item.draw}
loose={itemData.item.lose}
infavor={itemData.item.goalsFor}
against={itemData.item.goalsAgainst}
points={itemData.item.points}
/>
}
/>
<Text style={styles.grupo}>Grupo B</Text>
<FlatList
onRefresh={loadTablas}
refreshing={isRefreshing}
data={tabla2}
keyExtractor={item => item.teamId.toString()}
renderItem={
itemData => <Tabla
image={itemData.item.logo}
name={itemData.item.teamName}
games={itemData.item.matchsPlayed}
win={itemData.item.win}
draw={itemData.item.draw}
loose={itemData.item.lose}
infavor={itemData.item.goalsFor}
against={itemData.item.goalsAgainst}
points={itemData.item.points}
/>
}
/>
</>
);
};
export const screenOptions = navData => {
return {
headerTitle: 'Tabla de Clasificacion',
// headerLeft: () => (<HeaderButtons HeaderButtonComponent={HeaderButton}>
// <Item
// title='Menu'
// iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
// onPress={() => {
// navData.navigation.toggleDrawer();
// }} />
// </HeaderButtons>),
// headerRight: () => (<HeaderButtons HeaderButtonComponent={HeaderButton}>
// <Item
// title='Carretilla'
// iconName={Platform.OS === 'android' ? 'md-cart' : 'ios-cart'}
// onPress={() => {
// navData.navigation.navigate('Cart');
// }} />
// </HeaderButtons>)
}
};
const styles = StyleSheet.create({
centered: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
grupo: {
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 16,
color: Colors.primary,
marginTop: 10,
}
});
export default TablaScreen;
I will also like to render the lines of the Flatlist one beneath the other with just a minimum gap currently it looks like this:
And will also like to add to the top something like this:
Which is basically a Header with the same style, and it will have the titles:
Equipo (which will be the length of the Image and Name), Juegos, Ganados, Empates, Perdidos, Afavor, Encontra, Puntos.
This Last part is just a wish to know.
Any Ideas?

Answer 1

Give your Image resizeMode of "contain" or "cover"
<Image
resizeMode="contain"
style={{ flex: 1 }}
source={{ uri: 'https://ezgif.com/images/insert-image.png' }}
/>
Working Example: Expo Snack
Sample Output:
Sample App Source Code:
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';
export default TablaItem = (props) => {
return (
<View style={{ flex: 1, backgroundColor: '#212121' }}>
<View style={styles.card}>
<View>
<View style={styles.imageCircle}>
<Image
resizeMode="cover"
style={{ flex: 1 }}
source={{ uri: 'https://ezgif.com/images/insert-image.png' }}
/>
</View>
</View>
<View style={{ marginLeft: 10, flex: 2 }}>
<Text style={styles.text}>{'Alianza Alianza'}</Text>
</View>
<View
style={{
flexDirection: 'row',
flex: 7,
justifyContent: 'space-evenly',
}}>
<View>
<Text style={styles.text}>{10}</Text>
</View>
<View>
<Text style={styles.text}>{6}</Text>
</View>
<View>
<Text style={styles.text}>{4}</Text>
</View>
<View>
<Text style={styles.text}>{0}</Text>
</View>
<View>
<Text style={styles.text}>{15}</Text>
</View>
<View>
<Text style={styles.text}>{9}</Text>
</View>
<View>
<Text style={styles.text}>{20}</Text>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
imageCircle: {
width: 50,
height: 50,
backgroundColor: 'white',
borderRadius: 25,
padding: 8,
borderWidth: 2,
borderColor: 'rgba(21,21,21,0.2)',
justifyContent: 'center',
alignContent: 'center',
},
card: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'white',
borderRadius: 10,
margin: 10,
paddingHorizontal: 5,
padding: 2,
marginTop: 30,
},
text: {
fontSize: 14,
fontWeight: '600',
},
});