react-native-calendars not rendering properly

🐛 Bug Report

react-native-web is not working properly with react-native-calendars.

A similar issue was opened with react-native-calendars and they suggested that an issue was opened with the expo team

Details are given about what could be the problem

This is most probably not an issue with react-native-calendars, but with expo / webpack config. I’m using calendars fine with my web webpack setup. react-native-calendars needs transpilation (just like most react-native libraries), so I guess your webpack babel rule needs to be told to include node_modules/react-native-calendars for transpilation. If I was you, I’d close this issue and open a new one in the expo community.

Environment

  Expo CLI 3.0.10 environment info:
    System:
      OS: macOS High Sierra 10.13.6
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: ^16.8.23 => 16.9.2 
      @types/react-native: ^0.57.65 => 0.57.65 
      expo: ^34.0.1 => 34.0.4 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz => 0.59.8 
      react-navigation: ^3.11.0 => 3.11.1 
    npmGlobalPackages:
      expo-cli: 3.0.10

The target with the problem is web. ios and android are both working fine

Steps to Reproduce

use react-native-calendars with react-native-web on expo

Expected Behavior

The calendar should look like this (ios pictured)

error

Actual Behavior

This is what it looks like on web

Screen Shot 2019-09-11 at 11 48 52 PM

The dates section is not working and the expand bar does not do anything

Reproducible Demo

I created a snack for expo expo snack

Issue Analytics

State:
Created 4 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

2reactions

bknifflercommented, Sep 12, 2019

In the other thread, you stated you have the following error

SyntaxError: C:\Users\g.ceribelli\Documents\postesocial\node_modules\react-native-calendars\src\agenda\index.js: 
Support for the experimental syntax 'classProperties' isn't currently enabled (26:20):


  25 | export default class AgendaView extends Component {
> 26 |   static propTypes = {
     |                    ^
  27 |     // Specify theme properties to override specific styles for calendar parts. Default = {}
  28 |     theme: PropTypes.object,
  29 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation

AFAIK, expo will automatically include all packages starting with react-native-* to be processed by babel. Thus, adding @babel/plugin-proposal-class-properties to your babel config should resolve the problem.

But I’m not 100% sure, I hope some expo folks will chime in.

1reaction

bknifflercommented, Sep 14, 2019

Nice, I guess this here can be closed then, I’m sure its not related to expo but some issue with how react-native-calendars handles press event on the expander and some styling issues that do not seem to transfer well to web.

@BillyFigueroa has created an issue in https://github.com/wix/react-native-calendars/issues/924, which seems like the better place to get this fixed.

Top Results From Across the Web

Agenda not rendering · Issue #388 · wix/react-native- ...

I'm running: react-native 53.0 and react-native-calendars 1.17.4 Agenda is not being rendered. All I have is a blank screen. render(){ ...

React Native Calendar Agenda week view not rendering ...

There two things that you can do: Update the version "react-native-calendars": "1.220.0" The weird scrolling behaviour of the header when ...

React Native Calendar Agenda week view not rendering ...

Coding example for the question React Native Calendar Agenda week view not rendering properly-React Native.

trucksmarter/react-native-calendars

The loading indicator next to the month name will be displayed if <Calendar/> has displayLoadingIndicator prop and the markedDates collection ...

react-native-calendars

[1.316.0] - 2020-8-27. Fix. Calendar Header - fix issue on 'react-native-web' where the calendar arrows were not appearing (PR #934). [1.334.0] - 2020-8-29....