profile
viewpoint

animatedjs/animated 1743

Declarative Animations Library for React and React Native

microsoft/react-native-macos 1273

A framework for building native macOS apps with React.

sahrens/ReactNativeClass 2

Class materials for the React Native Class at F8 2017

sahrens/animated 0

Declarative Animations Library for React and React Native

sahrens/eslint-plugin-react 0

React specific linting rules for ESLint

sahrens/fbjs 0

A collection of utility libraries used by other Facebook JS projects.

sahrens/PathPicker 0

PathPicker accepts a wide range of input -- output from git commands, grep results, searches -- pretty much anything. After parsing the input, PathPicker presents you with a nice UI to select which files you're interested in. After that you can open them in your favorite editor or execute arbitrary commands.

sahrens/react 0

A declarative, efficient, and flexible JavaScript library for building user interfaces.

sahrens/react-docgen 0

A CLI and toolbox to extract information from React component files for documentation generation purposes.

sahrens/react-native 0

A framework for building native apps with React.

issue commentreact-native-community/discussions-and-proposals

Platform specific styles inside StyleSheet

Another option that would be much more flexible would be to make it functional:

const themedStyles = StyleSheet.createThemed((theme: 'light' | 'dark') => ({
    container: {
      flex: 1,
      backgroundColor: ThemeColors.surfaceBackground[theme],
    },
});
function MyComponent {
  const styles = useThemedStyles(themedStyles);
  return <View style={styles.container} />;
}

StyleSheet.createThemed could either return the function and useThemedStyle could compute the styles at runtime, or StyleSheet.createThemed could pre-compute the themes for each theme option ahead of time, e.g. in a babel transform or some other mechanism to generate static styles, e.g. for react-native-web.

svbutko

comment created time in 2 months

issue commentreact-native-community/discussions-and-proposals

Platform specific styles inside StyleSheet

Perhaps a new top-level StyleSheet.createThemed?

const themedStyles = StyleSheet.createThemed({
  dark: { ... },
  light: { ... },
  customTheme: { ... },
  shared: { ... },
});

then a generic utility function, and a light/dark theme specific hook, so

function MyComponent {
  const styles = useThemedStyles(themedStyles);
  return <View style={styles.container} />;
}
function MyOtherComponent {
  const customTheme: void | 'customTheme' | 'default' = useCustomTheme();
  const styles = getThemedStyle(customTheme, themedStyles);
  return <View style={styles.container} />;
svbutko

comment created time in 2 months

Pull request review commentfacebook/react-native

Make platformColors test page render with out of tree platforms

 function VariantColorsExample() {     <View style={styles.column}>       <View style={styles.row}>         <Text style={styles.labelCell}>-          {Platform.OS === 'ios'-            ? "DynamicColorIOS({light: 'red', dark: 'blue'})"-            : "PlatformColor('?attr/colorAccent')"}+          {Platform.select({+            ios: "DynamicColorIOS({light: 'red', dark: 'blue'})",+            android: "PlatformColor('?attr/colorAccent')",+            default: 'Unexpected Platform.OS: ' + Platform.OS,+          })}         </Text>         <View           style={{             ...styles.colorCell,             backgroundColor:               Platform.OS === 'ios'                 ? DynamicColorIOS({light: 'red', dark: 'blue'})-                : PlatformColor('?attr/colorAccent'),+                : Platform.OS === 'android'

Why not a Platform.select here too?

acoates-ms

comment created time in 2 months

PR opened microsoft/react-native-macos

Reviewers
fix transforms #280

Please select one of the following

  • [x] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [ ] I am making a fix / change for the macOS implementation of react-native
  • [ ] I am making a change required for Microsoft usage of react-native

Summary

This fixes #280 by making the effective origin of transforms {0.5, 0.5} with some additional matrix magic. I haven't been able to figure out why the anchorPoint default on macOS/NSView is {0, 0} rather than the iOS default {0.5, 0.5} (which matches the CALayer docs: https://developer.apple.com/documentation/quartzcore/calayer/1410817-anchorpoint)).

This also fixes application of the transform so it works on initial render. The underlying issue was that we were setting view.layer.transform directly (which is identified as undefined behavior in the NSView docs) and in practice doesn't work because the initial layer gets replaced after setting the initial values without copying the transform over to the new one, so it gets wiped out. The fix here is to save transform3D on the RCTView and apply it to the layer every time displayLayer: is called, along with all our existing custom layer rendering logic for border etc.

Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. See https://github.com/facebook/react-native/wiki/Changelog for an example. -->

[macOS] [Fixed] - fix transforms #280

Test Plan

Before After
image image
+19 -6

0 comment

3 changed files

pr created time in 2 months

create barnchsahrens/react-native

branch : fixTransforms

created branch time in 2 months

push eventsahrens/react-native

Spencer Ahrens

commit sha be57a56fccbc964d8cf400a12c583be7cca2d796

Fix comment nit

view details

push time in 2 months

Pull request review commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

 - (void)displayLayer:(CALayer *)layer   }    RCTUpdateShadowPathForView(self);+  +#if TARGET_OS_OSX // [TODO(macOS ISS#2323203)+  // clipsToBounds is stubbed out on macOS because it's not part of NSView+  layer.masksToBounds = self.clipsToBounds;+#endif // [TODO(macOS ISS#2323203)
#endif // ]TODO(macOS ISS#2323203)
sahrens

comment created time in 2 months

Pull request review commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

 - (void)displayLayer:(CALayer *)layer   }    RCTUpdateShadowPathForView(self);+  +#if TARGET_OS_OSX // [TODO(macOS ISS#2323203)+  // clipsToBounds is stubbed out on macOS because it's not part of NSView+  self.layer.masksToBounds = self.clipsToBounds;+#endif // [TODO(macOS ISS#2323203)

I'm not sure what the nit is - can you add a code "suggestion"?

sahrens

comment created time in 2 months

push eventsahrens/react-native

Spencer Ahrens

commit sha 239ca393ed44892e9be155013d7035437abb4bd1

Update React/Views/RCTView.m

view details

push time in 2 months

Pull request review commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

 - (void)displayLayer:(CALayer *)layer   }    RCTUpdateShadowPathForView(self);+  +#if TARGET_OS_OSX // [TODO(macOS ISS#2323203)+  // clipsToBounds is stubbed out on macOS because it's not part of NSView+  self.layer.masksToBounds = self.clipsToBounds;

lol this should be

  layer.masksToBounds = self.clipsToBounds;
sahrens

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

The code in this review does seem to explicitly call self.layer from RCTView.

lol, that's a typo! Let me fix that...

sahrens

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

Isn't this relying on the exact same undefined behavior as #419 was?

This approach is practically different in two major ways. First, it modifies the layer provided by displayLayer: rather than accessing self.layer or view.layer, and it does it every time, making no assumption that the state will be preserved indefinitely - this was necessary to get transforms to work (in a separate diff) because the layer does get recreated by the system and not all properties are preserved, so this technique avoids that potential class of bug that definitely happens with transforms. Second, we are already knee deep in this approach for a bunch of border rendering and other logic, so we are at least self consistent. I believe @tom-un is planning on scoping out a separate project to make all of this done "the right way" whatever that ends up being.

sahrens

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

Looks like the test is still flaky:

Failing tests: RNTester-macOSIntegrationTests: -[RNTesterLoadAllPages ScrollViewExample]

This task has failed 8 times across 36 pipeline runs in the last 14 days.

sahrens

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399 (attempt 2)

See #419 for more context on approach.

sahrens

comment created time in 2 months

delete branch sahrens/react-native

delete branch : patch-3

delete time in 2 months

PR closed microsoft/react-native-macos

Fix overflow:'hidden' github issue #399 Partner: Facebook

Please select one of the following

  • [x] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [ ] I am making a fix / change for the macOS implementation of react-native
  • [ ] I am making a change required for Microsoft usage of react-native

Summary

Fixes overflow:'hidden' #399 by overriding setClipsToBounds to also set self.layer.masksToBounds = clipsToBounds;

overflow: 'hidden' doesn't work in MacOS, but it does work in iOS and Android (not sure about Windows). This change brings functional parity with minimal complexity/conflict.

This also fixes borderRadius on <Image> which broke recently because the implementation of RCTImage changes from subclass to composition with the image view being a subview and thus now relies on functional clipping behavior.

Changelog

[MacOS] [Fixed] - Fix overflow:'hidden' #399

Test Plan

Before After
Screen Shot 2020-05-26 at 1 15 51 PM Screen Shot 2020-05-26 at 1 15 30 PM
Screen Shot 2020-05-26 at 12 01 18 PM Screen Shot 2020-05-26 at 1 15 16 PM
Microsoft Reviewers: Open in CodeFlow
+7 -0

12 comments

1 changed file

sahrens

pr closed time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

Ok, replacing this with https://github.com/microsoft/react-native-macos/pull/457 which should avoid the undefined layer behavior issues.

sahrens

comment created time in 2 months

PR opened microsoft/react-native-macos

Reviewers
Fix overflow:'hidden' github issue #399 (attempt 2)

Please select one of the following

  • [x] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [ ] I am making a fix / change for the macOS implementation of react-native
  • [ ] I am making a change required for Microsoft usage of react-native

Summary

Fixes overflow:'hidden' #399 by settinglayer.masksToBounds = self.clipsToBounds; in the displayLayer: method

overflow: 'hidden' doesn't work in macOS, but it does work in iOS and Android (not sure about Windows). This change brings functional parity with minimal complexity/conflict.

This also fixes borderRadius on <Image> which broke recently because the implementation of RCTImage changes from subclass to composition with the image view being a subview and thus now relies on functional clipping behavior.

Changelog

[MacOS] [Fixed] - Fix overflow:'hidden' #399

Test Plan

Before After
Screen Shot 2020-05-26 at 1 15 51 PM Screen Shot 2020-05-26 at 1 15 30 PM
Screen Shot 2020-05-26 at 12 01 18 PM Screen Shot 2020-05-26 at 1 15 16 PM
Microsoft Reviewers: Open in CodeFlow
+5 -0

0 comment

1 changed file

pr created time in 2 months

create barnchsahrens/react-native

branch : fixOverflowHidden

created branch time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

Awesome, thanks for the instructions. The contributor guide reads "...start by creating your own fork of the repository. This is essential....Click on the Fork button at the top right corner of the page."

Which doesn't work, so I wasn't sure if the rest of the instructions were recommended since they also don't apply very closely.

sahrens

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

Also, I haven't been able to properly fork this repo - github blocks me because I already have a fork of facebok/react-native, so I just copy-pasted changes into the github web editor for this PR. Anyone know the best way to set up a proper fork? Do I need to delete my other fork? Or is there a way to bypass the github check? Or maybe I should muck with the origin for my existing fork?

sahrens

comment created time in 2 months

issue commentmicrosoft/react-native-macos

Transforms

Ok I have it all fixed up. Putting up some PR's now.

tom-un

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

So I just spent some time fixing transforms and discovered some weirdness about how layers work with NSView - the main issue I came across is that the backing layer can change to another one without all the properties getting copied over, so if you just set view.layer.transform, it gets wiped out later. The displayLayer: method seems safe though, so I think it's ok to set masksToBounds in that function as I proposed in my earlier inline comment.

sahrens

comment created time in 2 months

issue commentmicrosoft/react-native-macos

Transforms

Current state:

iOS (correct) MacOS
Screen Shot 2020-06-04 at 4 32 09 PM Screen Shot 2020-06-04 at 4 18 29 PM
tom-un

comment created time in 2 months

issue commentmicrosoft/react-native-macos

Cannot apply background color to TextInput

Can we add the FB partner label? Is any progress being made here?

ospfranco

comment created time in 2 months

issue commentmicrosoft/react-native-macos

Transforms

Can you add the Facebook partner tag and assign to me?

tom-un

comment created time in 2 months

issue commentmicrosoft/react-native-macos

Transforms

It seems like more than just rotations are broken. I'm going to take a look at this.

tom-un

comment created time in 2 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

If we want to rework the way we use layers, can we do that as a separate project?

This PR fixes a major regression that was recently introduced (border radius stopped working) and is blocking us from clean upgrades to the latest version which has critical fixes we need (like tintColor and resizeMode: ‘cover’). We’ve had to apply patches internally to move forward.

sahrens

comment created time in 3 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

I'm pretty wary of fundamentally changing the way RCTView works with respect to layers if a particular prop is changed, which would also be a further divergence from iOS (and probably break a bunch of stuff without a lot of additional complexity, like copying all the properties as you mention).

Also note that we already muck with view.layer in multiple places to implement stuff like shadows, borders, etc. so I think that ship has sailed.

sahrens

comment created time in 3 months

Pull request review commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

 - (void)reactSetFrame:(CGRect)frame   } } +#if TARGET_OS_OSX // [TODO(macOS https://github.com/microsoft/react-native-macos/issues/399)+- (void)setClipsToBounds:(BOOL)clipsToBounds {+  [super setClipsToBounds:clipsToBounds];+  self.layer.masksToBounds = clipsToBounds;+}+#endif+ - (void)displayLayer:(CALayer *)layer

