App Tabs and Search

[samholmes]

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

• Yes
• No

Dependencies

#4683

Requirements

If you have made any visual changes to the GUI. Make sure you have:

• Tested on iOS device
• Tested on Android device
• Tested on small-screen device (iPod Touch)
• Tested on large-screen device (tablet)

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1205826921045596

[swansontec]

The state provider system needs a little clean-up, but the animation stuff seems OK. I would need a sidebar to understand it a little better, but I don't see any red flags aside from the window dimensions issue.

[swansontec]

This isn't really a HOC, since it takes a callback function, not a component. It needs another name and another home.

I am also worried about updating the context value on every render - I think this will force a re-render of each linked child. According to the docs, React uses === on the context value to decide whether or not an update has occurred. Using a raw return {...} will never be === equal, so the update will always take place.

So, if we want to implement these contexts correctly, we need to do something like this:

export const SceneDrawerContext = React.createContext(undefined)

export function SceneDrawerProvider(props: { children: React.ReactNode }) {
  const [isRatioDisabled, setIsRatioDisabled] = React.useState(false)
  const drawerHeight = useSharedValue(0)
  const drawerOpenRatio = useSharedValue(1)
  const drawerOpenRatioStart = useSharedValue(1)

  const value = React.useMemo(
    () => ({
      drawerHeight,
      drawerOpenRatio,
      drawerOpenRatioStart,
      isRatioDisabled,
      setIsRatioDisabled
    }),
    [drawerHeight, drawerOpenRatio, drawerOpenRatioStart, isRatioDisabled]
  )

  return <SceneDrawerContext.Provider value={value}>{props.children}</SceneDrawerContext.Provider>
}

I'm not sure if your withContextProvider helper function adds much, compared to just doing things directly as above. Maybe you can refactor your helper to somehow help with the memorization, but I don't have a clear idea about what this would look like.

Another idea is to combine makeUseContextValue and withContextProvider into a single step - createStateProvider. This would reflect the StateProvier nomenclature used later, and will create both the hook and the provider in one step.

[swansontec]

Yeah, the state provider stuff looks really nice now!

[swansontec]

Optional: You could put interface Props { children: React.ReactNode } at the top, and then you could do React.FunctionComponent<Props> and ({children}: Props) instead of duplicating the props type.