language localise

App.js

@@ -4,6 +4,8 @@ import {Provider} from 'react-redux';
 import store from './src/store/store';
 import Routes from './src/Routes/Routes';
 import SplashScreen from 'react-native-splash-screen';
+import { NativeBaseProvider } from 'native-base';
+
 
 const App = () => {
   useEffect(() => {
@@ -14,7 +16,9 @@ const App = () => {
   }, []);
   return (
     <Provider store={store}>
+    <NativeBaseProvider>
       <Routes />
+      </NativeBaseProvider>
     </Provider>
   );
 };

index.js

@@ -5,5 +5,6 @@
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import i18n from './src/Languages/i18n';
 
 AppRegistry.registerComponent(appName, () => App);

package.json

@@ -13,11 +13,16 @@
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@reduxjs/toolkit": "^1.8.1",
+    "i18next": "^21.8.4",
+    "native-base": "^3.4.5",
     "react": "17.0.2",
+    "react-i18next": "^11.16.9",
     "react-native": "0.68.2",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",
     "react-native-splash-screen": "^3.3.0",
+    "react-native-svg": "^12.3.0",
     "react-redux": "^8.0.2"
   },
   "devDependencies": {

src/Components/SplashScreen/SplashScreen.js

-import {View, Text} from 'react-native';
+import {View, Text, Button, I18nManager} from 'react-native';
 import React from 'react';
-import SplashScreen from 'react-native-splash-screen'
+import SplashScreen from 'react-native-splash-screen';
 import {useEffect} from 'react';
+import {useTranslation} from 'react-i18next';
 
 const SplashScreenComp = () => {
-  
+  const {t, i18n} = useTranslation();
+  useEffect(()=>{
+    i18n.changeLanguage("ur")
+    I18nManager.forceRTL(false)
+  }, [])
   return (
     <View>
-      <Text>SplashScreen</Text>
+      <Button
+        onPress={() => {i18n.changeLanguage("en"); I18nManager.forceRTL(false)}}
+        title="English"
+        color="#841584"
+      />
+      <Button
+        style={{marginTop: 210}}
+        onPress={() => {i18n.changeLanguage("ur"); I18nManager.forceRTL(true)}}
+        title="URDU"
+        color="#000"
+      />
+      <Text>{t('welcometext')}</Text>
     </View>
   );
 };

src/Languages/english.json

+{
+    "translation": {
+        "welcometext": "Welcome to Baitusalam",
+        "username": "User Name",
+        "password": "Password"
+    }
+}
\ No newline at end of file

src/Languages/i18n.js

+import i18next from 'i18next';
+import {initReactI18next} from 'react-i18next';
+import english from './english.json';
+import urdu from './urdu.json';
+
+i18next.use(initReactI18next).init({
+  compatibilityJSON: 'v3',
+  lng: 'en',
+  resources: {
+    en: english,
+    ur: urdu,
+  },
+  react: {
+    useSuspense: false,
+  },
+});
+
+export default i18next;

src/Languages/urdu.json

+{
+    "translation": {
+        "welcometext": "بیت السلام میں خوش آمدید",
+        "username": "صارف کا نام",
+        "password": "پاس ورڈ"
+
+    }
+}
\ No newline at end of file

src/Routes/Routes.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import SplashScreenComp from '../Components/SplashScreen/SplashScreen';
+import Login from '../Screens/Login/Login';
 
 const Stack = createNativeStackNavigator();
 
@@ -10,10 +11,15 @@ const Routes = () => {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen
+        {/* <Stack.Screen
           name="Home"
           component={SplashScreenComp}
           options={{headerShown: false}}
+        /> */}
+        <Stack.Screen
+          name="Login"
+          component={Login}
+          options={{headerShown: false}}
         />
       </Stack.Navigator>
     </NavigationContainer>

src/Screens/Login/Login.js

+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TextInput,
+  I18nManager,
+  Button,
+} from 'react-native';
+import React, {useEffect} from 'react';
+import styles from './style';
+import {useState} from 'react';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {t} from 'i18next';
+import SplashScreenComp from '../../Components/SplashScreen/SplashScreen';
+import {useTranslation} from 'react-i18next';
+
+const Login = () => {
+  const [text, setText] = useState();
+  const {t, i18n} = useTranslation();
+  useEffect(() => {
+    i18n.changeLanguage('en');
+    I18nManager.forceRTL(false);
+  }, []);
+
+  const changeLanguage = lang => {
+    if (lang === 'en') {
+      i18n.changeLanguage('en');
+      I18nManager.forceRTL(false);
+      RNRe
+    } else if (lang === 'ur') {
+      i18n.changeLanguage('ur');
+      I18nManager.forceRTL(true);
+    }
+  };
+  return (
+    <KeyboardAwareScrollView>
+      {/* <SplashScreenComp /> */}
+
+      <Button
+        onPress={() => changeLanguage('en')}
+        title="English"
+        color="#841584"
+      />
+      <Button
+        style={{marginTop: 210}}
+        onPress={() => changeLanguage('ur')}
+        title="URDU"
+        color="#000"
+      />
+      <View style={styles.container}>
+        <View style={styles.imgContainer}>
+          <Image
+            style={{width: 150, height: 230}}
+            source={require('../../Assets/images/baitussalam-logo.png')}
+          />
+        </View>
+        <View style={styles.inputContainer}>
+          <View style={styles.passwordInput}>
+            <Text style={{width: '20%'}}>{t('username')}</Text>
+            <TextInput
+              style={styles.input}
+              onChangeText={() => setText()}
+              value={text}
+            />
+          </View>
+          <View style={styles.passwordInput}>
+            <Text style={{width: '20%'}}>{t('password')}:</Text>
+            <TextInput
+              style={styles.input}
+              onChangeText={() => setText()}
+              value={text}
+              maxLength={120}
+            />
+          </View>
+        </View>
+      </View>
+    </KeyboardAwareScrollView>
+  );
+};
+
+export default Login;

src/Screens/Login/style.js

+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  imgContainer: {
+    flex: 0.5,
+    width: '100%',
+    alignItems: 'center',
+  },
+  inputContainer: {
+    flex: 1,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 40,
+    width: '80%',
+    borderBottomWidth: 1,
+  },
+  passwordInput: {
+    // flexDirection: 'row-reverse',
+    flexDirection: "row",
+    alignItems: 'center',
+    width: '100%',
+  },
+});
+
+export default styles;