Merge branch 'master' of https://github.com/LNReader/lnreader

* 'master' of https://github.com/LNReader/lnreader:
  Feat: new icons and splashscreen (LNReader#974)
  Fix: Webview theme (LNReader#977)

android/app/build.gradle

@@ -158,6 +158,8 @@ dependencies {
     implementation 'com.facebook.soloader:soloader:0.10.5+'
 
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
+    implementation project(':react-native-lottie-splash-screen')
+
 
     def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
     def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";

android/app/src/main/AndroidManifest.xml

@@ -32,6 +32,7 @@
 		android:largeHeap="true"
 		android:label="@string/app_name"
 		android:icon="@mipmap/ic_launcher"
+		android:roundIcon="@mipmap/ic_launcher"
 		android:allowBackup="true"
 		android:theme="@style/AppTheme"
 		android:usesCleartextTraffic="true">

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

@@ -5,21 +5,19 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_gravity="center"
-    android:background="@color/colorPrimaryDark"
+    android:background="@color/splashscreen_background"
     android:gravity="center"
     android:orientation="vertical"
     android:scaleType="centerCrop"
     android:navigationBarColor="#333333"
     tools:context=".MainActivity">
-
     <com.airbnb.lottie.LottieAnimationView
         android:id="@+id/lottie"
-        android:layout_width="200dp"
-        android:layout_height="200dp"
-        android:layout_gravity="center_horizontal"
-        android:orientation="horizontal"
-        android:paddingLeft="25dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="130dp"
+        app:lottie_rawRes="@raw/loading"
         app:lottie_autoPlay="true"
         app:lottie_loop="false"
-        app:lottie_rawRes="@raw/loading" />
+        />
 </LinearLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@mipmap/ic_launcher_background" />
-    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
-    <monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

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

@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <resources>
   <color name="iconBackground">#FFFFFF</color>
-  <color name="splashscreen_background">#202125</color>
+  <color name="splashscreen_background">#1F2024</color>
   <color name="colorPrimary">#023c69</color>
   <color name="colorPrimaryDark">#202125</color>
   <color name="navigationBarColor">#202125</color>
   <color name="notification_icon_color">#00adb5</color>
-  <color name="ic_launcher_background">#222831</color>
 </resources>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#132C33</color>
+</resources>

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

@@ -3,7 +3,7 @@
   encoding="UTF-8"
   standalone="yes"
 ?>
-<resources>
+<resources xmlns:tools="http://schemas.android.com/tools">
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <!-- Customize your theme here. -->
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
@@ -12,6 +12,7 @@
     <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
     <item name="android:statusBarColor">@color/colorPrimaryDark</item>
   </style>
+
   <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
     <item name="android:statusBarColor">@color/colorPrimaryDark</item>
     <item name="android:windowActionBar">false</item>
@@ -22,6 +23,9 @@
   <style name="Theme.App.SplashScreen" parent="AppTheme">
     <!-- Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually -->
     <!-- Customize your splash screen theme here -->
+    <item name="android:windowSplashScreenBackground" tools:targetApi="s">@color/colorPrimaryDark</item>
+    <item name="android:windowSplashScreenAnimatedIcon" tools:targetApi="s" >@drawable/invisible</item>
+    <item name="android:windowSplashScreenAnimationDuration" tools:targetApi="s">1000</item>
     <!-- <item name="icon">@drawable/no_icon</item> -->
     <item name="android:windowBackground">@drawable/splashscreen</item>
   </style>

src/screens/WebviewScreen/WebviewScreen.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import WebView, { WebViewNavigation } from 'react-native-webview';
 import { ProgressBar } from 'react-native-paper';
 
+import { useBackHandler } from '@hooks';
 import { useTheme } from '@hooks/persisted';
 import { WebviewScreenProps } from '@navigators/types';
 import { getUserAgent } from '@hooks/persisted/useUserAgent';
@@ -27,6 +28,14 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
     setCanGoForward(e.canGoForward);
   };
 
+  useBackHandler(() => {
+    if (canGoBack) {
+      webViewRef.current?.goBack();
+      return true;
+    }
+    return false;
+  });
+
   return (
     <>
       <Appbar
@@ -44,7 +53,6 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
         visible={progress !== 1}
       />
       <WebView
-        startInLoadingState
         userAgent={getUserAgent()}
         ref={webViewRef}
         source={{ uri }}

src/screens/WebviewScreen/components/Appbar.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { Share } from 'react-native';
+import { Share, View, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { IconButton, Menu } from 'react-native-paper';
 import WebView from 'react-native-webview';
-import { Appbar as PaperAppbar, Menu } from 'react-native-paper';
-import * as WebBrowser from 'expo-web-browser';
+import * as Linking from 'expo-linking';
 
 import { WebviewScreenProps } from '@navigators/types';
 import { getString } from '@strings/translations';
@@ -13,9 +14,9 @@ interface AppbarProps {
   title: string;
   theme: ThemeColors;
   currentUrl: string;
-  canGoBack: Boolean;
-  canGoForward: Boolean;
-  webView: WebView;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  webView: RefObject<WebView>;
   navigation: WebviewScreenProps['navigation'];
 }
 
@@ -28,64 +29,108 @@ const Appbar: React.FC<AppbarProps> = ({
   webView,
   navigation,
 }) => {
-  const [visible, setVisible] = useState(false);
+  const { top } = useSafeAreaInsets();
+  const [menuVisible, setMenuVisible] = useState(false);
 
   return (
-    <PaperAppbar.Header style={{ backgroundColor: theme.surface }}>
-      <PaperAppbar.BackAction
+    <View
+      style={{
+        paddingTop: top,
+        backgroundColor: theme.surface,
+        flexDirection: 'row',
+      }}
+    >
+      <IconButton
         icon="close"
         iconColor={theme.onSurface}
         onPress={() => navigation.goBack()}
+        theme={{ colors: { ...theme } }}
       />
-      <PaperAppbar.Content title={title} />
-      <PaperAppbar.Action
-        icon="arrow-left"
-        iconColor={theme.onSurface}
-        disabled={!canGoBack}
-        onPress={() => webView.current?.goBack()}
-      />
-      <PaperAppbar.Action
-        icon="arrow-right"
-        iconColor={theme.onSurface}
-        disabled={!canGoForward}
-        onPress={() => webView.current?.goForward()}
-      />
-      <Menu
-        visible={visible}
-        onDismiss={() => setVisible(false)}
-        anchor={
-          <PaperAppbar.Action
-            icon="dots-vertical"
-            iconColor={theme.onSurface}
-            onPress={() => setVisible(true)}
-          />
-        }
-      >
-        <Menu.Item
-          title={getString('webview.refresh')}
-          titleStyle={{ color: theme.onSurface }}
-          onPress={() => webView.current?.reload()}
-        />
-        <Menu.Item
-          title={getString('webview.share')}
-          titleStyle={{ color: theme.onSurface }}
-          onPress={() => Share.share({ message: currentUrl })}
-        />
-        <Menu.Item
-          title={getString('webview.openInBrowser')}
-          titleStyle={{ color: theme.onSurface }}
-          onPress={() => WebBrowser.openBrowserAsync(currentUrl)}
-        />
-        <Menu.Item
-          title={getString('webview.clearData')}
-          titleStyle={{ color: theme.onSurface }}
-          onPress={() => {
-            webView.current?.clearCache(true);
-            showToast(getString('webview.dataDeleted'));
+
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text
+          style={{
+            color: theme.onSurface,
+            textAlign: 'center',
           }}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {title}
+        </Text>
+      </View>
+      <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+        <IconButton
+          icon="arrow-left"
+          iconColor={theme.onSurface}
+          disabled={!canGoBack}
+          onPress={() => webView.current?.goBack()}
+          theme={{ colors: { ...theme } }}
+        />
+
+        <IconButton
+          icon="arrow-right"
+          iconColor={theme.onSurface}
+          disabled={!canGoForward}
+          onPress={() => webView.current?.goForward()}
+          theme={{ colors: { ...theme } }}
         />
-      </Menu>
-    </PaperAppbar.Header>
+
+        <Menu
+          visible={menuVisible}
+          onDismiss={() => setMenuVisible(false)}
+          anchor={
+            <IconButton
+              icon="dots-vertical"
+              iconColor={theme.onSurface}
+              onPress={() => setMenuVisible(true)}
+              theme={{ colors: { ...theme } }}
+            />
+          }
+          style={{ backgroundColor: theme.surface2 }}
+          contentStyle={{ backgroundColor: theme.surface2 }}
+        >
+          <Menu.Item
+            title={getString('webview.refresh')}
+            style={{ backgroundColor: theme.surface2 }}
+            titleStyle={{ color: theme.onSurface }}
+            onPress={() => {
+              setMenuVisible(false);
+              webView.current?.reload();
+            }}
+          />
+          <Menu.Item
+            title={getString('webview.share')}
+            style={{ backgroundColor: theme.surface2 }}
+            titleStyle={{ color: theme.onSurface }}
+            onPress={() => {
+              setMenuVisible(false);
+              Share.share({ message: currentUrl });
+            }}
+          />
+          <Menu.Item
+            title={getString('webview.openInBrowser')}
+            style={{ backgroundColor: theme.surface2 }}
+            titleStyle={{ color: theme.onSurface }}
+            onPress={() => {
+              setMenuVisible(false);
+              Linking.openURL(currentUrl);
+            }}
+          />
+          <Menu.Item
+            title={getString('webview.clearData')}
+            style={{ backgroundColor: theme.surface2 }}
+            titleStyle={{ color: theme.onSurface }}
+            onPress={() => {
+              setMenuVisible(false);
+              webView.current?.clearCache?.(true);
+              webView.current?.reload();
+              showToast(getString('webview.dataDeleted'));
+            }}
+          />
+        </Menu>
+      </View>
+    </View>
   );
 };