__tests__/auth/__snapshots__/LoginForm.js.snap

@@ -324,5 +324,301 @@ exports[`LoginForm component should renders correctly 1`] = `
       FORGOT PASSWORD
     </Text>
   </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        Object {
+          "paddingTop": 15,
+        },
+        Object {
+          "marginTop": 20,
+        },
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "fontSize": 18,
+          },
+          Object {
+            "paddingTop": 1,
+          },
+          Object {
+            "fontFamily": "Ionicons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          Object {},
+        ]
+      }
+    >
+      
+    </Text>
+    <Text
+      onPress={[Function]}
+      style={
+        Array [
+          Object {
+            "color": "white",
+          },
+        ]
+      }
+    >
+        
+      English
+    </Text>
+  </View>
+  <Modal
+    animationType="none"
+    hardwareAccelerated={false}
+    hideModalContentWhileAnimating={false}
+    onModalHide={[Function]}
+    onModalWillHide={[Function]}
+    onModalWillShow={[Function]}
+    onRequestClose={[Function]}
+    scrollOffset={0}
+    scrollOffsetMax={0}
+    scrollTo={null}
+    supportedOrientations={
+      Array [
+        "portrait",
+        "landscape",
+      ]
+    }
+    swipeThreshold={100}
+    transparent={true}
+    visible={false}
+  >
+    <View
+      accessible={true}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": "black",
+          "bottom": 0,
+          "height": 1334,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": 750,
+        }
+      }
+    />
+    <View
+      hideModalContentWhileAnimating={false}
+      onModalHide={[Function]}
+      onModalWillHide={[Function]}
+      onModalWillShow={[Function]}
+      pointerEvents="box-none"
+      scrollOffset={0}
+      scrollOffsetMax={0}
+      scrollTo={null}
+      style={
+        Object {
+          "flex": 1,
+          "justifyContent": "center",
+          "margin": 37.5,
+          "transform": Array [
+            Object {
+              "translateY": 0,
+            },
+          ],
+        }
+      }
+      supportedOrientations={
+        Array [
+          "portrait",
+          "landscape",
+        ]
+      }
+      swipeThreshold={100}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "white",
+            },
+            Object {
+              "height": 300,
+              "paddingBottom": 8,
+            },
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "fontSize": 16,
+              },
+              Object {
+                "textAlign": "center",
+              },
+              Object {
+                "backgroundColor": "#4690D6",
+              },
+              Object {
+                "padding": 10,
+              },
+              Object {
+                "color": "white",
+              },
+            ]
+          }
+        >
+          Language
+        </Text>
+        <View
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <RCTPicker
+              items={
+                Array [
+                  Object {
+                    "label": "Spanish",
+                    "textColor": undefined,
+                    "value": "es",
+                  },
+                  Object {
+                    "label": "English",
+                    "textColor": undefined,
+                    "value": "en",
+                  },
+                ]
+              }
+              onChange={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              selectedIndex={1}
+              style={
+                Array [
+                  Object {
+                    "height": 216,
+                  },
+                  Object {
+                    "fontSize": 14,
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              isTVSelectable={true}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "white",
+                  "borderColor": "#777777",
+                  "borderRadius": 15,
+                  "borderWidth": 1,
+                  "margin": 4,
+                  "opacity": 1,
+                  "padding": 4,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#777777",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                 
+                Cancel
+                 
+              </Text>
+            </View>
+            <View
+              accessible={true}
+              isTVSelectable={true}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "white",
+                  "borderColor": "#4690D6",
+                  "borderRadius": 15,
+                  "borderWidth": 1,
+                  "margin": 4,
+                  "opacity": 1,
+                  "padding": 4,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#4690D6",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                 
+                Ok
+                 
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </Modal>
 </View>
 `;

src/auth/LoginForm.js

@@ -12,6 +12,8 @@ import {
   KeyboardAvoidingView,
 } from 'react-native';
 
+import Icon from 'react-native-vector-icons/Ionicons';
+
 import authService from './AuthService';
 import { CommonStyle } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
@@ -21,6 +23,7 @@ import { Button } from 'react-native-elements'
 import i18n from '../common/services/i18n.service';
 import testID from '../common/helpers/testID';
 import logService from '../common/services/log.service';
+import ModalPicker from '../common/components/ModalPicker';
 
 /**
  * Login Form
@@ -33,9 +36,17 @@ export default class LoginForm extends Component {
     msg: '',
     twoFactorToken: '',
     twoFactorCode: '',
-    inProgress: false
+    inProgress: false,
+    showLanguages: false,
   };
 
+  componentWillMount() {
+    this.setState({
+      language: i18n.getCurrentLocale()
+    });
+  }
+
+
   /**
    * Render
    */
@@ -56,10 +67,40 @@ export default class LoginForm extends Component {
         <View style={[CommonStyle.rowJustifyEnd, CommonStyle.paddingTop3x]}>
           <Text style={[CommonStyle.colorWhite, ComponentsStyle.link]} onPress={this.onForgotPress}>{i18n.t('auth.forgot')}</Text>
         </View>
+        <View style={[CommonStyle.rowJustifyCenter, CommonStyle.paddingTop3x, CommonStyle.marginTop4x]}>
+          <Icon name="md-flag" size={18} color="white" style={{paddingTop:1}}/>
+          <Text style={[CommonStyle.colorWhite]} onPress={this.showLanguages}>  {i18n.getCurrentLanguageName()}</Text>
+        </View>
+        <ModalPicker
+          onSelect={this.languageSelected}
+          onCancel={this.cancel}
+          show={this.state.showLanguages}
+          title={i18n.t('language')}
+          valueField="value"
+          labelField="name"
+          value={this.state.language}
+          items={i18n.getSupportedLocales()}
+        />
       </KeyboardAvoidingView>
     );
   }
 
+  showLanguages = () => {
+    this.setState({showLanguages: true});
+  }
+
+  /**
+   * Language selected
+   */
+  languageSelected = (language) => {
+    this.setState({language, showLanguages: false});
+    i18n.setLocale(language);
+  }
+
+  cancel = () => {
+    this.setState({showLanguages: false});
+  }
+
   getButtons() {
     const buttons = [
       <Button

src/common/services/i18n.service.js

@@ -115,6 +115,13 @@ class I18nService {
     i18n.locale = locale;
   }
 
+  getCurrentLanguageName() {
+    const locale = i18n.currentLocale();
+    const obj = this.getSupportedLocales().find(l => l.value === locale);
+    if (obj) return obj.name;
+    return '';
+  }
+
   /**
    * get supported locales
    */