Styling problems How do I style this? - react-native

Question

I have this as a worry
this is what the app home page looks like
some things are not aligned the way i want it to be, and its not nice. I am trying to get the date beneath the narration with a much smaller text and move the avatar somewhat beneath the recent transactions.
How do i align it properly
My source code is looking thus
import React, {useEffect, useState} from 'react';
import {
ActivityIndicator,
Button,
Image,
ImageBackground,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {Header, Avatar, Icon, Card} from '#rneui/themed';
import {FlatList, ScrollView} from 'react-native-gesture-handler';
import {useNavigation} from '#react-navigation/native';
import {Tab} from '#rneui/base';
import AsyncStorage from '#react-native-async-storage/async-storage';
import TextAvatar from 'react-native-text-avatar';
const HomePage = () => {
const [transaction_details, setTransaction_details] = useState([]);
const [isLoading, setLoading] = useState(true);
const navigation = useNavigation();
const Item = ({title}) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
left: 21,
width: 350,
backgroundColor: '#D3D3D3',
}}
/>
);
};
showdata = async () => {
let token = await AsyncStorage.getItem('token');
alert(token);
};
getTransactionsList = async () => {
let token = await AsyncStorage.getItem('token');
let email = await AsyncStorage.getItem('email');
fetch(
'https://webserver-migospay.onrender.com/api/user-data/get-transactionby-email/' +
email,
{
method: 'GET',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${token}`,
},
},
)
.then(response => response.json())
.then(responseJson => {
setTransaction_details(responseJson);
setLoading(false);
});
};
useEffect(() => {
//showdata();
getTransactionsList();
});
/*useEffect(() => {
fetch('https://brotherlike-navies.000webhostapp.com/people/people.php', {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-type': 'application/json',
},
})
.then(response => response.json())
.then(responseJson => {
setTransaction_details(responseJson);
setLoading(false);
});
}, []);
*/
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'transparent',
justifyContent: 'space-around',
}}
leftComponent={
<Avatar
small
rounded
source={{
uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiRne6FGeaSVKarmINpum5kCuJ-pwRiA9ZT6D4_TTnUVACpNbzwJKBMNdiicFDChdFuYA&usqp=CAU',
}}
onPress={() => console.log('Left Clicked!')}
activeOpacity={0.7}
/>
}
rightComponent={
<Icon
name={'mail-outline'}
color={'#00BB23'}
size={32}
onPress={() => navigation.navigate('Accounts')}
/>
}></Header>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top: 15,
paddingTop: 95,
alignSelf: 'center',
width: 328,
height: 145,
borderadius: 9,
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View>
<Text
style={{
fontFamily: 'Poppins-Bold',
flexDirection: 'row',
paddingTop: 35,
fontSize: 15,
left: 30,
color: 'gray',
}}>
Recent Transactions
</Text>
</View>
<View style={{flex: 1, marginTop: 35}}>
{isLoading ? (
<ActivityIndicator />
) : (
<FlatList
data={transaction_details}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={({item}) => {
return (
<View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<TextAvatar
backgroundColor={'#00BB23'}
textColor={'#f2f2f2'}
size={60}
type={'circle'}
// optional
>
{item.narration}
</TextAvatar>
<Text style={styles.narration}>{item.narration}</Text>
<Text style={styles.amountText}>{item.amount}</Text>
</View>
<Text style={styles.date_transaction}>{item.created_at}</Text>
</View>
);
}}
keyExtractor={item => item._id.toString()}
/>
)}
</View>
</View>
);
};
export default HomePage;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
padding: 20,
},
text: {
top: -85,
fontSize: 30,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
mainContainer: {
paddingTop: 90,
justifyContent: 'center',
alignItems: 'center',
},
accText: {
top: -85,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
color: 'white',
textAlign: 'center',
},
PayeeName: {
justifyContent: 'flex-start',
flexWrap: 'wrap',
fontFamily: 'Poppins-Medium',
size: 800,
fontWeight: 'bold',
},
amountValue: {
textAlign: 'right',
fontFamily: 'Poppins-Medium',
size: 800,
fontWeight: 'bold',
},
narration: {
fontFamily: 'Poppins-ExtraBold',
size: 700,
left: -65,
},
date_transaction: {
fontFamily: 'Poppins-Regular',
size: 10,
left: 21,
},
amountText: {
fontFamily: 'Poppins-ExtraBold',
size: 1000,
right: 32,
},
});
Please I need help as I am not very good at styling here. Just need more guidiance in this case.

Answer 1

You need to wrap the item.narration and the item.created_at inside a <View> and have them aligned vertically. Basically wrap them on a View and swap item.amonut for item.created_at and style the <View> with a flex: 1. Then change the font size for the date.
<FlatList
data={transaction_details}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={({item}) => {
return (
<View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<TextAvatar
backgroundColor={'#00BB23'}
textColor={'#f2f2f2'}
size={60}
type={'circle'}
// optional
>
{item.narration}
</TextAvatar>
<View style={{ flex: 1 }}> // Add styling as needed
<Text style={styles.narration}>{item.narration} </Text>
<Text style={styles.date_transaction}> {item.created_at}</Text> // Change the font size as you like
</View>
<Text style={styles.amountText}>{item.amount}</Text>
</View>
<Text style={styles.amountText}>{item.amount}</Text>
</View>
);
}}
keyExtractor={item => item._id.toString()}
/>