breeffy / react-native-monorepo Goto Github PK

Support working react-native-calendar on web by using react-native-web

When using styled-components css property, testID property is passed down to <Icon /> component, which leads to exception.

import 'styled-components/macro';
...
<Icon
 css={`
   margin-left: 14px;
 `}
  color={`${
    iconColor !== undefined ? iconColor : 'rgba(38, 47, 86, 1)'
  }`}
  icon={['far', iconName]}
  size={24}
/>

While it is possible to set initial selected dates using select method on ref, it requires rerendering component.
Using with animated bottomsheet this leads to calendar UI jitter as shown below.

New TypeScript 4.5 features don't work with prettier and eslint.

• Upgrade eslint and prettier when they will be ready for TypeScript 4.5.

For now I prefer to disable eslint / prettier for these specific lines which are not supported. See this issue #110.

Track TypeScript 4.5 Support

• typescript-eslint/typescript-eslint#3950
• prettier/prettier#11600

Hey this looks awesome! I came across it on a Reanimated issue (I believe about slow lists). I maintain Moti and a few other React Native libraries. I've also contributed to react-native-paper-dates.

The product I'm working on is very heavily calendar focused, so I'm intrigued by this library. I've only been using web so far, but I'm building my RN app for native, and I'm thinking of using this library to create a split Calendar/list view, similar to the iOS Calendar app.

Question: are you planning on adding callbacks for things like onMonthChanged, etc? I'd like to fetch data for a given month as the user swipes, and do other things like that. I'd also like to mark dates that have multiple events with docs, etc. Just wondering if that's something that's planned for the future (I know this is still new!)

Thanks for making this, excited to try it out.

Now only usual rounding is performed, which works like Math.round(). While it's desirable to have different rounding options like Math.ceil() or Math.floor().

This is especially useful, when precision is set to 0. Related to #61.

When #111 will be ready rewrite

using new TypeScript 4.5 features

In development branch year interpolation looks like not correct in some situations.

<Calendar
  style={styles.calendar}
  ref={calendarRef}
  selectionMode="singleDay"
  scrollMode="anyOffset"
  scrollModeDeceleration="normal"
  monthsBefore={0}
  monthsAfter={10}
  renderFallbackMonth={renderFallbackMonth}
  onDaySelectionChange={onDaySelectionChange}
/>

For March, 2021 - January, 2022 on last month year header should be changed from 2021 to 2022.

With react-native-svg-icons package inclusion .yarnrc.yml with private npmAuthToken will be added.
Regenerate this token, before publishing into open-source repository.

For reference see this issue and pull request.

Acceptance Criteria:

• Pass duotone jest tests
• Working story showing duotone feature
• Add tests in CI pipeline

Improve Github Actions CI/CD and it's security.

• Use --ignore-scripts with yarn install, when it will be ready. See yarnpkg/yarn#7338
• Publish yarn.lock when lerna publish is called. See lerna/lerna#1171
• Use cache for yarn v3
• #100

I copy/paste'd the example in the README and I got the following error. I believe it's from reanimated.

Environment:
react-native: 0.64.0
react-native-reanimated: ^2.1.0
react-native-gesture-handler: ^1.10.3

Can I help solving this or am I missing something obvious?

This is useful for published npm packages.

If only one selected date in calendar remains, we can disable unselection of it, so calendar will always have at least one date selected.

In this mode pressing on this last selected date will do nothing (no unselection, no callbacks called).

I accidentally published 0.6.3-alpha.0 and 1.0.0-alpha.0 versions because of bad DX experience of GitHub Actions for custom workflows.

Features:

• Don't publish if no updated changelog with published version (for patch / minor / major releases)
• After publishing to npm create GitHub Release with description taken from Changelog file

New version React Native 0.66.2 was released.
Add storybook support for this version, react-native-template-typescript already supports this version.

At the moment, the calendar uses a static windowWidth variable. This prevents you from making custom-width calendar sizes. Ideally you could pass in a width prop. The best-case-scenario would be to wrap the calendar in a View and use onLayout to stretch its size, although this would result in a flash of hiding it, so perhaps it should just be handled by the user if they want that.

Also, rather than Dimensions.get('window').width, it should use useWindowDimensions so that the state updates if the width changes, such as a phone rotation.

I'd like to add some sort of event markers like this:

Would it be possible to expose an API for this? I'm happy to help with a PR. Even a renderDayMarker({ date }) function would suffice to avoid the lib having to build a whole UI. The only concern would be making sure it's still performant, but this is doable with the FlatList's extraData prop.

Original tests from react-native-fontawesome were successfully passed.

New version React Native 0.65.2 was released.
Add storybook support for this version, when react-native-template-typescript will add it. See react-native-community/react-native-template-typescript#232.

Hi @likern , would it be possible to create an example that I could run directly on https://snack.expo.io?

iOS is not officially supported and is not tested against it's correctness (due to not having any iOS phone).

When main application will be ported to iOS, support that platform officially.

Add horizontal time picker similar to iOS wheel picker (exact UI design might be different).

• Swipe horizontally to select hour
• Swipe horizontally to select minutes
• Themes support
• Loop / cycling (if possible)

Similar projects are

• https://github.com/henninghall/react-native-date-picker
• https://github.com/Carbs0126/NumberPickerView
• https://github.com/lesliesam/react-native-wheel-picker
• https://github.com/HosseinShabani/react-native-modern-datepicker

Support working react-native-calendar on Windows using react-native-windows

• dev:android should point to React Native 0.66.1
• add scripts to run RN 0.66.1 directly

It looks like this library is using a custom font. This should probably not be done under the hood, but rather with a style or theme option.

fontFamily "Gilroy-Medium" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

We need to propogate testID down to native components. But, because we use react-native-svg to render svg icons, it should support this property. Now react-native-svg doesn't support testID.

Depends on:

• software-mansion/react-native-svg#776
• software-mansion/react-native-svg#1359
• software-mansion/react-native-svg#1372

Related to #127 issue.

TODO:

• #69
• #71
• #70
• #72
• #73

CI:

• #82

Documentation Cleanup:

• Update changelog
• Remove Usage section - all examples should be shown in storybook playground. Closes #40
• Remove Calendar properties description - this is already explained in TypeScript types and TSDoc
• Update Copyright to 2022 year
• Mention where to find example / usage code
• Explain dependencies / peerDependencies policy
• Add version matrix for every component
• Explain iOS / MacOS / Windows / Web support

Update Scripts:

• #78

When I used release mode: compiled packages using TypeScript into lib/ packages folders and started usual yarn start && yarn android I got this error message.

Masking feature doesn't work as expected as it doesn't work in original react-native-fontawesome repo.

The same way transform doesn't work for, at least, RN 0.66.1 and latest react-native-svg.

Exception	Masked Icons