lindboe Github contribution chart
lindboe Github Stats
lindboe Most Used Languages

Activity

22 Sep 2022

Merge

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Forked On 22 Sep 2022 at 09:25:17

Lindboe

Think this can be more concise, one idea: ```suggestion - **validation functions**: often times we may write functions like `isJson()` to validate that a value is a specific shape. If critical parts of our code rely on the correctness of this function, we want to test that code! ```
On 22 Sep 2022 at 09:25:17
Merge

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Forked On 22 Sep 2022 at 09:26:40

Lindboe

We say "one solution" but then don't enumerate anything else. I think it's important to mention somewhere here that if code's functionality relies on external systems, it may be more appropriate to test that code with E2E tests, rather than using mocking.
On 22 Sep 2022 at 09:26:40
Merge

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Forked On 22 Sep 2022 at 09:09:13

Lindboe

Current phrasing focuses a little much on the contrasting of opinions, I think; I think we can just focus on what we recommend. Here's an example alternative: > The most important question to ask when writing tests is "what code should be unit tested?" Not every line of code will benefit from a unit test. Typically, you'll want a unit test when you have code that can be run without external dependencies (like an API) that has some non-trivial logic. I don't think that's the best wording, but it's an example :)
On 22 Sep 2022 at 09:09:13
Merge

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Forked On 22 Sep 2022 at 09:24:20

Lindboe

```suggestion Some developers believe that every line of code should have a corresponding test. However, Infinite Red believes that some unit tests provide more values than others. Here are a few situations where we have found unit tests to be helpful in client projects: ```
On 22 Sep 2022 at 09:24:20
Merge

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Forked On 22 Sep 2022 at 09:24:14

Lindboe

```suggestion - **complicated regexes**: for many developers, regex's only make sense as you are writing them. Testing with a series of valid and invalid inputs can help ensure that they work as intended for future developers. ```
On 22 Sep 2022 at 09:24:14

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Merged On 22 Sep 2022 at 09:26:43

Lindboe

Commented On 22 Sep 2022 at 09:26:43

Lindboe

Fill out `docs/Testing.md`

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [x] README.md has been updated with your changes, if relevant

Describe your PR

Resolves https://github.com/infinitered/ignite/issues/2102

Merged On 22 Sep 2022 at 09:26:43

Lindboe

Commented On 22 Sep 2022 at 09:26:43
Create Branch

Lindboe

Description not entered by the user.

On 20 Sep 2022 at 10:53:07
Create Branch

Lindboe

Description not entered by the user.

On 20 Sep 2022 at 10:52:50

Lindboe

Reverse the nesting order, works

Pushed On 15 Sep 2022 at 05:33:47

Lindboe

Add margin, differentiate response areas a bit

Pushed On 15 Sep 2022 at 05:33:47

Lindboe

Start adding bottom sheet with scroll example. Found a way to avoid using _value too, hooray

Pushed On 15 Sep 2022 at 05:33:47

Lindboe

BottomSheet working mostly as it should. It still seems possible to drag it too low, but not much of an issue for now.

Pushed On 15 Sep 2022 at 05:33:47

Lindboe

Writing about potential ways to handle the nested gesture handlers. neither is great so far.

Pushed On 15 Sep 2022 at 05:33:47

Lindboe

AGH

Pushed On 15 Sep 2022 at 05:33:47

Lindboe

Missed some deps

Pushed On 15 Sep 2022 at 02:02:17

Lindboe

Set up screen structure

Pushed On 15 Sep 2022 at 02:02:17

Lindboe

prettier

Pushed On 15 Sep 2022 at 02:02:17

Lindboe

Clean up

Pushed On 15 Sep 2022 at 02:02:17
Create Branch

Lindboe

Demos demonstrating why you'd use react-native-gesture-handler

On 14 Sep 2022 at 09:08:03
Create Branch

Lindboe

Demos demonstrating why you'd use react-native-gesture-handler

On 14 Sep 2022 at 09:07:33
Merge

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Forked On 30 Aug 2022 at 08:09:34

Lindboe

Also shoudl be in i18n strings?
On 30 Aug 2022 at 08:09:34
Merge

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Forked On 30 Aug 2022 at 08:02:29

Lindboe

