Add Fabric support #657

alfonsocj · 2022-09-13T18:19:47Z

Summary

Adding Fabric support for iOS.

Setup codegen spec in flow
Update podspec file
Add codegenConfig in package.json
Ensure backwards compatibility
iOS Implementation, RNDateTimePickerComponentView
Custom ShadowNodes.cpp and ComponentDescriptors.cpp in fabric to pass the size of the UIDatePicker based on the ones generated by codegen.
Custom RNDateTimePickerState.cpp that stores the frameSize to update the shadow node size.
The approach to calculate the intrinsic size of the component is based on react-native-screens approach and the cpp example from @cortinico and @troZee.

Android is already compatible with Fabric as it doesn't use a native UI component.

Test Plan

yarn start
cd "example/ios" && RCT_NEW_ARCH_ENABLED=1 npx pod-install && cd -
yarn start:ios

If you want to go back to the old renderer (Paper),
remove ios/build, run pod-install without the RCT_NEW_ARCH_ENABLED=1 and build again

rm -r "example/ios/build"
cd "example/ios" && npx pod-install && cd -
yarn start:ios

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

OS	Implemented
iOS	✅ ❌
Android	✅ ❌

Checklist

I have tested this on a device and a simulator
I added the documentation in README.md
I updated the typed files (TS and Flow)
I added a sample use of the API in the example project (example/App.js)
I have added automated tests, either in JS or e2e tests, as applicable

alfonsocj · 2022-09-15T16:09:48Z

src/datetimepicker.ios.js

@@ -109,19 +116,16 @@ export default function Picker({
    return null;
  }

-  const dates: DatePickerOptions = {value, maximumDate, minimumDate};
-  toMilliseconds(dates, 'value', 'minimumDate', 'maximumDate');


It's difficult to cast this since we are changing the value in place.
A better alternative is to have a dateToMilliseconds helper fn that returns a ?number

RNDateTimePicker.podspec

src/types.js

src/datetimepicker.ios.js

CONTRIBUTING.md

.circleci/config.yml

vonovak · 2022-09-16T09:46:10Z

@alfonsocj can you pls rebase on master, there have been some new changes, thank you! 🙂

alfonsocj · 2022-09-16T15:50:22Z

now it doesn't show the native element because the height and width are not being calculated 😅

alfonsocj · 2022-09-23T11:11:49Z

@vonovak I think the PR is ready 🙏.
Let me know if the changes make sense.

vonovak

I did not run the code yet (will do later to test it out) but I have some comments:

Thank you for the hard work! :)

src/datetimepicker.ios.js

src/utils.js

ios/fabric/RNDateTimePickerComponentView.mm

example/ios/date-time-picker-example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

example/ios/date-time-picker-example.xcworkspace/contents.xcworkspacedata

ios/fabric/RNDateTimePickerComponentView.mm

alfonsocj · 2022-09-23T18:42:35Z

Thanks for taking a look. I solved all the issues you mentioned 🤞

# [6.4.0](v6.3.5...v6.4.0) (2022-09-27) ### Features * **ios:** add Fabric support ([#657](#657)) ([8df590b](8df590b))

vonovak · 2022-09-27T09:59:38Z

🎉 This issue has been resolved in version 6.4.0 🎉

If this package helps you, consider sponsoring us! 🚀

muskaanbakshi · 2023-11-02T09:17:59Z

Has anyone faced this issue in running build after doing RCT_NEW_ARCH_ENABLED=1 npx pod-install?
I get this error: @react-native-community/datetimepicker/ios/fabric/cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.h:12:10: fatal error: 'react/renderer/components/RNDateTimePickerCGen/EventEmitters.h' file not found

#826

alfonsocj force-pushed the fabric-support branch 4 times, most recently from 3fa7ae3 to e41783f Compare September 15, 2022 15:02

alfonsocj changed the title ~~Fabric support~~ Add Fabric support Sep 15, 2022

alfonsocj force-pushed the fabric-support branch 5 times, most recently from 5b397d6 to e0cccc9 Compare September 15, 2022 16:08

alfonsocj commented Sep 15, 2022

View reviewed changes

alfonsocj force-pushed the fabric-support branch from e0cccc9 to fc1f6ad Compare September 15, 2022 16:11

alfonsocj marked this pull request as ready for review September 15, 2022 16:45

