With Date Range, lighter color not applied on days between the range

[mashaalmemon]

trafficstars

We're using react-native-paper in our project and have a custom theme.

We're finding that:

• When we use our custom primary color in the theme, when selecting date ranges the lighter color does not show up between the date range - only the start/end date have a circle with the primary color selected, and everything in between is the same color as the rest of the calendar.
• When we comment out our primary color in the theme, the date picker works exactly as it should, using the default purple primary color for the dates selected, and having the lighter purple for the dates in between start/end dates selected.

Is there another color we have to specify in the react-native-paper theme to get this working right?

[colinmatthewlee]

I've been experiencing this issue too, specifically when I set the primary color in theme to "#5F53FC", a lighter color connecting the two dates does not show up for me.

[mashaalmemon]

@chakrihacker @RichardLindhout @nandorojo Any guidance you can give us on this would be fantastic.

[chakrihacker]

Can you share a code snippet that I can try locally

[iM-GeeKy]

I only tested this on the iPhone simulator, it should at least demonstrate the issue at hand. (https://snack.expo.dev/2IrVHMYvU)

[mashaalmemon]

@iM-GeeKy thanks for taking the time to setup the snack example and demonstrate the issue we're facing here. Much appreciated.

@chakrihacker, if you look at @iM-GeeKy 's example project, when selecting a range there is no light-blue highlight between the date ranges; you'll notice he specified a primary color in the react-native-paper theme. But as soon as you delete that custom primary color, the light purple highlight works!

[chakrihacker]

@mashaalmemon and @iM-GeeKy test my branch and verify if it's working or not?

[iM-GeeKy]

@chakrihacker I tried your branch and it didn't seem to resolve the issue. As a sanity check, are you (@mashaalmemon) seeing the same behavior?

[RichardLindhout]

I already merged it but haven't tested it yet, if somebody has a fix I'll merge it into main

[chakrihacker]

@iM-GeeKy thanks for taking the time to setup the snack example and demonstrate the issue we're facing here. Much appreciated.

@chakrihacker, if you look at @iM-GeeKy 's example project, when selecting a range there is no light-blue highlight between the date ranges; you'll notice he specified a primary color in the react-native-paper theme. But as soon as you delete that custom primary color, the light purple highlight works!

How did you test my branch?

[iM-GeeKy]

In one of my private repositories I pointed to your branch in my package.json, deleted node_modules, and did a fresh install. I will add that I think the fix did help to a degree, but for lighter colors (ie. #2979FF, #5F53FC) the highlight is so faint it appears almost white. Thanks for the quick response times! Perhaps the ratio in your changes needs to be tweaked to accommodate for lighter hues.

[chakrihacker]

I think we can introduce a prop for the user to set the ratio of color lightness, right now it's 90% lightness of the primary color, so It depends on the primary color. Having hardcoded values might not be the best way. What are your thoughts @RichardLindhout ?

[RichardLindhout]

checking if it's light or dark I think there is something in the color for that or in the react-native-paper codebase already

[RichardLindhout]

I don't know if anything is written on it in the Material Design Spec

[crussell122]

I just submitted a pr for the new rangeOpacity prop that I added in my branch. Please let me know if it works for you all.

[RichardLindhout]

I think we should check the darkness of the primary color to use different opacties if color is dark

[RichardLindhout]

But not let the user set it since it'll be extra work for the library user

[chakrihacker]

Let me give a try tweaking different colors

[chakrihacker]

What do you think of this approach of tint color @RichardLindhout ?

https://codesandbox.io/s/friendly-brattain-s1n7z?file=/src/App.js

[RichardLindhout]

I think it's good but it has to take in account the following things Dark theme RNN Primary color etc

[iM-GeeKy]

I think it's good but it has to take in account the following things Dark theme RNN Primary color etc

Is that not what @chakrihacker is mocking with his demo above? Where "Tinted Color" would correspond to dark theme color and so on...

[SharfMohiuddin]

Any solution? I'm facing the same issue. Selected range color is dark as it should be light and selected dates behind the selected range is hiding.

 const customDarkTheme = {
    ...DarkTheme,
    roundness: 2,
    colors: {
      ...DarkTheme.colors,
      primary: Colors.PRIMARY_GREEN,
      background: Colors.background,
      accent: "#ff1744",
      text: Colors.WHITE,
      surface: Colors.card_bg,
    },
    fonts: {
      regular: {
        fontFamily: typography.font_monsterrat_regular,
      },
    },
  };

  <PaperProvider theme={customDarkTheme}>
        <>
          <DatePickerModal
            saveLabel={
              <Text style={{ color: Colors.PRIMARY_GREEN, fontWeight: "bold" }}>
                Done
              </Text>
            }
            locale="en"
            mode="range"
            visible={open}
            onDismiss={onDismiss}
            startDate={range.startDate}
            endDate={range.endDate ? range.endDate : range.startDate} // Set the end date to the start date by default
            onConfirm={handleDateRangeSelect}
            validRange={{
              startDate: new Date(2021, 1, 2), // optional
              endDate: new Date(), // optional
            }}
            editIcon={false}
            label="Select Date"
            animationType="fade"
            startLabel=""
            endLabel=""
          />
        </>
      </PaperProvider>

[iM-GeeKy]

@SharfMohiuddin PR's are welcome! As a temporary fix you can always create a patch using patch-package.