I think there are a good amount of times where non-pressable icons or images are better off "invisible" to screen readers -- it depends whether they're decorative or conveying important meaning (e.g., ✔️ vs ❌ ). So I'm not sure this is something we want by default? If it is, at least `{...WrapperProps}` should probably come after these props so they can be overridden (that's probably generally true, not just for a11y)
On 30 Aug 2022 at 08:02:29
Merge

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Forked On 30 Aug 2022 at 08:08:52

Lindboe

nit: can remove "on", (e.g., "Published 2/12/2022")
On 30 Aug 2022 at 08:08:52
Merge

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Forked On 30 Aug 2022 at 08:14:25

Lindboe

Are we going with long press here because the favorite button is nested in a pressable? This works, but I think a simpler design for screen readers that wouldn't affect visuals would involve _not_ nesting buttons. The majority of the card area could still be a button to listen, but the favorite icon button has its own separate pressable area. Thoughts?
On 30 Aug 2022 at 08:14:25
Merge

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Forked On 30 Aug 2022 at 08:09:12

Lindboe

Should this string template be in i18n strings?
On 30 Aug 2022 at 08:09:12

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Merged On 30 Aug 2022 at 08:14:55

Lindboe

Did a quick pass and left some notes 👍

Commented On 30 Aug 2022 at 08:14:55
Merge

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Forked On 30 Aug 2022 at 08:07:13

Lindboe

undefined if not `isFavorite`? why can't we just always use the one translation here, since they're different components when favorite/not favorite?
On 30 Aug 2022 at 08:07:13

Lindboe

2055 accessibility

Please verify the following:

  • [x] yarn ci:test jest tests pass with new tests, if relevant
  • [ ] README.md has been updated with your changes, if relevant (Will do this in another ticket)

Describe your PR

  • Adds an animation to the like button, and a long-press action (necessary to keep the like action accessible since it's a nested touchable)
  • Adds accessibility actions, labels and hints to the episode card
  • Adds basic accessibility props to Button, Icon, and TextField.

Visuals

like-animate

https://user-images.githubusercontent.com/6894653/187343748-ee9ff65f-a1d7-4f32-9bf2-ed7a0a7754f4.mov

https://user-images.githubusercontent.com/6894653/187343585-3a027446-711d-428a-8926-eaaff41b9218.mov

Merged On 30 Aug 2022 at 08:14:54

Lindboe

Did a quick pass and left some notes 👍

Commented On 30 Aug 2022 at 08:14:54

Lindboe

Simple, scalable state management.

Forked On 23 Aug 2022 at 06:02:56

Lindboe

[v6] Stack navigator nested in transparentModal stack navigator has a background

Current behavior

I have a Stack navigator with screenOptions presentation: "transparentModal". Inside it I have another Stack navigator, I expect it to have a transparent background, but it does not. In v5 it worked great.

Here's a quick example which reproduces the bug :

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Button, Pressable, View} from 'react-native';

const MyModal = ({navigation}) => (
  <Pressable
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
    }}
    onPress={navigation.goBack}>
    <View
      style={{
        backgroundColor: 'green',
        width: 250,
        height: 250,
      }}
    />
  </Pressable>
);

const HomeScreen = ({navigation}) => (
  <View
    style={{
      flex: 1,
      backgroundColor: 'red',
    }}>
    <Button title="Open modal" onPress={() => navigation.navigate('Modal')} />
    <Button
      title="Open modal in nested stack"
      onPress={() => navigation.navigate('NestedModal')}
    />
  </View>
);

const ModalStack = createStackNavigator();
const NestedStack = createStackNavigator();

const NestedStackNavigator = (props) => (
  <NestedStack.Navigator {...props}>
    <NestedStack.Screen name="NestedModalModal" component={MyModal} />
  </NestedStack.Navigator>
);

export const MainStackNavigator = () => (
  <ModalStack.Navigator
    screenOptions={{
      presentation: 'transparentModal',
    }}>
    <ModalStack.Screen name="Main" component={HomeScreen} />
    <ModalStack.Screen name="Modal" component={MyModal} />
    <ModalStack.Screen name="NestedModal" component={NestedStackNavigator} />
  </ModalStack.Navigator>
); 

The same component renders well if it is directly a screen of the transparentModal Stack, but if it is nested in another Stack, the background is no longer transparent. You can try out this code in the Snack below.

Expected behavior

I expect the screens in the nested navigator to have a transparent background as well. Just like it was in v5.

Reproduction

https://snack.expo.dev/AsFuqAV5c

Platform

  • [X] Android
  • [X] iOS
  • [X] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [ ] @react-navigation/bottom-tabs
  • [ ] @react-navigation/drawer
  • [ ] @react-navigation/material-bottom-tabs
  • [ ] @react-navigation/material-top-tabs
  • [X] @react-navigation/stack
  • [ ] @react-navigation/native-stack

Environment

| package | version | | -------------------------------------- | ------- | | @react-navigation/native | 6.0.2 | @react-navigation/stack | 6.0.7 | react-native-safe-area-context | 3.3.0 | react-native-screens | 3.6.0 | react-native-gesture-handler | 1.10.3 | react-native-reanimated | 2.3.0-alpha.2 | react-native-tab-view | 3.1.1 | react-native-pager-view | 5.4.1 | react-native | 0.65.1 | node | 14.15.5 | yarn | 1.22.5

Forked On 11 Aug 2022 at 11:08:08

Lindboe

Since theme is global, it can get changed back, which I think is maybe the issue @ErrorPro ran into?

