Comments (18)
FWIW, tintColor
will be supported in [email protected]
from react-native-calendars.
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 />);
}
from react-native-calendars.
Hi, thanks for reporting this. I set IOS files as defaults for v1.2.2. Android and iOS design differ just a tiny bit.
from react-native-calendars.
Awesome, thanks for being so accommodating! ❤️
from react-native-calendars.
Does this work with react native web out of the box ?
from react-native-calendars.
@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 (webpack/webpack#3516). I'm going to follow up with Webpack to see if we can get some more info.
from react-native-calendars.
I will try adding asset versions without @
maybe they will be interpreted the same way as @1x
from react-native-calendars.
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
?
from react-native-calendars.
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.
from react-native-calendars.
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 (necolas/react-native-web#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?
from react-native-calendars.
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
from react-native-calendars.
Added tintColor
ignore for web platform, check if that works out for you
from react-native-calendars.
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. 😄
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
. 😎 )
from react-native-calendars.
yeah i love the method over two props, will update now!
from react-native-calendars.
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.
from react-native-calendars.
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. 😄
from react-native-calendars.
Ok, merged the PR and closing this issue for now, plz create new issues if you notice something wrong with RN-web compatibility.
from react-native-calendars.
Will do! Thanks so much!
from react-native-calendars.
Related Issues (20)
- Calendars start to display numbers (1, 2, 3) instead of day
- Calendar height shrinks when surrounding layout changes
- onVisibleMounthChange returns only the first visible month and not all months visible HOT 1
- Items not rendering for Agenda HOT 1
- TimelineList onEventPress, event is undefined HOT 2
- Week header on Calendar and CalendarList
- ExpandableCalendar week header height wrong after textMonthFontSize changed
- TimelineList scrolling animation is janky HOT 2
- Calendar selectedDayTextColor not working HOT 1
- Changing AgendaList markToday "Today..." string HOT 1
- calendarlist rendering issue HOT 2
- ShowSixWeeks not work for Feb 2026
- Mixing require and import HOT 1
- Expandable Calendar InitialScrollIndex
- How to show the day month year and format the style of list in Agenda.
- Agenda issue with past and future dates HOT 1
- Agenda loader showing forever and items are not render
- UpdateSource "weekScroll" getting fired mysetriously after "dayPress" on TimelineList Component HOT 3
- AgendaItems are not displayed
- Today text color does not change when disabled
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-calendars.