My CSS skills are still in the early stages. I haven't delved too deeply into it.
I have a query regarding how to achieve full width for an element. I've included my code below, but the basic approach I tried using 'width: 100%' didn't yield the desired result.
In my React Native code, components are nested hierarchically. The higher-level code acts as the parent of the subsequent code blocks.
I want the elements in RideCard.js (each ride card) to expand fully alongside DateDay.js. Upon removing flexDirection: row from oneDayContainer in MonthBody.js, I noticed that the elements expanded as intended.
However, I wish to maintain the existing design.
Thank you in advance.
MonthBody > DateDay + RideList >
MonthBody.js
import { StyleSheet } from "react-native";
import { View } from "react-native";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { DateDay } from "./DateDay";
import { RideList } from "./RideList";
export const MonthBody = ({ monthYear }) => {
const { rides } =
useFirestoreContext();
return (
<View style={styles.monthBodyContainer}>
{Object.keys(rides[monthYear]).map((dateDay, j) => {
return (
<View style={styles.oneDayContainer}>
<DateDay dateDay={dateDay} />
<RideList monthYear={monthYear} dateDay={dateDay} />
</View>
);
})}
</View>
);
}
const styles = StyleSheet.create({
monthBodyContainer: {
display: "flex",
flexDirection: "column",
},
oneDayContainer: {
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
},
});
DateDay.js
import { StyleSheet, Text, View } from "react-native";
export const DateDay = ({dateDay}) => {
return (
<View style={styles.dateDayContainer}>
<Text style={styles.dayText}>{dateDay.split("-")[1]}</Text>
<Text style={styles.dateText}>{dateDay.split("-")[0]}</Text>
</View>
);
};
const styles = StyleSheet.create({
dateDayContainer: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: 50,
marginRight: 20,
marginTop: 10,
},
dateText: {
fontSize: 16,
textAlign: "center",
},
dayText: {
fontSize: 12,
textAlign: "center",
},
});
RideList.js
import { StyleSheet, Text, View } from "react-native";
import { COLOR } from "../../assets/variables";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { RideCard } from "./RideCard";
export const RideList = ({ monthYear, dateDay }) => {
const { rides } = useFirestoreContext();
return (
<View style={styles.rideList}>
{rides[monthYear][dateDay].map((ride, k) => {
// return <RideCard key={k} ride={ride} />;
return <RideCard key={k} ride={ride} />;
})}
</View>
);
};
const styles = StyleSheet.create({
rideList: {
marginBottom: 5,
},
});
RideCard.js
import { StyleSheet, Text, View } from "react-native";
import { COLOR } from "../../assets/variables";
export const RideCard = ({ ride }) => {
console.log("RideCard", ride);
return (
<View
style={[
styles.container,
ride.boardType === "NEED"
? { backgroundColor: COLOR.lightGreen, borderWidth: .3, borderColor: COLOR.green }
: { backgroundColor: COLOR.lightBlue, borderWidth: .3, borderColor: COLOR.blue },
]}
>
<View style={styles.places}>
<Text style={styles.placeText}>{ride.cityFrom}</Text>
<Text> - </Text>
<Text style={styles.placeText}>{ride.cityTo}</Text>
</View>
<View>
<Text style={styles.dateText}>
{ride.leavingHour}:{ride.leavingMinutes}
</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
padding: 10,
marginBottom: 5,
borderRadius: 10,
},
places: {
display: "flex",
flexDirection: "row",
alignItems: "center",
marginBottom: 5,
},
});