How to fix this typing issue with Legend State, React Native, and Typescript

Question

I am having an issue including my Legend state within my React Context in Typescript. Legend version (@legendapp/state) is 3.0.0-alpha.38, React version is 18.2.0, and Typescript version is 5.3.3. My setup is:

type Store = {
  stuff: string;
}


export type StevenContextType = {
  store: Observable<Store>;
};

const store$ = useObservable({
  stuff: "yo"
});

export const StevenContext = React.createContext<StevenContextType | null>(null);

<StevenContext.Provider value={{ store$ }}>

And the error message I'm getting is: Type {store$: ObservableObjectFunctions<ObservableProps<{stuff: string}> & NonObservableProps<{stuff: string}>> & ObservableChildren<ObservableProps<{stuff: string}>> & ObservableFunctionChildren<NonObservableProps<{stuff: string}>>} is not assignable to type StevenContextType | null

Any help would be deeply appreciated; I am sure there is a typing nuance that I'm just not grasping, but I cannot figure it out.

Answer 1

in ts const store$ = useObservable({ stuff: "yo" });

Instead of useObservable hook, use observable to create the store. This is the correct function from the Legend library to create an observable object