profile
viewpoint

elementary/website 1002

The elementary.io website

jacobp100/es-css-modules 160

PostCSS plugin that combines CSS Modules and ES Imports

elementary/os 158

The OS build system

elementary/houston 153

AppCenter Dashboard, the backend for elementary AppCenter

elementary/appcenter-web 30

Web frontend for viewing AppCenter apps

elementary/blog-template 15

Our template for the Jekyll-powered blog

jacobp100/babel-plugin-swift-blocks 12

Swift-style blocks for JS

jacobp100/json-view 7

JSON viewer

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 1ac2836111610b8300aabb732abd326ad7729f87

links

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha c4e00ef1f3ed1cfe8165d0674ee7a673d0000c4f

links

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 92fd030ea207f6581ad35a65e71d32b3718a8981

mobile

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha dae5e42317b5a453ed452c1257c4196af27fc853

mobile

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha a5fffa2cfee88cca308f136eda7138314dcb8cab

html formatting

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 88827dbb73344d95e3a3ac7d8436308c156ce42d

mobile

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 5abc8bc46e0dd8b86509cf37d6e952a218a16a2a

figma embeds

view details

push time in 3 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 592dc2bff34529fa7121210f37739d20e850c637

blog

view details

push time in 3 days

issue commentBuckleScript/syntax

Potentially better list syntax: `list{1, 2, 3}`

I think my favourite is list, square brackets, and inferring the list identifier for the top level cases of switch statements after the first reference.

You can use the backslash notation if you need an array called list.

I don’t think not working within variants will matter too much.

But I’m also not unhappy at any of the other suggestions!

chenglou

comment created time in 4 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 2d0d8ba076dcc3abbaadf46fc8ef3e1eac3fce81

.

view details

push time in 4 days

issue commentstyled-components/css-to-react-native

[feature request] Add support to do reverse

Also, styled components has some form of support for objects - see https://styled-components.com/docs/advanced#style-objects

selrond

comment created time in 5 days

issue commentstyled-components/css-to-react-native

[feature request] Add support to do reverse

could this lib be extended to do the opposite to what it does now

I personally don't have much interest in taking that task on. If someone else wanted to do this, I would say do it in a separate project - I want to keep this project limited to what's in the name

But I also expect this to be impossible to implement correctly - there's no way to convert { padding: 5 } to CSS without changing the behaviour

selrond

comment created time in 5 days

issue closedstyled-components/css-to-react-native

[feature request] Add support to do reverse

Usecase: I have a custom styled component, where I want to use third-party styles (which are in style object form) alongside my styles and functions:

const MyComponent = styled(SomeComponent)`
  font-size: 16px;
  ${({ color }) => color && `color: ${color}`}
`

Text.defaultProps = {
  style: thirdPartyStyleObject,
  color: '#FAFAFA', // doesn't work if color is defined inside `thirdPartyStyleObject`
}

The solution would be to be able to convert thirdPartyStyleObject to css string, which could be used inside my styled component.

Is there any other solution that I'm unaware of?

closed time in 5 days

selrond

issue commentstyled-components/css-to-react-native

[feature request] Add support to do reverse

You can look at these,

  • https://styled-components.com/docs/basics#extending-styles
  • https://gist.github.com/carlosepp/7704cce24edba0520eb6b36d894f04ae

But at this point, you're talking about styled component issues. If you're still stuck, could you open this issue on their repo?

selrond

comment created time in 5 days

issue commentstyled-components/css-to-react-native

[feature request] Add support to do reverse

If you look at the readme for this project, we take an array of style tuples - like [["color", "red"], ["padding", "3px 5px"]], and then return a valid style object.

If you write some code to convert your CSS to that format, you can use the style object we give you. The easiest (but not 100% correct) thing is,

const css = `
  color: red;
  padding: 3px 5px;
`
const styleTuples = css
  .split(/\s*;\s*/g)
  .map(line => line.split(/\s*:\s*/g))
  .filter(tuple => tuple.length === 2)
const styleObject = cssToReactNative(styleTuples)
selrond

comment created time in 5 days

issue commentstyled-components/css-to-react-native

[feature request] Add support to do reverse

Could you elaborate a bit more? I can’t work out what you’re trying to do

selrond

comment created time in 5 days

issue commentBuckleScript/syntax

Potentially better list syntax: `list{1, 2, 3}`

Seems sensible for avoiding conflicts

Should it ever be able to add labeled parameters to constructors? Like set{~compare=someFn, 1, 2, 3}? The braces feel a bit awkward in this position. Or maybe it gets formatted as set(~compare) { 1, 2, 3 }

