Place a view relative to other view in React Native - react-native

Question

I try to create something like this:
As you see, the text should be placed relative to the marker representing the current day (centered above). When you're at the first few and the last few days, it should stay inside the frame rather than being centered above the tall marker.
How do I achieve this?
This is my current code:
Component
export default class DateLine extends Component {
render() {
const dots = (<View style={Styles.dotsContainer} >
{[...Array(DaysInCurrentMonth())].map((x, i) =>
<View key={i.toString()} style={[Styles.dot, (CurrentDayInMonth() === (i + 1) ? Styles.tallDot : null), (CurrentDayInMonth() < (i + 1) ? Styles.grayDot : null)]} />
)}
</View>);
return (
<View style={Styles.container}>
<Text style={Styles.text}>{GetDateWithMonthAsText(Date()).toUpperCase()}</Text>
{dots}
</View>
);
}
}
Style:
export default StyleSheet.create({
container: {
alignSelf: 'stretch',
marginHorizontal: 15
},
dotsContainer: {
height: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end'
},
dot: {
backgroundColor: Colors.darkBlueGrey,
height: 5,
width: 5,
borderRadius: 2.5
},
tallDot: {
height: 10
},
grayDot: {
backgroundColor: Colors.pinkishGreyTwo
},
text: {
fontWeight: '600'
}
});

Answer 1

Not a perfect but fast solution that you can easily improve:
export default class DateLine extends Component {
_renderDay (x, i) {
let currentDay = CurrentDayInMonth();
if(currentDay > (i + 1)) {
return <PassedDay />;
}
if(currentDay === (i + 1)) {
return <ActiveDate dateTitle={ GetDateWithMonthAsText(Date()).toUpperCase() } />;
}
return <InactiveDay />;
}
render() {
return (
<View style={ Styles.container }>
<View style={ Styles.dotsContainer } >
{[...Array(DaysInCurrentMonth())].map(this._renderDay)}
</View>
</View>
);
}
}
export function PassedDay() {
return (<View>
<View style={{backgroundColor: '#1f1749', width: 5, height: 5, borderRadius: 5, marginHorizontal: 2.5,}} />
</View>);
}
export function ActiveDate(dateTitle) {
return (<View style={{position: 'relative'}}>
<View style={{position: 'absolute', minWidth: 70, bottom: 15, left: 0, right: 0,}}>
<Text>
{dateTitle}
</Text>
</View>
<View style={{backgroundColor: '#1f1749', width: 5, height: 10, borderRadius: 5, marginHorizontal: 2.5,}} />
</View>);
}
export function InactiveDay() {
return (<View>
<View style={{backgroundColor: 'gray', width: 5, height: 5, borderRadius: 5, marginHorizontal: 2.5,}} />
</View>);
}
The point is: you can manipulate your 'DOM' via react-native's positions in same manner as html.
Hope, it will help.