So I am using the React Native ScrollableCalendarStrip to showcase the current week.

I am trying to style it so it has a square with smooth edges around only the number and not the name of the day. For some reason the borderRadius is only being applied to the border and not the background color.

Node version – v22.1.0
MacOS – Sonoma 14.4
Running an IOS simulator via XCode (I tried running on web but the same styling issue was there)

Here is the code for my calendar:

      <View style={{flex: 1, width: '100%'}}>
        <ScrollableCalendarStrip
          startingDate={startDate}
          useIsoWeekday={false}
          selectedDate={currentDate}
          dateNameStyle={{textTransform: 'capitalize'}}
          dateNumberStyle={{fontWeight: 200, backgroundColor: '#ACB5BD', padding: 5, borderWidth: 0.5, borderColor: 'black', borderRadius: 10, width: 30}}
          highlightDateNameStyle={{textTransform: 'capitalize'}}
          highlightDateNumberStyle={{fontWeight: 200, backgroundColor: '#ACB5BD', padding: 5, borderWidth: 0.5, borderColor: 'black', borderRadius: 10, width: 30}}
        />
      </View>

Did some research and this calendar strip is a bit finnicky with styling issues but not sure why this happens. Also, when I originally tried styling this I applied this styling to the entire date (Name of day + date) and the border radius was fine. Any suggestions would be much appreciated, I really hope I formatted this correctly, thanks in advance 🙂