Project Initialize

App.js

 import {View, Text} from 'react-native';
-import React from 'react';
+import React, {useEffect} from 'react';
 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(() => {
+    // setTimeout(() => {
+    // }, 2000);
+    SplashScreen.hide();
+    // SplashScreen.hide();
+  }, []);
   return (
-      <Provider store={store}>
-        <Routes />
-      </Provider>
+    <Provider store={store}>
+    <NativeBaseProvider>
+      <Routes />
+      </NativeBaseProvider>
+    </Provider>
   );
 };
 

android/app/build.gradle

@@ -267,6 +267,10 @@ dependencies {
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
+    implementation project(':react-native-restart')
+
+    implementation project(':lottie-react-native')
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.fbjni'
     }

android/app/src/main/AndroidManifest.xml

@@ -10,6 +10,20 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
+
+
+      <!-- <activity
+        android:name=".SplashActivity"
+        android:theme="@style/SplashTheme"
+        android:label="@string/app_name"
+        android:exported="true">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity> -->
+
+
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

android/app/src/main/java/com/baitussalam_app/MainActivity.java

 package com.baitussalam_app;
 
+import android.os.Bundle;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
 
-public class MainActivity extends ReactActivity {
+import org.devio.rn.splashscreen.SplashScreen;
 
+public class MainActivity extends ReactActivity {
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    SplashScreen.show(this);  // here
+    super.onCreate(savedInstanceState);
+  }
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

android/app/src/main/java/com/baitussalam_app/MainApplication.java

@@ -4,6 +4,10 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.airbnb.android.react.lottie.LottiePackage;
+import com.reactnativerestart.RestartPackage;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/app/src/main/res/drawable/background_splash.xml

+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+<item android:drawable="@color/blue" />
+<item android:width="200dp" android:height="200dp" android:drawable="@drawable/baitussalam" android:gravity="center" />
+
+
+</layer-list>
\ No newline at end of file

android/app/src/main/res/layout/launch_screen.xml

+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical" android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/blue"
+    android:gravity="center">
+
+    <ImageView android:layout_width="200dp" android:layout_height="200dp" android:layout_marginTop="24dp" android:src="@drawable/baitussalam" android:scaleType="centerCrop" />
+</RelativeLayout>
\ No newline at end of file

android/app/src/main/res/values/colors.xml

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="blue">#ffffff</color>
+    <color name="primary_dark">#ffffff</color>
+    <!-- <color name="status_bar_color">#ffffff</color> -->
+
+</resources>
\ No newline at end of file

android/app/src/main/res/values/styles.xml

@@ -5,5 +5,12 @@
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>
+    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
+        <!-- <item name="colorPrimaryDark">@color/status_bar_color</item> -->
+    </style>
 
+    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:windowBackground">@drawable/background_splash</item>
+         <item name="android:statusBarColor">@color/blue</item>
+    </style>
 </resources>

android/settings.gradle

 rootProject.name = 'baitussalam_app'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':lottie-react-native'
+project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
+include ':react-native-restart'
+project(':react-native-restart').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-restart/android')
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')

help.txt

+React Native Splash Screen Youtube Video
+
+https://www.youtube.com/watch?v=yFrx8HZlNtI
\ No newline at end of file

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);

ios/Podfile

@@ -19,6 +19,14 @@ target 'baitussalam_app' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+
+  pod 'react-native-restart', :path => '../node_modules/react-native-restart'
+
+  pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
+
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+
   target 'baitussalam_appTests' do
     inherit! :complete
     # Pods for testing

ios/baitussalam_app/Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -51,5 +51,24 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

package.json

@@ -10,13 +10,23 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.17.5",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@reduxjs/toolkit": "^1.8.1",
+    "i18next": "^21.8.4",
+    "lottie-react-native": "^5.1.3",
+    "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-restart": "^0.0.24",
     "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-native-vector-icons": "^9.1.0",
     "react-redux": "^8.0.2"
   },
   "devDependencies": {

src/Components/SplashScreen/SplashScreen.js

-import { View, Text } from 'react-native'
-import React from 'react'
+import {View, Text, Button, I18nManager} from 'react-native';
+import React from 'react';
+import SplashScreen from 'react-native-splash-screen';
+import {useEffect} from 'react';
+import {useTranslation} from 'react-i18next';
 
-const SplashScreen = () => {
+const SplashScreenComp = () => {
+  const {t, i18n} = useTranslation();
+  useEffect(()=>{
+    i18n.changeLanguage("ur")
+    I18nManager.forceRTL(false)
+  }, [])
   return (
     <View>
-      <Text>How are You</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>
-  )
-}
+  );
+};
 