I think for lists there should also be an additional short syntax - like &{1, 2, 3} - so you get the readability for beginners, and the terseness for people using them extensively

chenglou

comment created time in 5 days

issue openedBuckleScript/syntax

Matching polymorphic variant tags

The syntax for matching a polymorphic variant type uses a double hashtag

type nums = [ | #one | #two | #three];

type alphas = [ | #a | #b | #c];

type alphanums = [ nums | alphas ];

let a: alphanums = #a;

switch a {
| ##alphas => Js.log("alphas")
| ##nums => Js.log("nums")
};

What if we used the spread operator? Either before or after the hashtag

switch a {
| #...alphas => Js.log("alphas")
| #...nums => Js.log("nums")
};

created time in 6 days

push eventjacobp100/technicalc-editor

Jacob Parker

commit sha ea90f21c95710f7c71d6987feeac710bce362504

.

view details

push time in 15 days

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha ea8b21c67581a5d06ec9ff45fa720a060b5de215

.

view details

push time in 15 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 6db8b51fc48a68543b54a571e9dad4d6d84f26ca

.

view details

push time in 17 days

push eventjacobp100/reasonml-playground-native

Jacob Parker

commit sha d765941d92954ab7658fb12b3150be0b12f4075e

.

view details

push time in 20 days

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 7049dc20f5827fc73090d018ff213d99ad09c518

assets

view details

push time in a month

PR opened react-native-community/react-native-picker

Set dataSoure property

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect -->

Summary

<!-- Explain the motivation for making this change: here are some points to help you:

  • What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged

  • What is the feature? (if applicable)

  • How did you implement the solution?

  • What areas of the library does it impact? -->

Sets the dataSource property on iOS. Only an internal change, doesn't change behaviour or the API. Requirement for this Detox issue.

Test Plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. -->

What's required for testing (prerequisites)?

Just test it still works

What are the steps to reproduce (after prerequisites)?

None

Compatibility

OS Implemented
iOS
Android

Checklist

<!-- Check completed item, when applicable, via: [X] -->

  • [x] I have tested this on a device and a simulator
  • [x] I added the documentation in README.md
  • [ ] I mentioned this change in CHANGELOG.md
  • [x] I updated the typed files (TS and Flow)
  • [x] I added a sample use of the API in the example project (example/App.js)

Not sure if this needs to be mentioned in the changelog

+1 -0

0 comment

1 changed file

pr created time in a month

push eventjacobp100/react-native-picker

Jacob Parker

commit sha 91147df8c18f292f52ec9eaa03a5790d2bfe6136

Set dataSoure property

view details

push time in a month

fork jacobp100/react-native-picker

Picker is a cross-platform UI component for selecting an item from a list of options.

fork in a month

issue commentfacebook/yoga

Margin auto allows negative values

Amazing. Thanks so much!

jacobp100

comment created time in a month

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha 67e367c57640caeaa03e93e517efdb8dd6204f8e

.

view details

push time in a month

push eventjacobp100/jacob-does-code

Jacob Parker

commit sha f3e7f42f6e004dec6c083b5902edbf473239381c

.

view details

push time in a month

push eventjacobp100/react-native-context-menu-view

Jacob Parker

commit sha 5ff6f9b0cff1e3895e36383ec6cae03521815d45

Update README.md Sorry, also my fault!

view details

push time in a month

PR opened mpiannucci/react-native-context-menu-view

Fix types

Sorry, this was my fault!

+3 -3

0 comment

1 changed file

pr created time in a month

push eventjacobp100/react-native-context-menu-view

Jacob Parker

commit sha 672a14fa6eafb7e6825384bf433449bcdcf04cd5

Fix types Sorry, this was my fault!

view details

push time in a month

pull request commentmpiannucci/react-native-context-menu-view

Add index to onPress callback, improve documentation

Thanks for merging 😀

jacobp100

comment created time in a month

issue openedreact-native-community/react-native-svg

PlatformColor and DynamicColorIOS don't work

#930 Bug

React Native 0.63 has PlatformColor and DynamicColorIOS color modes (see https://medium.com/@jacobp100/dark-mode-in-react-native-a4ac55a2a0e5)

I tried setting it on fill, color and tintColor using one of these. However, these new colors don't work

Unexpected behavior

Explained above

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Memory: 807.58 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /Users/jacobparker/.rvm/gems/ruby-2.4.5/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_232 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.0-rc.1 => 0.63.0-rc.1 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.0

Steps To Reproduce

No expo link due to requiring RN 0.63

Short, Self Contained, Correct (Compilable), Example

No expo link due to requiring RN 0.63

Extra Info

I think tintColor should be easy to support on iOS. RCTConvert handles the new color styles, so I think we just need to remove the JS logic here. Android shouldn't be too much harder

I suspect handling this for stuff like fill will be harder

created time in a month

PR opened mpiannucci/react-native-context-menu-view

Destructive disabled items

Builds on top of #4 so the diff looks a bit larger than the actual change for this

On Android, it looks like disabled items are interactive, but nothing happens when you press them. Not sure if there's any extra flags you gotta pass in to grey them out like iOS

Simulator Screen Shot - iPhone SE (1st generation) - 2020-06-02 at 18 20 22

+99 -25

0 comment

8 changed files

pr created time in a month

pull request commentreact-native-community/react-native-webview

Add prop autoManageStatusBarEnabled

Just a note in RN 0.63, it looks like they've moved to VC-based status bars. https://github.com/react-native-community/releases/blob/99ede5c852f8818c255007473a8175e4e22d3602/CHANGELOG.md

Maybe it still makes sense to merge this in as not everyone will be able to update immediately though

kesha-antonov

comment created time in a month

push eventjacobp100/react-native-context-menu-view

Jacob Parker

commit sha 6d05b1c6725169d00cc6144f144fbc107670b2a7

Fix invalid code

view details

push time in a month

create barnchjacobp100/react-native-context-menu-view

branch : on-press-index

created branch time in a month

issue commentth3rdwave/react-native-safe-area-context

v3 Android build failure RN 0.59

So I know wix does this by having a 0.59 and 0.60 folder. https://github.com/wix/react-native-notifications/tree/master/android/app/src . I don’t know how it’s all linked together, and it might be more hassle than it’s worth

grit96

comment created time in a month

push eventjacobp100/technicalc-editor

Jacob Parker

commit sha 460ad572b0a1ec0f27ba19d1161dc2de09f221d3

.

view details

push time in a month

push eventjacobp100/technicalc-editor

Jacob Parker

commit sha 4028264a12738ca8561302e5d9c325befe8b8f3a

.

view details

push time in a month

issue openedsoftware-mansion/react-native-screens

Navigation Conflicts with React Native Modal Component

If I render a <Modal /> component from react-native within a native stack and navigate while dismissing the modal, it either freezes with the modal open, freezes with the modal shut, or closes the modal, reopens the modal, then freezes. Generally, it freezes.

We mostly use react-navigation, but I also think there are good uses for the modal component. We have a case where we have a modal that asks the user if they want push notifications when they've met some criteria. They can press no, and then meet the criteria again at a later date. Doing this with the Modal component is much more ergonomic here because of the visible prop. We don't have to do imperative navigation to handle this.

It's not entirely clear whether this is a bug here - maybe it's up to react-navigation to render a modal within a stack, and then have a mechanism for conditionally displaying that. Or maybe is is a bug here, and we need better handling with modals that are not our own. I know I have apps that show iOS modals for stuff like the file picker. What are your thoughts here?

I've made a reproduction over here https://github.com/jacobp100/react-native-screens/tree/react-native-modal-example (diff)

created time in a month

create barnchjacobp100/react-native-screens

branch : react-native-modal-example

created branch time in a month

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha 62a24a3618c4605a5990620d9606e2ba1c5c4346

.

view details

push time in a month

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha a7c295cb87e6cbf7427c6d237f3bba0ede333a74

.

view details

push time in a month

push eventjacobp100/technicalc-editor

Jacob Parker

commit sha 0d24fd1ecccbe9fa0cea3dd5da88720082f5760c

.

view details

push time in a month

push eventjacobp100/technicalc-editor

Jacob Parker

commit sha bed9d95ff8b68c8f2ed872f89d5c0acab8451376

.

view details

Jacob Parker

commit sha 781055d95d450bc22a837d1fb7e0fb2ca0b75ecc

Merge branch 'master' of https://github.com/jacobp100/sciline-editor

view details

push time in a month

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha 9a32c3c71414db707428d8f84050c03cbb3f948e

.

view details

push time in a month

PR opened joltup/react-native-threads

Fix autolinking on android

The React native config wasn't getting included in the package, so broke autolinking

+2 -1

0 comment

1 changed file

pr created time in a month

push eventjacobp100/react-native-threads

Jacob Parker

commit sha 1d3b39fa7c461273fec392f6771ee2ff0573bb7f

Fix autolinking on android

view details

push time in a month

issue commentth3rdwave/react-native-safe-area-context

SafeAreaView "edges" prop not working

Is this still an issue then? We can continue the flickering discus in that issue

choibles

comment created time in a month

issue openedth3rdwave/react-native-safe-area-context

Margin mode on iOS can sometimes get stuck with invalid safe area insets

I had something like the following,

<SafeAreaView
  style={{ position: 'absolute', left: 0 }}
  edges="left"
  mode="margin"
/>

When I rotate to landscape and back to portrait, it gets stuck with the landscape insets

I suspect this is because iOS's safeArea prop does not change if you're outside the safe area insets - which you will be going from landscape to portrait. Maybe we should if the safeArea changed in onLayout

created time in a month

CommitCommentEvent

delete branch jacobp100/react-native-safe-area-context

delete branch : margin-mode

delete time in a month

issue commentth3rdwave/react-native-safe-area-context

SafeAreaView "edges" prop not working

Can you try again with v3? There was some issues in v2 where an edge had to be touching the edge of the screen to have that safe area applied, but v3 fixes that.

This repo now has a edges test app (see this pr) - and that worked on iOS and Android

choibles

comment created time in a month

CommitCommentEvent

issue commentth3rdwave/react-native-safe-area-context

V2 seems to have performance issues

The flickering could be some code using the native safe area view, and some code getting it from the hooks. I have a few places in my so where I have to use the hook and I get a flicker switching between portrait and landscape

panda0603

comment created time in a month

issue closedth3rdwave/react-native-safe-area-context

mode = padding | margin | border

What do you think about allowing customisation of the property that the edges are assigned to? I have some separator components that in the current version I might format as,

<SafeAreaView edges={['left']} style={{ paddingLeft: 12 }}>
  <View style={{ height: 1, backgroundColor: 'grey' }} />
<SafeAreaView>

But if I could use margins, it would look like this,

<SafeAreaView
  mode="margin"
  edges={['left']}
  style={{ marginLeft: 12, height: 1, backgroundColor: 'grey' }}
/>

This wouldn't be a breaking change and I can do the work to implement it - I just wanted to get a go-ahead first!

closed time in a month

jacobp100

issue commentth3rdwave/react-native-safe-area-context

mode = padding | margin | border

This is implemented now

jacobp100

comment created time in a month

issue commentth3rdwave/react-native-safe-area-context

V2 seems to have performance issues

2 is the behaviour in the margins pr. I'm still thinking what's best too - but I'll add a few notes

For iOS's default implementation
  • Automatically setting the insets is the behaviour of contentInsetAdjustmentBehavior on ScrollViews
For option 2
  • Matches v1
  • If we allow the user to set edges, it would be counter-intuitive that they sometimes aren't applied even when set
  • We'd need better documentation on this behaviour, and there's not too much documentation of the finer details (stuff inside scrollviews)
  • We'll probably never iOS's implementation on other platforms
  • We can support changing the margins
panda0603

comment created time in a month

pull request commentth3rdwave/react-native-safe-area-context

Margin mode

If we go this route, I just realised the fallback on iOS 10 would need updating to just use the parent view controller's insets. Will update tomorrow

jacobp100

comment created time in a month

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha 45610d2656405c93fd2833ddda406588378f97d0

.

view details

push time in a month

push eventjacobp100/technicalc-editor

Jacob Parker

commit sha eea605f4f4f569b9ed039565c7f62a2833802541

.

view details

push time in a month

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha b3cbeaf6f08fc216fcdc0e0c88a3967b53c3d414

.

view details

push time in a month

push eventjacobp100/technicalc-calculator

Jacob Parker

commit sha 6ed2f3c438fffa5e9dd9f8fc8ecf6fb20b8e9557

.

view details

push time in a month

issue commentth3rdwave/react-native-safe-area-context

V2 seems to have performance issues

So this is something I noticed too. I had to change that behaviour in my margins PR (#85) - maybe you could give that branch a try

panda0603

comment created time in a month

pull request commentth3rdwave/react-native-safe-area-context

Margin mode

Just pushed the Android implementation and updated the PR description

jacobp100

comment created time in a month

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha d76f95beb187ca6d6131e08a7fa003747a2897d8

Android status bar style

view details

push time in a month

push eventjacobp100/react-native-safe-area-context

Janic Duplessis

commit sha 33d16365d06aa63ed18cabe1f95bedf745a4f1e5

[ci] Improve yarn cache, use node 14

view details

Tomasz Sapeta

commit sha 32aa7a1f2d752a455c8660bfd235c3ebbbe800b0

Add missing UIKit import (#86) Co-authored-by: Tomasz Sapeta <tsapeta@users.noreply.github.com>

view details

Janic Duplessis

commit sha 3fb0a0ae72e059ffd03b8bf948420401d768ce46

2.0.2

view details

Janic Duplessis

commit sha 2763e182bfd2df1378da2b6b4c831c141977dd44

Remove tests from npm files

view details

Janic Duplessis

commit sha 80829e0150f34e8e0607463ba105b7975061c6c1

Fix initialWindowMetrics

view details

Janic Duplessis

commit sha 5ca1a05676e874403b86c031976c03c3d26ebae5

Rename some variables

view details

Janic Duplessis

commit sha efb3121c8a1a07f844e2ce8ceeab61da04131fce

Fix and reorganize tests

view details

Janic Duplessis

commit sha e736fe8b7207e151d5db3dab9361efcc93ab49f7

Add option to toggle statusbar in example

view details

Jacob Parker

commit sha f62e13d32f8c7e52364ed2bc5fbdf3e0cf57bb01

Merge branch 'master' into margin-mode

view details

push time in a month

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha 47e81bbdc45eba1cf0af85e023aeaa498fc2feaf

Add android margin support

view details

push time in a month

issue commentth3rdwave/react-native-safe-area-context

V2 seems to have performance issues

If you’re mixing the hooks and the native view, the native view will update before the hooks

I’ve got some comments about other stuff I’ve noticed too, but will add them to my margin PR

panda0603

comment created time in a month

issue commentth3rdwave/react-native-safe-area-context

V2 seems to have performance issues

Thanks for the repo! Are you able to attach videos that demonstrate the flicker and screen cut? Just so we're definitely talking about the same thing

Has anyone tried this with a native stack navigator from react-native-screens?

panda0603

comment created time in a month

issue commentth3rdwave/react-native-safe-area-context

SafeAreaView "edges" prop not working

What platform were you using, and was the view touching the edges you were putting the safe area edges on?

choibles

comment created time in a month

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha 7bf9e2e0b59d3a3b3f8a2eb6f98cfe5e87bb3d4e

Reset props when mode changes

view details

push time in a month

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha f5aee0358156687c69da58c264ea5269ee635e88

Fix nested SafeAreaViews (#84) On iOS, nested safe area views do not get their padding applied. I think this is because `setSafeAreaInsets` overrides the existing selector - but we don't need to do that as we have `safeAreaInsetsDidChange` This simplifies the logic a bit too

view details

Janic Duplessis

commit sha 25dd3324e858e152bb8dd2270b05764a653dad94

2.0.1

view details

Jacob Parker

commit sha ba4eb427d3a180c51016bcf34285121a4a78be87

Merge branch 'master' into margin-mode

view details

push time in a month

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha f5aee0358156687c69da58c264ea5269ee635e88

Fix nested SafeAreaViews (#84) On iOS, nested safe area views do not get their padding applied. I think this is because `setSafeAreaInsets` overrides the existing selector - but we don't need to do that as we have `safeAreaInsetsDidChange` This simplifies the logic a bit too

view details

Janic Duplessis

commit sha 25dd3324e858e152bb8dd2270b05764a653dad94

2.0.1

view details

push time in a month

PR opened th3rdwave/react-native-safe-area-context

WIP: margin mode

#50 Summary

Adding margin mode to safe area view

I noticed while doing this that a view's safe area is impacted by the position of itself. If you set a margin, the safe area gets decreased, so you get an infinite loop. To work around this, I had to look at the parent's safe area. I'm not sure if this will cause issues - what do you think?

Android has a different behaviour. We might need to specify in the readme that you will get differences if the view is not touching the edges you're applying the safe area to.

Note - I looked briefly border modes too - but they don't use floats instead of yoga values, so made it much more complicated to implement

Test Plan

+160 -96

0 comment

11 changed files

pr created time in a month

create barnchjacobp100/react-native-safe-area-context

branch : margin-mode

created branch time in a month

delete branch jacobp100/react-native-safe-area-context

delete branch : fix-nested-safe-area-views

delete time in a month

PR closed jacobp100/react-native-safe-area-context

Fix nested SafeAreaViews

Summary

On iOS, nested safe area views do not get their padding applied. I think this is because setSafeAreaInsets overrides the existing selector - but we don't need to do that as we have safeAreaInsetsDidChange

This simplifies the logic a bit too

Test Plan

Verify it SAVs work when nested - I did this in my personal project

+10 -12

1 comment

1 changed file

jacobp100

pr closed time in a month

pull request commentjacobp100/react-native-safe-area-context

Fix nested SafeAreaViews

Wrong repo lol

jacobp100

comment created time in a month

PR opened th3rdwave/react-native-safe-area-context

Fix nested SafeAreaViews

Summary

On iOS, nested safe area views do not get their padding applied. I think this is because setSafeAreaInsets overrides the existing selector - but we don't need to do that as we have safeAreaInsetsDidChange

This simplifies the logic a bit too

Test Plan

Verify it SAVs work when nested - I did this in my personal project

+10 -12

0 comment

1 changed file

pr created time in a month

PR opened jacobp100/react-native-safe-area-context

Fix nested SafeAreaViews

Summary

On iOS, nested safe area views do not get their padding applied. I think this is because setSafeAreaInsets overrides the existing selector - but we don't need to do that as we have safeAreaInsetsDidChange

This simplifies the logic a bit too

Test Plan

Verify it SAVs work when nested - I did this in my personal project

+10 -12

0 comment

1 changed file

pr created time in a month

fork jacobp100/react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!

fork in a month

issue openedth3rdwave/react-native-safe-area-context

mode = padding | margin | border

What do you think about allowing customisation of the property that the edges are assigned to? I have some separator components that in the current version I might format as,

<SafeAreaView edges={['left']} style={{ paddingLeft: 12 }}>
  <View style={{ height: 1, backgroundColor: 'grey' }} />
<SafeAreaView>

But if I could use margins, it would look like this,

<SafeAreaView mode="margin" edges={['left']} style={{ marginLeft: 12, height: 1, backgroundColor: 'grey' }} />

This wouldn't be a breaking change and I can do the work to implement it - I just wanted to get a go-ahead first!

created time in a month

issue commentth3rdwave/react-native-safe-area-context

SafeAreaView "edges" prop not working

Can you paste the JSX you're using? In the example, it's used like,

<SafeAreaView edges={['top', 'right', 'bottom', 'left']}>
  ...
</SafeAreaView>

The source you're looking at is for the web - and those constants are only internal and are for perf

choibles

comment created time in a month

issue openedmpiannucci/react-native-context-menu-view

onPress not ergonomic

The onPress event only gives back the title of what was pressed, which leads to code like this,

onPress= (e) => {
  const {name} = e.nativeEvent;
  if (name === actions[0].title) {
    navigation.push(MemoryAdd, {item});
  } else if (name === actions[1].title) {
    onDelete();
  }
}

It would be more useful if we got an index

Or better if you look at react-native-swipe-view, each action has a callback

Is there one way you prefer, and do you want a hand implementing this?

created time in a month

issue openedmpiannucci/react-native-context-menu-view

TypeScript broken

The JS file defines a default export, but the d.ts file defines a named export. Any attempt to import it in a TS project gives an error unless you write your own types

created time in a month

startedberstend/service-worker-router

started time in 2 months

delete branch jacobp100/react-native-safe-area-context

delete branch : new-safe-area-view

delete time in 2 months

pull request commentth3rdwave/react-native-safe-area-context

Native SafeAreaView

Thanks 😄

jacobp100

comment created time in 2 months

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha 22397ea6d58eb2e5563f5c5b329b504a94f71183

Update android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaView.java

view details

push time in 2 months

Pull request review commentth3rdwave/react-native-safe-area-context

Native SafeAreaView

 package com.th3rdwave.safeareacontext; +import static com.facebook.react.uimanager.UIManagerHelper.getReactContext;+ import android.annotation.SuppressLint; import android.content.Context;+import android.util.Log;

jacobp100

comment created time in 2 months

push eventjacobp100/react-native-safe-area-context

Jacob Parker

commit sha 5dfe4ea2a43148032b2b2875bb1287235c49288b

Update README.md Co-authored-by: Janic Duplessis <janicduplessis@gmail.com>

view details

push time in 2 months

pull request commentth3rdwave/react-native-safe-area-context

Native SafeAreaView (iOS only)

I've made the changes in your comments - let me know if I missed anything.

I added an Android implementation too. I'm not too confident with Android/Java, so any pointers on stuff like style would be useful!

For the edges, I went with an array of edges - it's similar to the format of the dataDetectorTypes prop.

jacobp100

comment created time in 2 months

more