capezzbr reviewed Sep 15, 2022

View reviewed changes

RNDateTimePicker.podspec Show resolved Hide resolved

vonovak reviewed Sep 15, 2022

View reviewed changes

src/types.js Outdated Show resolved Hide resolved

src/datetimepicker.ios.js Outdated Show resolved Hide resolved

CONTRIBUTING.md Show resolved Hide resolved

alfonsocj force-pushed the fabric-support branch from 839fc02 to a37bb91 Compare September 16, 2022 02:33

vonovak reviewed Sep 16, 2022

View reviewed changes

.circleci/config.yml Outdated Show resolved Hide resolved

fortmarek mentioned this pull request Sep 16, 2022

fix: use UIDatePickerStyle value for dimension measurements fortmarek/datetimepicker#1

Merged

alfonsocj-cb added 2 commits September 16, 2022 11:29

Initial changes

329c314

test fabric in CI

081cf8f

alfonsocj force-pushed the fabric-support branch from a37bb91 to 081cf8f Compare September 16, 2022 15:30

capezzbr mentioned this pull request Sep 19, 2022

Add support for the new architecture #622

Closed

alfonsocj force-pushed the fabric-support branch 3 times, most recently from 2fd7c95 to 6ea008a Compare September 21, 2022 18:13

Sending picker size to shadow node

ea40cc1

alfonsocj force-pushed the fabric-support branch 2 times, most recently from 8324155 to 000aad6 Compare September 21, 2022 20:40

Fix E2E config

ad19c2f

alfonsocj force-pushed the fabric-support branch 2 times, most recently from 1518405 to 841dab1 Compare September 22, 2022 10:12

Update Xcode in CI

8909520

alfonsocj force-pushed the fabric-support branch from 841dab1 to 8909520 Compare September 22, 2022 10:27

Adding more comments

963ea83

alfonsocj force-pushed the fabric-support branch from a0691e4 to 963ea83 Compare September 22, 2022 13:58

vonovak reviewed Sep 23, 2022

View reviewed changes

cleanup

fbd4036

alfonsocj force-pushed the fabric-support branch from 2e07308 to fbd4036 Compare September 23, 2022 18:26

vonovak approved these changes Sep 25, 2022

View reviewed changes

troZee approved these changes Sep 26, 2022

View reviewed changes

vonovak merged commit 8df590b into react-native-datetimepicker:master Sep 27, 2022

vonovak pushed a commit that referenced this pull request Sep 27, 2022

chore(release): 6.4.0 [skip ci]

547d463

# [6.4.0](v6.3.5...v6.4.0) (2022-09-27) ### Features * **ios:** add Fabric support ([#657](#657)) ([8df590b](8df590b))

vonovak added the released label Sep 27, 2022

alfonsocj mentioned this pull request Nov 30, 2022

feat: initial support for new architecture (fabric) lottie-react-native/lottie-react-native#910

Merged

YoussefHenna mentioned this pull request May 17, 2023

DateTimePicker crashes on Expo IOS Snack/Appetize #750

Open

YoussefHenna mentioned this pull request Jun 1, 2023

@react-native-community/datetimepicker crashes on IOS expo/snack#429

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Fabric support #657

Add Fabric support #657

alfonsocj commented Sep 13, 2022 •

edited

Loading

alfonsocj Sep 15, 2022 •

edited

Loading

vonovak commented Sep 16, 2022

alfonsocj commented Sep 16, 2022

alfonsocj commented Sep 23, 2022

vonovak left a comment

alfonsocj commented Sep 23, 2022

vonovak commented Sep 27, 2022

muskaanbakshi commented Nov 2, 2023

Add Fabric support #657

Add Fabric support #657

Conversation

alfonsocj commented Sep 13, 2022 • edited Loading

Summary

Test Plan

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

Checklist

alfonsocj Sep 15, 2022 • edited Loading

Choose a reason for hiding this comment

vonovak commented Sep 16, 2022

alfonsocj commented Sep 16, 2022

alfonsocj commented Sep 23, 2022

vonovak left a comment

Choose a reason for hiding this comment

alfonsocj commented Sep 23, 2022

vonovak commented Sep 27, 2022

muskaanbakshi commented Nov 2, 2023

alfonsocj commented Sep 13, 2022 •

edited

Loading

alfonsocj Sep 15, 2022 •

edited

Loading