Styling problems How do I style this?

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()}
      />