React-native-calendars (wix) agenda view alignment broken

Question

Recently, I started using a calendar control from the following repo: https://github.com/wix/react-native-calendars Originally the calendar control aligned all items correctly, however something seems to have broken the alignment completely.

Above in this image you can see the order reverse from ascending to descending. Digging a bit deeper with the element inspector:

I have done a process of elimination (I thought this may be due to recent upgrade from React-Navigation 2x to 3x, due to the overlaying container having to be explicitly created) No luck.

I created the simplest issue repro I could and rolled back to React-Navigation 2x. This unfortunately did not resolve the issue.

Some source attached below:

App.js:

import React from 'react';
import AppNavigator from './navigation/AppNavigator';
export default class App extends React.Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}

AppNavigator:

//#region imports
import { 
    createSwitchNavigator,
    createStackNavigator
} from 'react-navigation';

import { 
    HomeScreen, 
    SettingsScreen,
    AuthLoadingScreen, 
    SignInScreen
} from '../screens';
//#endregion
const appStack = createStackNavigator({
    Home: HomeScreen,
    Other: SettingsScreen
});
const authStack = createStackNavigator({
    SignIn: SignInScreen
});

export default createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    App: appStack,
    Auth: authStack
}, { initialRouteName: 'AuthLoading'});

HomeScreen:

import React, {Component} from 'react';
import {StyleSheet, View, Text, AsyncStorage, Button} from 'react-native';
import Agenda from '../components/Agenda';

export default class HomeScreen extends Component{
    logout = async () => {
      const userToken = await AsyncStorage.removeItem('userToken');

      // This will switch to the App screen or Auth screen and this loading
      // screen will be unmounted and thrown away.
      this.props.navigation.navigate('Auth');
    }
    render(){
      return <Agenda/>;
    }
}

Agenda:

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet
} from 'react-native';
import {Agenda} from 'react-native-calendars';

export default class AgendaScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {}
    };
  }

  render() {
    return (
      <Agenda
        items={this.state.items}
        loadItemsForMonth={this.loadItems.bind(this)}
        selected={'2017-05-16'}
        renderItem={this.renderItem.bind(this)}
        renderEmptyDate={this.renderEmptyDate.bind(this)}
        rowHasChanged={this.rowHasChanged.bind(this)}
        // markingType={'period'}
        // markedDates={{
        //    '2017-05-08': {textColor: '#666'},
        //    '2017-05-09': {textColor: '#666'},
        //    '2017-05-14': {startingDay: true, endingDay: true, color: 'blue'},
        //    '2017-05-21': {startingDay: true, color: 'blue'},
        //    '2017-05-22': {endingDay: true, color: 'gray'},
        //    '2017-05-24': {startingDay: true, color: 'gray'},
        //    '2017-05-25': {color: 'gray'},
        //    '2017-05-26': {endingDay: true, color: 'gray'}}}
         // monthFormat={'yyyy'}
         // theme={{calendarBackground: 'red', agendaKnobColor: 'green'}}
        //renderDay={(day, item) => (<Text>{day ? day.day: 'item'}</Text>)}
      />
    );
  }

  loadItems(day) {
    setTimeout(() => {
      for (let i = -15; i < 85; i++) {
        const time = day.timestamp + i * 24 * 60 * 60 * 1000;
        const strTime = this.timeToString(time);
        if (!this.state.items[strTime]) {
          this.state.items[strTime] = [];
          const numItems = Math.floor(Math.random() * 5);
          for (let j = 0; j < numItems; j++) {
            this.state.items[strTime].push({
              name: 'Item for ' + strTime,
              height: Math.max(50, Math.floor(Math.random() * 150))
            });
          }
        }
      }
      //console.log(this.state.items);
      const newItems = {};
      Object.keys(this.state.items).forEach(key => {newItems[key] = this.state.items[key];});
      this.setState({
        items: newItems
      });
    }, 1000);
    // console.log(`Load Items for ${day.year}-${day.month}`);
  }

  renderItem(item) {
    return (
      <View style={[styles.item, {height: item.height}]}><Text>{item.name}</Text></View>
    );
  }

  renderEmptyDate() {
    return (
      <View style={styles.emptyDate}><Text>This is empty date!</Text></View>
    );
  }

  rowHasChanged(r1, r2) {
    return r1.name !== r2.name;
  }

  timeToString(time) {
    const date = new Date(time);
    return date.toISOString().split('T')[0];
  }
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17
  },
  emptyDate: {
    height: 15,
    flex:1,
    paddingTop: 30
  }
});

Apologies about code quality, all this comes from samples. Agenda sample source: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.js

Router source: https://reactnavigation.org/docs/en/2.x/auth-flow.html

Any help whatsoever is appreciated.

Answer 1

Whilst answering your own question is social sacrilege on par with high-fiving yourself in public, if anyone else has this issue, don't fret and stress all your life energy away.

I did quite a bit to try and diagnose the issue, from creating blank scaffolding to see if the issue persists (it did).

I decided as a last resort to test on colleague's phone (surprise surprise, it renders correctly).

Deleting expo app, reinstalling and starting with command expo start --clear, and sanity is restored.