I want to change the Color of The Text of The DataTable Title[Name,Email,Phone] & and The DataTable Row[Hassane1,[email protected],0688888888], I use color: 'red' but it's not Working I need Some Help

This the Code:

import React, { useState } from 'react';
import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal } from 'react-native';
import { DataTable } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';


const List = ({navigation}) => {



  const data = [
    {id:1,name:"Hassane1",phone:"068888188888",email:"[email protected]"},
    {id:2,name:"Hassane2",phone:"068888888288",email:"[email protected]"},
    {id:3,name:"Hassane3",phone:"068888388888",email:"[email protected]"},
    {id:4,name:"Hassane4",phone:"068888388888",email:"[email protected]"},
    {id:5,name:"Hassane5",phone:"068888388888",email:"[email protected]"},
    {id:6,name:"Hassane6",phone:"068888388888",email:"[email protected]"},
    {id:7,name:"Hassane7",phone:"068888388888",email:"[email protected]"},
  ]


  const renderList = data.map((item)=>{

    return(

      <DataTable.Row style={styles.tableRow} key={item.id}>
            <DataTable.Cell onPress={() => navigation.navigate("Edit",{item})} >{item.name}</DataTable.Cell>
            <DataTable.Cell style={{color: COLORS.red}}>{item.email}</DataTable.Cell>
            <DataTable.Cell>{item.phone}</DataTable.Cell>
        </DataTable.Row>
    )
  })
return (
  <SafeAreaView style={{ flex: 1}}>
  <ScrollView
    contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
    <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold', fontFamily: 'Roboto',textAlign: 'center'}}>
      List of Companies
    </Text>
    <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10, fontFamily: 'Roboto', textAlign: 'center'}}>
      Check Our Companies Details
    </Text>
  <DataTable style={styles.container}   >
  <DataTable.Header style={styles.tableHeader}  >
    <DataTable.Title style={{color: COLORS.red}}>Name</DataTable.Title>
    <DataTable.Title>Email</DataTable.Title>
    <DataTable.Title>Phone</DataTable.Title>
  </DataTable.Header>
  </DataTable>
    {renderList}
  </ScrollView>
  </SafeAreaView>


);
};

export default List;

const styles = StyleSheet.create({
container: {
    padding: 10,
  color: 'red',
},
tableHeader: {
  color: 'red',
},
tableRow: {
  color: 'red',
},

});

This is The Result: enter image description here

CodePudding user response：

This should do the trick :)

<DataTable.Title textStyle={{color: COLORS.red}}>Name</DataTable.Title>