Make react-native-paper DataTable full width - react-native

Question

I am using the react-native-paper DataTable to create a calendar in react-native. However, i can't seem to get the table to take up 100% width, as pictured:
I have a basic setup like this:
<DataTable>
<DataTable.Row>
{weeks.map((day, index) => (
<DataTable.Cell >
<Text
key={`week-day-${index}`}
>
{dayjs(day).format("dd")}
</Text>
</DataTable.Cell>
))}
</DataTable.Row>
{weeks.map((week, weekIndex) => (
<DataTable.Row
key={`week-${weekIndex}`}
>
{week.map((day, dayIndex) => (
<DataTable.Cell
key={`day-${dayIndex}`}
>
<Text>{day.getDate()}</Text>
</DataTable.Cell>
))}
</DataTable.Row>
))}
</DataTable>
How can i make the cells take up all the available space in that row?

Answer 1

I'm not sure why your DataTable isnt taking up the entire width of the screen. The only reason I can imagine it not doing so is if its width is being limited by it parent components. I started working out some stuff for a calendar here:
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';
import { Text, DataTable,} from 'react-native-paper';
import dayjs from 'dayjs';
import TableHeader from './components/TableHeader';
import TableTitle from './components/TableTitle';
import SettingsModal from './components/SettingsModal';
import {
wrapArray,
getCalendarMonth,
WEEK_DAYS,
} from './helpers/utils';
const currentDay = dayjs();
const pickerItems = WEEK_DAYS.map((day, i) => {
return {
label: day,
value: i,
};
});
export default function App() {
// allow user to decide start of week
const [weekStart, setWeekStart] = useState(0);
const [month, setMonth] = useState(currentDay.get('month'));
const [year, setYear] = useState(currentDay.get('year'));
// when a month doesnt start at the weekStart it is necessary
// add days or blanks to put the arrays align days with the
// proper week day
const [hideExtraDays, setHideExtraDays] = useState(true);
const [days, setDays] = useState(
getCalendarMonth(month, year, weekStart, hideExtraDays)
);
const { weekDays, pickerList } = useMemo(() => {
return {
weekDays: wrapArray(WEEK_DAYS, weekStart),
pickerList: wrapArray(pickerItems, weekStart),
};
}, [weekStart]);
// incrementing/decrementing month is the same code
// accessing different dayjs functions
const incrementMonth = useCallback(
(isDecrementing) => {
const date = dayjs(`${year}-${month + 1}-01`);
const functionKey = isDecrementing ? 'subtract' : 'add';
const newDate = date[functionKey](1, 'month');
setMonth(newDate.get('month'));
setYear(newDate.get('year'));
},
[month, year]
);
// update days when these values change
useEffect(() => {
setDays(getCalendarMonth(month, year, weekStart, hideExtraDays));
}, [weekStart, month, year, hideExtraDays]);
return (
<SafeAreaView style={styles.container}>
{/*modal for calendar settings */}
<SettingsModal
{...{
pickerList,
weekStart,
setWeekStart,
hideExtraDays,
setHideExtraDays,
}}
/>
<View style={styles.calendarContainer}>
<DataTable style={{ flex: 1 }}>
<TableTitle
month={month}
year={year}
onLeftPress={() => incrementMonth(true)}
onRightPress={() => incrementMonth()}
// the month and year is a pressable that when press reveal
// dropdown flatlist picker on android this picker is unscrollable
onDateChange={(date) => {
setMonth(date.month);
setYear(date.year);
}}
/>
{/* days of the week */}
<TableHeader weekDays={weekDays} />
{days.map((week, weekIndex) => (
<DataTable.Row key={`week-${weekIndex}`}>
{week.map((day, dayIndex) => (
<DataTable.Cell key={`day-${dayIndex}`}>
{/* hideExtra days add null values when true */}
<Text>{day ? day.get('date') : null}</Text>
</DataTable.Cell>
))}
</DataTable.Row>
))}
</DataTable>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
calendarContainer: {
flex: 1,
},
});