React native calendars are not rendering as expected with web build especially the custom day Component passed

Please make our job easier by filling this template out to completion. If you’re requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

I am using react-native-calendars for mobile & web app.When i start project on web its working as expected but when we create build its not showing any style web::

web build::

react-app-rewired build

Have already updated the config-overide file:

  babelInclude([
    path.resolve(__dirname, 'node_modules/react-native-calendars'),
    path.resolve(__dirname, 'node_modules/react-native-swipe-gestures'),
    path.resolve(__dirname, 'src'),
  ])
```,

&& 

…addBabelPlugins( ‘@babel/plugin-proposal-class-properties’, ‘@babel/plugin-transform-modules-commonjs’, ),

[sulaigor]

Version: 1.1264.0 Builder: NextJS

Hi,

I investigated this issue in package source code and I find issue with extractComponentProps (src/component-updater.js) function which is used in Calendar component (src/calendar/index.js) in renderHeader and renderDay methods.

The extractComponentProps function return empty object while component’s (first argument) propTypes are undefined. This empty object is distributed to Day or Header component’s properties so it not set up anything like theme, firstDay etc.

I fix it like this for my build:

function extractComponentProps(component, props, ignoreProps) {
  const componentPropTypes = component.propTypes;
  if (componentPropTypes) {
    const keys = Object.keys(componentPropTypes);
    const componentProps = _.chain(props)
      .pickBy((_value, key) => _.includes(keys, key))
      .omit(ignoreProps)
      .value();
    return componentProps;
  }
  return {...props};
}

I’d rather return copy of props than empty object in my case.

I hope this will help to fix the issue for web building.

Thanks.

[jamespb97]

This also worked for me, also using NextJS to build web version of our project. @sulaigor I’d suggest you make a PR with this code as a fix for this issue 👍