React-native-calendars: Compatibility with react-native-web

[peggyrayzis]

Hey there! 🙋 This calendar module looks awesome. We would like to use it in our react-native-web project but are running into an issue because of the .ios and .android file extensions for some of the assets. My suggestion is to provide a default for these assets so our Webpack build can resolve them.

The files that are giving us trouble are:

• src/calendar/img/previous.png
• src/calendar/img/next.png
• src/agenda/style.js

If you add these files, then we should be good to go! The only question now is whether we use iOS or Android styling as the default for the web - what do you all think?

cc @kkemple

[tautvilas]

Hi, thanks for reporting this. I set IOS files as defaults for v1.2.2. Android and iOS design differ just a tiny bit.

[peggyrayzis]

@tautvilas I think we need to reopen this issue. Just tried the new release and it's still failing at src/calendar/img/next.png and src/calendar/img/previous.png. AFAIK, Webpack can't resolve images dynamically @2x or @3x like React Native can - currently the default is set at [email protected] and [email protected].

Looks like someone opened up a similar issue w/ Webpack, but it was never resolved (https://github.com/webpack/webpack/issues/3516). I'm going to follow up with Webpack to see if we can get some more info.

[tautvilas]

I will try adding asset versions without @ maybe they will be interpreted the same way as @1x

[peggyrayzis]

Yeah, that's definitely a good solution for the short term. I think this may be a broader issue beyond this project - ideally, we would like our Webpack config to be able to resolve image paths to the appropriate scale just like in React Native. I know it's possible because Haul does it. It's probably going to take a custom resolver though.

Once we have this all figured out, would you like me to add a section to the README on how to integrate with react-native-web?

[tautvilas]

hey tried adding images without extension. Check if it works. If we manage to get it working with react-native-web you can prepare WEB-HOWTO.md file in pull request and I will merge it to readme or add a link to it in main readme.

[peggyrayzis]

Thanks for making that change! The build runs without errors and the calendar renders! 🎉 Only problem now is that the arrows don't show up because tintColor (how the arrow images are filled) is a React Native only property with no plans to be supported in RNW in the future (https://github.com/necolas/react-native-web/issues/362). 😭

Idk the best way to work around this. Changing the arrow to a SVG isn't an ideal solution because it introduces native dependencies into the project. Same with an icon library. The only thing I can think of to keep this pure JS is to have the header accept a prop for left & right arrow components that can override the default arrowImage for web users. What do you think?

[tautvilas]

I see that I can identify the web platform by Platform.OS === 'web'. This way I will be able to add style exception that tint would not be applied in case of web. Will update you when it's done

[peggyrayzis]

Awesome, thanks for being so accommodating! ❤️

[tautvilas]

Added tintColor ignore for web platform, check if that works out for you

[kkemple]

hey, sorry for the delayed response on our part! we've been pretty busy! so there are few issues discovered in getting a fully working implementation on web but I was able to get it working and I would like to re-open this issue if possible. I am making a PR right now that has the needed fixes as well.

The first issue faced was that Webpack 2 doesn't allow mixing of import and module.exports, as in if you use es6 imports you have to use es6 exports too. I made the adjustments to any files using module.exports and all runs well. Since react-native-packager supports es6 syntax fully there are no issues there either. :smile:

The other issue faced was around getting images to pull in for the prev next/arrows. Two issues appear here: 1) tintColor style doesn't exist on web which means it would always have to be the default blue arrow. 2) Webpack can't resolve images with ratio extensions on them @2x @3x, etc. I was able to solve this by allowing the <Calendar /> (and therefore the <CalendarHeader /> component) to take two new props, leftArrow and rightArrow. These props can take any component and render it in place of image. (I have a gif of this working on web with react-native-vector-icons. 😎 )

[tautvilas]

Hi! Thanks for PR it is really nice to see this component working on web too. I will look at your PR when I have time, does not look like there should be problems to merge it. Just since we are not using react-native-web it is possible that one day we will again introduce something non-compatible. Also what do you think of changing leftArrow rightArrow params to single param renderArrow that gets rendering function as param. Because we have similar convention for other components override e.g. renderKnob

function renderArrow(direction) {
   if (direction === 'left') { return (<LeftArrow />) } else return (<RightArrow />);
}

[kkemple]

yeah i love the method over two props, will update now!

[kkemple]

i updated the PR, however the import syntax change is breaking the build, i imagine its missing a babel plugin for that, i will investigate in a bit.

[kkemple]

Just since we are not using react-native-web it is possible that one day we will again introduce something non-compatible.

We understand that and would be monitoring and adding support as needed. We are looking to use this across a number of UIs so we have no problem investing some help. :smile:

[tautvilas]

Ok, merged the PR and closing this issue for now, plz create new issues if you notice something wrong with RN-web compatibility.

[kkemple]

Will do! Thanks so much!

[necolas]

FWIW, tintColor will be supported in [email protected]