title: React native calendars agenda not showing items with same date
body: <p>I'm currently using <a href="https://github.com/wix/react-native-calendars" rel="nofollow noreferrer">React Native Calendars</a> library to build an agenda-like app on <a href="https://reactnative.dev/docs/getting-started" rel="nofollow noreferrer">React Native</a>, to get the data I need, I use <a href="https://rnfirebase.io/firestore/usage#querying" rel="nofollow noreferrer">Firebase Firestore</a> library.</p>
  <p>This library's agenda uses a few properties in order to show appointment cards:</p>
  <p>My agenda settings</p>
  <pre class="lang-js prettyprint-override"><code>          &lt;Agenda
              items={agenda.items}
              // Initially selected day
              selected={date}
              // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
              minDate={today}
              // Specify how each item should be rendered in agenda
              renderItem={(item, firstItemInDay) =&gt; {
                  return &lt;View&gt;
                      &lt;PlanningCard
                      style={styles.appointmentCard}
                      hour={String(moment.unix(item.date).format(&quot;H[h]mm&quot;))}
                      &gt;&lt;/PlanningCard&gt;
                  &lt;/View&gt;;
              }}
              /&gt;
  </code></pre>
  <p>This is the data I get from my function -&gt; <a href="https://i.stack.imgur.com/1GxSS.png" rel="nofollow noreferrer">props</a></p>
  <p>This is the function I call, it's a huge mess since I'm trying to figure out a way of getting every single info I need to show on both the calendar and agenda.</p>
  <pre class="lang-js prettyprint-override"><code>export const retrievePlanning = async (uid:string) =&gt; {
      let getAppointments:any;
      let appointments:any = {};
      let markedDates:any = {};
      let agendaItems:any = {};
      let user:any;
      let docDate:string;
      
      let today:string = String(moment().format(&quot;YYYY-MM-DD&quot;));
  
      try{
  
          getAppointments = await firestore()
                                  .collection('appointments')
                                  .where('marchand_id', '==', uid)
                                  .get(); // Recup
          
          getAppointments.forEach(async(doc:any) =&gt; { // Loop on appointments
  
              appointments[doc.id] = doc.data(); // Storing appointments
              docDate = moment.unix(doc.data().date).format(&quot;YYYY-MM-DD&quot;); // Unix timestamp to agenda's date format
              markedDates[docDate] = {marked: true, dotColor: 'deepskyblue'} // Storing appointment dates (for calendar markers)
  
              try {
                  user = await firestore()
                              .collection('users')
                              .doc(String(doc.data().customer_id))
                              .get(); // User who the appointment belongs to
                  
                  console.log(&quot;test, does this work??&quot;)
  
                  // HERE IS THE ISSUE !!!
                              
                  agendaItems[docDate] = [doc.data(), user.data()] // Storing appointment dates (to show them as agenda items)
  
                  
              } catch (error:any) {
                  console.log(error);
                  Alert.alert(&quot;Error&quot;, String(error.message));
              }
  
          });
  
          //console.log(agendaItems)
          //console.log(calendarDates)
          //console.log(planning);
  
          return {planning: appointments, dates: markedDates, items: agendaItems}
  
      } catch (error:any) {
          console.log(error);
          Alert.alert(&quot;Error&quot;, String(error.message));
      }
      
  }
  </code></pre>
  <p>The issue occurs inside the appointments loop, where I want to get multiple appointments that have the same date but different hours.</p>
  <p>I need to create an object that stores 3 types of information:</p>
  <ul>
  <li>formatted appointment dates (for calendar markers)</li>
  <li>full data from every single appointment (to pass as props to the next screen)</li>
  <li>formatted appointment dates + appointments data + user data (to show the agenda cards)</li>
  </ul>
  <p>The problem is that I can't append multiple same index values (the index are the dates), for example, let's say I have 2 appointments the same day, it should look like this:</p>
  <pre class="lang-json prettyprint-override"><code>{ 
    &quot;2022-01-24&quot;: [{appointment 1 data}],
    &quot;2022-01-24&quot;: [{appointment 2 data}],
    &quot;2022-01-28&quot;: [{some other appointment data}],
  }
  </code></pre>
  <p>But instead it looks like this:</p>
  <pre class="lang-json prettyprint-override"><code>{ 
    &quot;2022-01-24&quot;: [{appointment 2 data}],
    &quot;2022-01-28&quot;: [{some other appointment data}],
  }
  </code></pre>
  <p>Which means that I can only show 1 appointment per day.
  Is there any way to make that example above possible?
  Or is there anything I can do, a workaround for this maybe?</p>
  <p>PS: I'm not a native English speaker so don't kill me because of my grammar please. And also I'm junior so this code is a HUGE mess.</p>