Comments (14)
I came to the conclusion that achieving this without the I18nManager is better for now, due to the overall lack of support. Instead, we can play with Flexbox, although it requires spending more time. Here is a quick Snack about this.
import React, { Component } from 'react';
import { Button, LayoutAnimation, Text, UIManager, View } from 'react-native';
export default class App extends Component {
state = { rtl: false };
componentWillMount() {
if (UIManager.setLayoutAnimationEnabledExperimental)
UIManager.setLayoutAnimationEnabledExperimental(true);
}
componentWillUpdate() {
LayoutAnimation.spring();
}
render() {
const rtlText = this.state.rtl && { textAlign: 'right', writingDirection: 'rtl' };
const rtlView = this.state.rtl && { flexDirection: 'row-reverse' };
return (
<View style={{ flex: 1, justifyContent: 'center', padding: 40 }}>
<Text style={[{ color: '#444', fontSize: 36, marginBottom: 40 }, rtlText]}>
{this.state.rtl ? 'أهلاً بالعالم!' : 'Hello World!'}
</Text>
<View style={[{ flexDirection: 'row', marginBottom: 40 }, rtlView]}>
<View style={{ height: 40, width: 40, backgroundColor: '#db4437' }} />
<View style={{ height: 40, width: 40, backgroundColor: '#0f9d58' }} />
<View style={{ height: 40, width: 40, backgroundColor: '#4285f4' }} />
</View>
<Button
color="#444"
onPress={() => this.setState({ rtl: !this.state.rtl })}
title={this.state.rtl ? 'English' : 'العربية'}
/>
</View>
);
}
}
from expo.
+1 react-native-i18n 😊
from expo.
done! https://docs.getexponent.com/versions/v11.0.0/sdk/util.html#Exponent.Util.getCurrentLocaleAsync
from expo.
For people finding this issue and still struggling - i made a sample how to translate your expo app using react-i18next and includes:
- setting language from device language using expo.utils
- react-navigation (you will need that at some point)
https://github.com/locize/locize-examples/tree/master/react-native-expo
from expo.
Important when looking for an i18n package: Just use this one: https://github.com/fnando/i18n-js
AlexanderZaytsev/react-native-i18n#77 (comment)
from expo.
I just hope that Expo.Util.reload() would work as well on a stand alone app. Didn't get to test it yet.
It doesn't.
from expo.
I just hope that Expo.Util.reload() would work as well on a stand alone app. Didn't get to test it yet.
Yes it does @sonaye. Why do you think it doesn't? Did you try it?
from expo.
@eldadcaspi react-i18next gives you the option to get the information for a language if rtl or ltr: http://i18next.com/docs/api/#dir
but not more...but suggestions are welcome...
from expo.
Coming in sdk11!
from expo.
Another solution => https://github.com/xcarpentier/ex-react-native-i18n
from expo.
Hi guys,
Do you happen to know if any of the above libraries would support RTL language as a default language and would assist to load the app in RTL layout mode?
I'm working on a single RTL language app (Hebrew) and am struggling with loading my Expo based app on RTL layout mode as a default. I wonder if a localization library like the ones you suggest here could help (currently i'm using i18Manager.forceRTL(), but it requires a restart of the app to load the app in RTL mode).
Thanks!
from expo.
Thanks @jamuhl,
Solved it for now with a dirty fix.
So, if anyone might find it useful, when you're using expo for a single rtl language app and need the user to load the app in rtl layout mode at the very first time she'd open the app (without asking her to restart), just reload the app till the forceURL() kicks in (one reload, feels pretty seamless).
In my main.js:
componentWillMount() {
if (!I18nManager.isRTL){
I18nManager.allowRTL(true);
I18nManager.forceRTL(true);
Expo.Util.reload();
}
}
- I just hope that Expo.Util.reload() would work as well on a stand alone app. Didn't get to test it yet.
- You don't have to put in in a lifecycle method, worked fine above the root component as well
from expo.
@jesseruder I have tried it yes, Util.reload() does reload the experience, but the rtl/ltr I18nManager props don't take effect properly (they do when running in the expo client but not as standalone, same code), you'd have to ask the user to close the app completely or to detect the locale of the device at start up and work your way out from there.
from expo.
Ok that sounds like a separate issue. Feel free to create a new issue about that.
from expo.
Related Issues (20)
- expo-calendar "Add Only" iOS permission HOT 1
- Expo Android app crashing right after launch, iOS working, new NativeEventEmitter() was called HOT 2
- Streaming audio recording HOT 1
- expo-camera `enableTorch` prop does nothing if set to true HOT 2
- Issue with Expo 51 and Android Release Build HOT 1
- `expo-video` listener events not triggered on the web (+ expo snacks fails to run `expo-video` on android)
- Unresolved reference: BuildConfig on expo-notifications 28 HOT 2
- [expo-contacts] presentContactPickerAsync gives no result on backpress Android device HOT 1
- [expo-contacts] presentFormAsync conflicts with presentContactPickerAsync HOT 1
- [expo-contacts] [iOS] addContactAsync - issue on urlAddresses and socialProfiles HOT 1
- The application works on Expo Go, but when I open it as APK on my phone, it closes like this. Where could the problem be? HOT 3
- [docs] Need to create channel to make update work HOT 1
- use expo-notifications for device push message HOT 2
- ReferenceError: Property 'string' doesn't exist engine: hermes HOT 1
- Deep linking through web url doesn't open my expo app in android HOT 9
- [Expo SDK 51] [Android] [expo-dev-client] - Hot reload not working HOT 4
- [expo-image-picker] HOT 1
- [docs] double scroll issue
- [expo-file-system] On Android, methods are not being executed, stuck forever (downloadAsync)
- Stuck on "Gradle build failed" for 2 years already :) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from expo.