-export default SplashScreen
+export default SplashScreenComp;
\ No newline at end of file

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

@@ -2,7 +2,8 @@ import {View, Text} from 'react-native';
 import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import SplashScreen from '../Components/SplashScreen/SplashScreen';
+import SplashScreenComp from '../Components/SplashScreen/SplashScreen';
+import Login from '../Screens/Login/Login';
 
 const Stack = createNativeStackNavigator();
 
@@ -10,12 +11,15 @@ const Routes = () => {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen
+        {/* <Stack.Screen
           name="Home"
-          component={SplashScreen}
-          options={{
-            headerShown: false,
-          }}
+          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,
+  TouchableOpacity,
+} 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';
+import RNRestart from 'react-native-restart';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {default as AntDesignIcon} from 'react-native-vector-icons/AntDesign';
+import LottieView from 'lottie-react-native';
+
+const Login = () => {
+  const [text, setText] = useState();
+  const [animation, setAnimation] = useState(true);
+  const {t, i18n} = useTranslation();
+  useEffect(() => {
+    setTimeout(() => {
+      setAnimation(false);
+      console.log('false');
+    }, 3000);
+    const getData = async () => {
+      try {
+        const value = await AsyncStorage.getItem('language');
+        console.log(value, 'This is get value');
+        if (value !== null) {
+          if (value === 'en') {
+            I18nManager.forceRTL(false);
+            i18n.changeLanguage('en');
+          } else if (value === 'ur') {
+            I18nManager.forceRTL(true);
+            i18n.changeLanguage('ur');
+          }
+        } else {
+          try {
+            await AsyncStorage.setItem('language', 'ur');
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    getData();
+  }, []);
+
+  const english = async () => {
+    try {
+      await AsyncStorage.setItem('language', 'en');
+      I18nManager.forceRTL(false);
+      RNRestart.Restart();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const urdu = async () => {
+    try {
+      await AsyncStorage.setItem('language', 'ur');
+      I18nManager.forceRTL(true);
+      RNRestart.Restart();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    // <KeyboardAwareScrollView>
+
+      // {/* <Button onPress={() => english()} title="English" color="#841584" />
+      // <Button
+      //   style={{marginTop: 210}}
+      //   onPress={() => urdu()}
+      //   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')}
+          />
+          <LottieView
+            source={require('../../Assets/book-animation.json')}
+            autoPlay={animation}
+            loop={false}
+            width={180}
+            height={300}
+            stop={true}
+            speed={1.5}
+          />
+        </View>
+        <View style={styles.inputContainer}>
+          <View style={styles.passwordInput}>
+            <TextInput
+              style={styles.input}
+              onChangeText={() => setText()}
+              value={text}
+              placeholder={t('username')}
+            />
+          </View>
+          <View style={styles.passwordInput}>
+            <TextInput
+              style={[styles.input, I18nManager.isRTL ? 'right' : 'left']}
+              onChangeText={() => setText()}
+              value={text}
+              placeholder={t('password')}
+              // secureTextEntry={true}
+            />
+          </View>
+        </View>
+        <TouchableOpacity style={styles.buttonContainer}>
+          <AntDesignIcon name="right" style={styles.buttonIcon} />
+        </TouchableOpacity>
+      </View>
+    // </KeyboardAwareScrollView>
+  );
+};
+
+export default Login;

src/Screens/Login/style.js

+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingLeft: 30,
+    paddingRight: 30,
+    justifyContent: 'center',
+    // alignItems: 'center',
+  },
+  imgContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  inputContainer: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 40,
+    width: '100%',
+    borderBottomWidth: 1,
+    // textAlign: "left",
+    marginTop: 30,
+    fontSize: 18,
+  },
+  passwordInput: {
+    // flexDirection: 'row-reverse',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  buttonContainer: {
+    width: 50,
+    height: 50,
+    backgroundColor: '#ec5c26',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 30,
+    margin: 20,
+    marginRight: 0,
+    marginLeft: 0,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 11,
+    },
+    shadowOpacity: 0.57,
+    shadowRadius: 15.19,
+    elevation: 11,
+  },
+  buttonIcon: {
+    fontSize: 26,
+    color: 'white',
+  },
+});
+
+export default styles;