Paul Ourada

Owner, 4Bablio
๐Ÿงช

React Hooks Packages?

๐Ÿงช
Anyone using a react hook package such as react-use or React Query to access useful device states, or manage queries in order to avoid the dreaded React warning about not updating components when unmounted?

react-use: https://github.com/streamich/react-use
React Query: https://react-query.tanstack.com/overview

Great blog on managing react effects after unmount: https://www.benmvp.com/blog/handling-async-react-component-effects-after-unmount/

ProgressCircle with segments

๐Ÿงช
Anyone know how to wrangle a ProgressCircle into displaying X of Y total segments? Also appears that ProgressCircle is hardwired to show % as it's a subclass of AnimatedCircleProgress. So maybe I should use that? Or CircleProgress?

Thx, Paul

New IconButton in Buttons?

๐Ÿงช
Can't find it in the Knowledge Base. What is the API? Does it take an onPress attribute/prop?

DatePicker-Underline runtime error

๐Ÿงช
I did a search here and didn't find this particular issue with DatePicker. I am getting a strange error when I use DatePicker on an actual device. I don't think I'm doing anything strange with it.ย 

In code it looks like this:
<DatePicker
    style={styles.DatePickerJz}
    label="Birth Date"
    mode="date"
    leftIconMode="inset"
    type="underline"
    date={birthDate}
    onDateChange={birthDate => setBirthDate(birthDate)}
    error={true}
/>
birthDate is a state variable and on initialization is set to undefined. I get the following error when rendering BabyDetailsScreen, where DatePicker is used:
TypeError: null is not an object (evaluating 'date.getMonth')

This error is located at:
    in DatePicker (created by Context.Consumer)
    in ThemedComponent (created by withTheme(DatePicker))
    in withTheme(DatePicker) (at BabyDetailsScreen.js:201)
    in RCTView (at View.js:34)
    in View (at BabyDetailsScreen.js:108)
    in RCTView (at View.js:34)
    in View (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at BabyDetailsScreen.js:103)
    in RCTView (at View.js:34)
    in View (at ScreenContainer.tsx:62)
    in RCTView (at View.js:34)
    in View (at SafeAreaView.js:41)
    in ForwardRef(SafeAreaView) (at ScreenContainer.tsx:53)
    in ScreenContainer (created by Context.Consumer)
    in ThemedComponent (created by withTheme(ScreenContainer))
    in withTheme(ScreenContainer) (at BabyDetailsScreen.js:83)
    in BabyDetailsScreen (created by Context.Consumer)
    in ThemedComponent (created by withTheme(BabyDetailsScreen))
    in withTheme(BabyDetailsScreen) (at SceneView.tsx:122)
*NOTE:* When I set the date prop directly to undefined, DatePicker works normally, only I can't see the new date set because it's not being captured in the date prop.

The only way I have been able to get this to work is the following:ย 
const [birthDate, setBirthDate] = React.useState(new Date().toISOString());
   :
// make certain to not overwrite birthDate with invalid ISO // date string in useEffect() data fetches from DB
   :
    <DatePicker
        style={styles.DatePickerJz}
        label="Birth Date"
        mode="date"
        leftIconMode="inset"
        type="underline"
        date={new Date(birthDate)}
        onDateChange={newBirthDate => setBirthDate(newBirthDate)}
        error={!isEmpty(birthDate)}
    />

If the date prop is not set to a Date object or undefined, then I get some form of the error above. It seems to me that DatePicker should be able to create a Date object from a string passed into the date prop. Is this documented somewhere? Where is the documentation for @draftbit/ui?

Thanks,
Paul