update.reloadAsync doesn't work for me

Expo SDK
1
  1. SDK Version:36.0.0
  2. Platforms(Android/iOS/web/all): android

I want to force my app to reload after changing layout to RTL this is my code :

 if (!I18nManager.isRTL) {
      I18nManager.forceRTL(true);
      await Updates.reloadAsync();
    }

Im using async keyword in front of my function name , but my app doesn’t reload automatically , I need to close the app manually to RTL take effect , any way to force app to reload , thanks

2

Hey @azzero,

It looks like you’re using the method from the new Updates module rather than the one bundled with SDK36 which is Updates.reload(). Also, it might be worth using Updates.reloadFromCache() if you’re looking for a quicker reload experience and aren’t concerned with fetching new JS bundle updates.

https://docs.expo.io/versions/v36.0.0/sdk/updates/

Cheers,
Adam

3

thanks adam for your response , that’s true with SDK36 I need to use Updates.reload() , but it stay didn’t reload from the first lunch even I use reloadFromCache , I dont know how to handle reload in app.js , do I need to reload after checking if I18nManager.isRTL ==false and on else rendering my app or I need to handle reload with an other way , my idea is to reload app after forcing app to RTL , any help plz Im stuck

4

Hi @azzero

This works for me. (Tested on an Android device):

$ expo diagnostics

  Expo CLI 3.27.4 environment info:
    System:
      OS: macOS Mojave 10.14.5
      Shell: 5.0.18 - /usr/local/bin/bash
    Binaries:
      Node: 12.18.3 - /usr/local/opt/node@12/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.6 - /usr/local/opt/node@12/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.9.3 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.6010548
      Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^36.0.0 => 36.0.2 
      react: 16.9.0 => 16.9.0 
      react-dom: 16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4 
      react-native-web: ^0.11.7 => 0.11.7 
    Expo Workflow: managed

import React from "react";
import { Button, I18nManager, StyleSheet, Text, View } from "react-native";
import { Updates } from "expo";

function switchToLTR() {
  I18nManager.forceRTL(false);
  Updates.reloadFromCache();
}

function switchToRTL() {
  I18nManager.forceRTL(true);
  Updates.reloadFromCache();
}

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ flexDirection: "row" }}>
        <View style={[styles.block, { backgroundColor: "red" }]}>
          <Text style={styles.text}>Start</Text>
        </View>
        <View style={[styles.block, { backgroundColor: "white" }]} />
        <View style={[styles.block, { backgroundColor: "blue" }]}>
          <Text style={styles.text}>End</Text>
        </View>
      </View>
      <View style={{ width: "100%", flexDirection: "row", justifyContent: "space-around", paddingTop: 20 }}>
        <Button onPress={switchToLTR} title="Left to Right" />
        <Button onPress={switchToRTL} title="Right to Left" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  block: {
    justifyContent: "center",
    alignItems: "center",
    width: 100,
    height: 100
  },
  text: {
    color: "white"
  }
});
5

thanks @wodin for your help , but I need to force RTL without click on any button from the first lunch , any idea ?

6

OK, so the problem seems to be that when you call I18nManager.forceRTL(true) it does not necessarily update it immediately. When I tried calling Updates.reloadFromCache() immediately after I18nManager.forceRTL(true) in useEffect() it did not work, but if I wait a bit before trying to reload it works.

@adamjnav, I suspect this is not the correct way to do this. How should one ensure that the I18nManager.forceRTL(true) call has taken effect before reloading?

import React, { useEffect, useState } from "react";
import { Button, I18nManager, StyleSheet, Text, View } from "react-native";
import { Updates } from "expo";

export default function App() {
  const [direction, setDirection] = useState(I18nManager.isRTL ? "RTL" : "LTR");

  useEffect(() => {
    console.log("isRTL?", I18nManager.isRTL);
    if (!I18nManager.isRTL) {
      console.log("Forcing RTL");
      I18nManager.forceRTL(true);
      console.log("isRTL after force?", I18nManager.isRTL);
      setTimeout(() => Updates.reloadFromCache(), 500);
    }
  });

  return (
    <View style={styles.container}>
      <Text style={{ marginBottom: 20 }}>{direction}</Text>
      <View style={{ flexDirection: "row" }}>
        <View style={[styles.block, { backgroundColor: "red" }]}>
          <Text style={styles.text}>Start</Text>
        </View>
        <View style={[styles.block, { backgroundColor: "white" }]} />
        <View style={[styles.block, { backgroundColor: "blue" }]}>
          <Text style={styles.text}>End</Text>
        </View>
      </View>
      <View style={{ marginTop: 20 }}>
        <Button
          onPress={() => {
            setDirection("LTR");
            I18nManager.forceRTL(false);
            Updates.reloadFromCache();
          }}
          title="Left to Right"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  block: {
    justifyContent: "center",
    alignItems: "center",
    width: 100,
    height: 100
  },
  text: {
    color: "white"
  }
});
1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.