Would it be better to set masksToBounds in this function?

sahrens

comment created time in 3 months

pull request commentmicrosoft/react-native-macos

Fix overflow:'hidden' github issue #399

Looks like the failing test might be flaky since it also failed on #408:

https://dev.azure.com/ms/react-native/_build/results?buildId=81251&view=results https://dev.azure.com/ms/react-native/_pipeline/analytics/stageawareoutcome?definitionId=220

Also, shouldn't snapshot tests have caught the image borderRadius regression before it landed?

sahrens

comment created time in 3 months

PR opened microsoft/react-native-macos

Reviewers
Fix overflow:'hidden' github issue #399

Please select one of the following

  • [x] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [ ] I am making a fix / change for the macOS implementation of react-native
  • [ ] I am making a change required for Microsoft usage of react-native

Summary

Fixes overflow:'hidden' #399 by overriding setClipsToBounds to also set self.layer.masksToBounds = clipsToBounds;

overflow: 'hidden' doesn't work in MacOS, but it does work in iOS and Android (not sure about Windows). This change brings functional parity with minimal complexity/conflict.

This also fixes borderRadius on <Image> which broke recently because the implementation of RCTImage changes from subclass to composition with the image view being a subview and thus now relies on functional clipping behavior.

Changelog

https://github.com/facebook/react-native/wiki/Changelog for an example.

