View borderRadius style not applied on Android when view is inside a FlatList

Question

I have a component that I used for selecting dates in a calendar. If a date is selected, the number should have circle as a background. I have wrapped the <Text> in a <View> with a borderRadius styling and the component itself works.

But when I render my component in a <FlatList>, the borderRadius is simply not applied on Android.

Check out the screenshots for iOS and Android.

I've tried a lot of adjustments but with no luck, and now reach out. An Expo example of my component code is here, the component itself is DaySelectorItem.js, and the list is in DaySelectorItem.js

Code here https://snack.expo.io/@esbenvb/android-square-circles

Thank you in advance :)

Answer 1

i usually group the border props together, so i got it working on both platforms by moving the borderRadius value from dayWrapper to SelectedDayWrapper. hope this helps!

  selectedDayWrapper: {
    backgroundColor: 'red',
    borderColor: 'pink',
    borderWidth: 2,
    borderRadius: CIRCLE_1_SIZE,
  },
  dayWrapper: {
    width: CIRCLE_1_SIZE,
    height: CIRCLE_1_SIZE,
    // borderRadius: CIRCLE_1_SIZE,
    alignItems: 'center',
    justifyContent: 'flex-start',
  },