samuel
samuel

Reputation: 487

React Native, global useState?

I have a Fire class, and the uid return undefined if the user is not connected, string (his uid) if he is connected.

Sometime my render depend on this.

For example :

const [auth, setAuth] = useState<undefined|string>(Fire.shared.uid);

[...]

<Text>{(auth == undefined) ? "not authentificated" : "great")}</Text>

We can imagine the user is not connect so the text will be not authentificated. Now he will Sign in or Sign up in an other page, so the uid variable in Fire class will change. So how I'm suppose to change the state value?

There is no useState global or something like that?

Thanks.

Upvotes: 0

Views: 6065

Answers (2)

Zahra Mirali
Zahra Mirali

Reputation: 545

you should use context:

page-context.js

export const PageContext= React.createContext();

app.js

const App = () => {
const [auth, setAuth] = useState<undefined|string>(undefined);

return(
    <PageContext.Provider value={[auth, setAuth]}>
       <NavigationContainer> // your routes
    </PageContext.Provider>)

OtherScreen.js

function OtherScreen() {
    const [auth] = useContext(PageContext);
    return (<Text>{(auth == undefined) ? "not authentificated" : "great")}</Text>)
}

Sign.js

 function Sign() {
    const [auth, setAuth] = useContext(PageContext);
    return (<Button onPress={()=>setAuth("myUid)} />)
 }

Upvotes: 5

HS NANDEESH GOWDA
HS NANDEESH GOWDA

Reputation: 131

you can use react js context api to have this feature : https://reactjs.org/docs/context.html#updating-context-from-a-nested-component,

or you can use third party libraries like redux or mobx to have a global state

redux : https://redux.js.org/ mobx : https://mobx.js.org/README.html

Upvotes: 1

Related Questions