The issue lies with the Background component here, which just uses the theme colors: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/views/Stack/CardStack.tsx#L564.

I think Background should ideally use transparent color if the first screen in the stack had a transparentModal presentation.

Although, I'm not sure why Background exists, since contentStyle also already sets background color for each card: https://github.com/react-navigation/react-navigation/blob/2f8cbfcc593d92080b73f9cd5d31f4d1ab22b768/packages/stack/src/views/Stack/CardContainer.tsx#L252-L258.

Since I'm not sure if Background is important to keep, I experimented with a patch to make it transparent for a transparentModal stack if the first screen is transparentModal. But I wasn't sure if I was doing it right; although we can set transparentModal on the navigator's screenOptions, it's not a configuration option for the whole navigator but only each screen, so I'm not sure if this works in all cases as intended:

-      <Background>
+      <Background style={scenes[0].descriptor.options.presentation === 'transparentModal' ? {backgroundColor: 'transparent'} : {}}> 

Commented On 11 Aug 2022 at 11:08:08

Lindboe

[FEAT][TNA] Fabric Component Guide

This PR fills in the details of the intro section for a Fabric Component.

It adds references to important parts of the architecture, together with the Skeleton of the next sections.

Forked On 08 Jul 2022 at 05:09:44

Lindboe

```suggestion It is also responsible for exporting all the constructs required by React Native: the class itself is annotated with `@ReactModule` and the `setText` method is annotated with `@ReactProp`. ```
On 08 Jul 2022 at 05:09:44

Lindboe

[FEAT][TNA] Fabric Component Guide

This PR fills in the details of the intro section for a Fabric Component.

It adds references to important parts of the architecture, together with the Skeleton of the next sections.

Forked On 08 Jul 2022 at 05:16:15

Lindboe

```suggestion Then, you need to install the new dependencies in your iOS project. To do so, you need to run these commands: ```
On 08 Jul 2022 at 05:16:15

Lindboe

[FEAT][TNA] Fabric Component Guide

This PR fills in the details of the intro section for a Fabric Component.

It adds references to important parts of the architecture, together with the Skeleton of the next sections.

Forked On 08 Jul 2022 at 05:26:57

Lindboe

```suggestion - the `react` block where you configure the **Codegen** process. Here, the following properties are required: ```
On 08 Jul 2022 at 05:26:57

Lindboe

[FEAT][TNA] Fabric Component Guide

This PR fills in the details of the intro section for a Fabric Component.

It adds references to important parts of the architecture, together with the Skeleton of the next sections.

Forked On 08 Jul 2022 at 05:30:47

Lindboe

```suggestion Now, configure the native component to generate the required code to integrate it with an app. For further information on how **Codegen** works, have a look [here](./pillars-codegen.md). ```
On 08 Jul 2022 at 05:30:47

Lindboe

[FEAT][TNA] Fabric Component Guide

This PR fills in the details of the intro section for a Fabric Component.

It adds references to important parts of the architecture, together with the Skeleton of the next sections.

Forked On 08 Jul 2022 at 05:29:16

Lindboe

```suggestion Now that the scaffolding code has been generated, it's time to write the Native code for your Fabric Component. ```
On 08 Jul 2022 at 05:29:16

Lindboe

[FEAT][TNA] Fabric Component Guide

This PR fills in the details of the intro section for a Fabric Component.

It adds references to important parts of the architecture, together with the Skeleton of the next sections.

Forked On 08 Jul 2022 at 06:03:42

Lindboe

This rephrasing looks pretty good! I have just a few smaller questions: * "integrated in the platform native layer and shared among all the React Native platforms": I also took a stab at rephrasing a similar idea in the TM guide, let me know what you think: https://github.com/facebook/react-native-website/pull/3168/files#diff-ba6eb9aa37edbf22f752c4267cb34a52ff888f9a12d1795335fdfaf6dfc61f05R13. * I am thinking "integrated in the platform native layer" and "shared among all the RN platforms" might sound like the same thing to some readers (although I know what you mean) -- they might both sound like "C++ code that the native language you're used to seeing on each platform can use"). I think to disambiguate the two ideas here we might want a more specific phrasing than "integrate". * I think "that component-specific logic needs to import and use to be properly adopted by React Native" still has some ambiguity for the reader. What is "component-specific logic"? What does "properly adopted" mean? Brainstorming a few ideas for other phrasing: * "This C++ code is scaffolding that your native component logic needs to utilize to work with the New Architecture" * "Then Codegen creates some C++ code, generating logic and interfaces that will help bridge your JavaScript code to the Native Platform. You can either add more C++ code or integrate the generated code with your Native Platform language of choice." (Also replaces the sentence before). * nit: "boilerplate code": this is perfectly fine, but I really liked @cortinico's suggestion of "scaffolding code" and used it a few times in the TM guide, so we might want to consider being consistent about that
On 08 Jul 2022 at 06:03:42