CODEWITHSUNDEEP
react-nativeexpo
Alireza
Alireza

Reputation: 145

How to restart app (react native and expo)

I use expo so I've no access to android folder.

I want to restart my app for first time. How can I do that?

I use react-native-restart, but not wroking and I have an error now:

null is not an object (evaluating 'x.default.restart;)

Codes:

  componentDidMount() {
    if (I18nManager.isRTL) {
      I18nManager.forceRTL(false);
      RNRestart.Restart();
    }
  }

How Can I restart my app?

Upvotes: 14

Views: 26735

Answers (8)

Broda Noel
Broda Noel

Reputation: 2006

In 2024, the best way to reload an app in an Expo project, is:

import { reloadAppAsync } from "expo";
reloadAppAsync()

You can check the documentation in https://docs.expo.dev/versions/latest/sdk/expo/#reloadappasyncreason

Upvotes: 2

Alxndr BRL
Alxndr BRL

Reputation: 401

Using Expo 51+ SDK:


    import { reloadAppAsync } from 'expo'
    
    export default function Component() {
       return (
           <Button onPress={() => reloadAppAsync()}>Reload app</Button>
       )
    }

Upvotes: 3

Tib
Tib

Reputation: 69

For Expo SDK 45+ please use

import * as Updates from "expo-updates"
Updates.reloadAsync()

The module fiction-expo-restart is not maintained anymore.

Upvotes: 5

danb4r
danb4r

Reputation: 431

What I did was to build a Restart component that is not a const but a var. And an applyReload() function that sets that var to an empty component <></> if the reload bool state is true, triggering the re-render.

The re-render will reinstate the Restart var back to its original structure, but a new instance is then created, effectively reloading everything that is inside the <Restart> tag:

My App.tsx:

export default function App() {
  const [reload, setReload] = useState(false);

  type Props = { children: ReactNode };
  var Restart = ({ children }: Props) => {
    return <>{children}</>;
  };
  const applyReload = () => {
    if (reload) {
      Restart = ({ children }: Props) => {
        return <></>;
      };
      setReload(false);
    }
  };
  useEffect(applyReload);

  useEffect(() => {
    // put some code here to modify your app..

    // test reload after 6 seconds
    setTimeout(() => {
      setReload(true);
    }, 6000);
  }, []);

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <PaperProvider theme={appTheme}>
          <NavigationContainer theme={appTheme} documentTitle={{ enabled: false }}>
            <AppContext.Provider value={appContext}>
              <Restart>
                <MyMainAppComponent />
              </Restart>
            </AppContext.Provider>
          </NavigationContainer>
        </PaperProvider>
      </SafeAreaView>
    </SafeAreaProvider>
  );

I also added the 'setReload' state function to my '<AppContext.Provider>' so anywhere down my App it is possible to trigger the App reload.

Upvotes: 0

MadaShindeInai
MadaShindeInai

Reputation: 590

import { StatusBar } from "expo-status-bar";
import React from "react";
import { Button, I18nManager, StyleSheet, Text, View } from "react-native";
import * as Updates from "expo-updates";

async function toggleRTL() {
  await I18nManager.forceRTL(I18nManager.isRTL ? false : true);
  await Updates.reloadAsync();
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{new Date().toString()}</Text>
      <Text>{I18nManager.isRTL ? "RTL" : "LTR"}</Text>
      <View style={{ marginVertical: 5 }} />
      <Button title="Reload app" onPress={() => Updates.reloadAsync()} />
      <View style={{ marginVertical: 5 }} />
      <Button title="Toggle RTL" onPress={() => toggleRTL()} />
      <StatusBar style="auto" />
    </View>
  );
}

https://github.com/brentvatne/updates-reload/blob/master/App.js It's the only working way for me. When i try automatically reload app in useEffect - it crashes, so i make a separate screen where i ask user to press button to reload app

Upvotes: 1

Faisal Shahzad
Faisal Shahzad

Reputation: 733

I've had the same problem for over a month, nothing helped me, so I developed a library to accomplish this, simple install it using:

npm i fiction-expo-restart

and import it like:

import {Restart} from 'fiction-expo-restart';

and then when you want to perform a restart, use: 

Restart();

Note in case this answer gets old, you can check the library here: https://www.npmjs.com/package/fiction-expo-restart

Upvotes: 12

Lpaydat
Lpaydat

Reputation: 436

I have faced the same issue and found this solution somewhere.

You can try to use Updates from expo like this:

import { Updates } from 'expo';

Updates.reload();

Upvotes: 12

Mustafa Buyukcelebi
Mustafa Buyukcelebi

Reputation: 162

If you are using react-native-code-push library, you can restart with this;

import CodePush from 'react-native-code-push';
CodePush.restartApp();

Upvotes: 0

Related Questions