[MacOS] [Fixed] - Fix overflow:'hidden' #399

Test Plan

Before After
Screen Shot 2020-05-26 at 1 15 51 PM Screen Shot 2020-05-26 at 1 15 30 PM
Screen Shot 2020-05-26 at 12 01 18 PM Screen Shot 2020-05-26 at 1 15 16 PM
+7 -0

0 comment

1 changed file

pr created time in 3 months

push eventsahrens/react-native

Spencer Ahrens

commit sha ede195ab130b5ce1a12987e4047e87003b01f75d

Fix overflow:'hidden' github issue #399 Fixes #399 by overriding `setClipsToBounds` to also set `self.layer.masksToBounds = clipsToBounds;`

view details

push time in 3 months

issue commentmicrosoft/react-native-macos

Overflow hidden property on View not working

Setting the border radius on the image no longer works after upgrading to 0.61.38 because the RCTImage is now a subview of the RCTView. We should fix this right away (even if the behavior is technically undefined) since the fix works now and we don't seem to have another options for this critical functionality.

Any idea why this doesn't work out of the box though? Or what the "right way" to solve this is supposed to be?

Also, overflow: 'hidden' works on Android, it's just that the implementation is tricky because the Android platform doesn't support it in the same way.

AkshatGiri

comment created time in 3 months

issue commentCocoaPods/CocoaPods

Brew based CocoaPods CLI fails in MacOS 10.15 Catalina due incorrect fallback to Ruby 2.3

Worked out using: brew install cocoapods --build-from-source then: brew link --overwrite cocoapods

This didn't work for me, but gem install cocoapods did (after chowning a bunch of stuff)

curiousapplications

comment created time in 3 months

more