FEATURE: Add Discover in bottom tabs (#212)

* Fix links to group inboxes And remove fallback code for oldish instances. They now won't have group inbox links. (It's a very minor feature, we can easily live without them.) * FEATURE: Add Discover in new bottom tabs UI * Two fixes - skip BlurView on Android (doesn't work in dark mode) - add background color to the icon when it's white on light or black on dark * Version and build bumps * Apply suggestions from code review Co-authored-by: Jarek Radosz <[email protected]> * Additional cleanup * tiny code golf --------- Co-authored-by: Jarek Radosz <[email protected]>
discourse · Jun 20, 2024 · a43309f · a43309f
1 parent 3b5ace4
commit a43309f
Show file tree

Hide file tree

Showing 32 changed files with 1,090 additions and 672 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -98,7 +98,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 194
+        versionCode 198
         versionName MYAPP_VERSION
     }
 

diff --git a/fastlane/Fastfile b/fastlane/Fastfile
@@ -2,8 +2,8 @@ fastlane_require "base64"
 fastlane_require "fileutils"
 fastlane_require "json"
 
-IOS_APP_VERSION = "1.8.15"
-ANDROID_APP_VERSION = "1.8.14" # run `fastlane bootstrap` after editing this
+IOS_APP_VERSION = "2.0.2"
+ANDROID_APP_VERSION = "2.0.1" # run `fastlane bootstrap` after editing this
 PROJECT_NAME = "Discourse"
 IOS_TEAM_ID = "6T3LU73T8S"
 KEYS_REPOSITORY = "[email protected]:discourse-org/discourse-mobile-keys.git"

diff --git a/ios/Discourse.xcodeproj/project.pbxproj b/ios/Discourse.xcodeproj/project.pbxproj
@@ -479,7 +479,7 @@
 				CODE_SIGN_IDENTITY = "iPhone Developer";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 455;
+				CURRENT_PROJECT_VERSION = 493;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = 6T3LU73T8S;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 6T3LU73T8S;
@@ -524,7 +524,7 @@
 				CODE_SIGN_ENTITLEMENTS = Discourse/Discourse.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 455;
+				CURRENT_PROJECT_VERSION = 493;
 				DEVELOPMENT_TEAM = 6T3LU73T8S;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 6T3LU73T8S;
 				ENABLE_BITCODE = NO;

diff --git a/ios/Discourse/Info.plist b/ios/Discourse/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.8.15</string>
+	<string>2.0.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -37,7 +37,7 @@
 		<dict/>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>455</string>
+	<string>493</string>
 	<key>Fabric</key>
 	<dict>
 		<key>APIKey</key>

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -266,6 +266,9 @@ PODS:
   - React-jsinspector (0.71.7)
   - React-logger (0.71.7):
     - glog
+  - react-native-blur (4.4.0):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
   - react-native-key-pair (1.1.1):
     - React
   - react-native-root-view-background-color (1.0.2):
@@ -412,8 +415,6 @@ PODS:
     - React-RCTImage
   - RNSiriShortcuts (3.2.2):
     - React
-  - RNSVG (13.8.0):
-    - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
   - Yoga (1.14.0)
@@ -441,6 +442,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-key-pair (from `../node_modules/react-native-key-pair`)
   - react-native-root-view-background-color (from `../node_modules/react-native-root-view-background-color`)
   - react-native-safari-view (from `../node_modules/react-native-safari-view`)
@@ -470,7 +472,6 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSiriShortcuts (from `../node_modules/react-native-siri-shortcut`)
-  - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -520,6 +521,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-blur:
+    :path: "../node_modules/@react-native-community/blur"
   react-native-key-pair:
     :path: "../node_modules/react-native-key-pair"
   react-native-root-view-background-color:
@@ -578,8 +581,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSiriShortcuts:
     :path: "../node_modules/react-native-siri-shortcut"
-  RNSVG:
-    :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -608,6 +609,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: eaa5f71eb8f6861cf0e57f1a0f52aeb020d9e18e
   React-jsinspector: 9885f6f94d231b95a739ef7bb50536fb87ce7539
   React-logger: 3f8ebad1be1bf3299d1ab6d7f971802d7395c7ef
+  react-native-blur: 69ecfe61d81b32ee7baae10f5d17aeb4e2594b10
   react-native-key-pair: d45fb2e417ffb0fca307e9bbe22111aa38c3233f
   react-native-root-view-background-color: e7ba21b82c8b7b2a1f902750f08c9dc1a5b38cea
   react-native-safari-view: 955d7160d159241b8e9395d12d10ea0ef863dcdd
@@ -637,7 +639,6 @@ SPEC CHECKSUMS:
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   RNSiriShortcuts: cf7c7c69927abacc1bb9679cf680acc2f543fdae
-  RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   Yoga: d56980c8914db0b51692f55533409e844b66133c
 

diff --git a/ios/ShareExtension/Info.plist b/ios/ShareExtension/Info.plist
@@ -17,9 +17,9 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.8.15</string>
+	<string>2.0.2</string>
 	<key>CFBundleVersion</key>
-	<string>455</string>
+	<string>493</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionAttributes</key>

diff --git a/js/Discourse.js b/js/Discourse.js
@@ -14,10 +14,13 @@ import {
   NativeEventEmitter,
   Settings,
   StatusBar,
+  StyleSheet,
   ToastAndroid,
+  View,
 } from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import PushNotificationIOS from '@react-native-community/push-notification-ios';
 import Screens from './screens';
 import Site from './site';
@@ -33,6 +36,8 @@ import i18n from 'i18n-js';
 import * as RNLocalize from 'react-native-localize';
 import {addShortcutListener} from 'react-native-siri-shortcut';
 import {enableScreens} from 'react-native-screens';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import {BlurView} from '@react-native-community/blur';
 
 import BackgroundFetch from './platforms/background-fetch';
 
@@ -71,6 +76,7 @@ enableScreens();
 
 // TODO: Use NativeStackNavigator instead?
 const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
 
 class Discourse extends React.Component {
   refreshTimerId = null;
@@ -172,10 +178,14 @@ class Discourse extends React.Component {
     }
 
     const colorScheme = Appearance.getColorScheme();
+    const largerUI =
+      DeviceInfo.getDeviceType() === 'Tablet' ||
+      DeviceInfo.getDeviceType() === 'Desktop';
 
     this.state = {
       hasNotch: DeviceInfo.hasNotch(),
       deviceId: DeviceInfo.getDeviceId(),
+      largerUI: largerUI,
       theme: colorScheme === 'dark' ? themes.dark : themes.light,
     };
 
@@ -481,6 +491,30 @@ class Discourse extends React.Component {
     });
   }
 
+  _blurView(themeName) {
+    const positionStyle = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    };
+    if (Platform.OS !== 'ios') {
+      return (
+        <View
+          style={{
+            ...positionStyle,
+            backgroundColor: this.state.theme.background,
+          }}
+        />
+      );
+    }
+
+    return (
+      <BlurView blurType={themeName} blurAmount={15} style={positionStyle} />
+    );
+  }
+
   render() {
     // TODO: pass only relevant props to each screen component
     const screenProps = {
@@ -493,13 +527,16 @@ class Discourse extends React.Component {
       siteManager: this._siteManager,
       hasNotch: this.state.hasNotch,
       deviceId: this.state.deviceId,
+      largerUI: this.state.largerUI,
       toggleTheme: this._toggleTheme.bind(this),
     };
 
+    const theme = this.state.theme;
+
     return (
       <NavigationContainer>
-        <ThemeContext.Provider value={this.state.theme}>
-          <StatusBar barStyle={this.state.theme.barStyle} />
+        <ThemeContext.Provider value={theme}>
+          <StatusBar barStyle={theme.barStyle} />
           <Stack.Navigator
             initialRouteName="Home"
             presentation="modal"
@@ -510,20 +547,89 @@ class Discourse extends React.Component {
                 ...TransitionPresets.ModalSlideFromBottomIOS,
               };
             }}>
-            <Stack.Screen name="Home">
-              {props => (
-                <Screens.Home {...props} screenProps={{...screenProps}} />
-              )}
-            </Stack.Screen>
-            <Stack.Screen name="Notifications">
-              {props => (
-                <Screens.Notifications
-                  {...props}
-                  screenProps={{...screenProps}}
-                />
+            <Stack.Screen name="HomeWrapper">
+              {stackProps => (
+                <Tab.Navigator
+                  screenOptions={{
+                    headerShown: false,
+
+                    tabBarStyle: {
+                      position: 'absolute',
+                      borderTopWidth: StyleSheet.hairlineWidth,
+                      borderTopColor: theme.grayBorder,
+                    },
+                    tabBarLabelStyle: {
+                      fontSize: this.state.largerUI ? 16 : 12,
+                    },
+                    tabBarActiveTintColor: theme.blueCallToAction,
+                    tabBarInactiveTintColor: theme.grayTabInactiveColor,
+                    tabBarBackground: () => this._blurView(theme.name),
+                  }}>
+                  <Tab.Screen
+                    name="Home"
+                    options={{
+                      // eslint-disable-next-line react/no-unstable-nested-components
+                      tabBarIcon: ({color}) => (
+                        <FontAwesome5
+                          name={'home'}
+                          size={18}
+                          color={color}
+                          solid
+                        />
+                      ),
+                    }}>
+                    {props => (
+                      <Screens.Home {...props} screenProps={{...screenProps}} />
+                    )}
+                  </Tab.Screen>
+                  <Tab.Screen
+                    name="Discover"
+                    options={{
+                      // eslint-disable-next-line react/no-unstable-nested-components
+                      tabBarIcon: ({color}) => (
+                        <FontAwesome5
+                          name={'compass'}
+                          size={18}
+                          color={color}
+                          solid
+                        />
+                      ),
+                    }}>
+                    {props => (
+                      <Screens.Discover
+                        {...props}
+                        screenProps={{...screenProps}}
+                      />
+                    )}
+                  </Tab.Screen>
+                  <Tab.Screen
+                    name="Notifications"
+                    options={{
+                      // eslint-disable-next-line react/no-unstable-nested-components
+                      tabBarIcon: ({color}) => (
+                        <FontAwesome5
+                          name={'bell'}
+                          size={18}
+                          color={color}
+                          solid
+                        />
+                      ),
+                    }}>
+                    {props => (
+                      <Screens.Notifications
+                        {...props}
+                        screenProps={{...screenProps}}
+                      />
+                    )}
+                  </Tab.Screen>
+                </Tab.Navigator>
               )}
             </Stack.Screen>
-            <Stack.Screen name="Settings">
+            <Stack.Screen
+              name={i18n.t('settings')}
+              options={{
+                headerShown: true,
+              }}>
               {props => (
                 <Screens.Settings {...props} screenProps={{...screenProps}} />
               )}

diff --git a/js/ProgressBar.js b/js/ProgressBar.js
@@ -3,7 +3,7 @@
 
 import React, {useContext} from 'react';
 import {Dimensions, View} from 'react-native';
-import {Bar} from 'react-native-progress';
+import Bar from 'react-native-progress/Bar';
 import {ThemeContext} from './ThemeContext';
 
 const ProgressBar = ({progress}) => {

diff --git a/js/ThemeContext.js b/js/ThemeContext.js
@@ -9,13 +9,15 @@ export const themes = {
     grayUI: '#919191',
     grayUILight: '#e9e9e9',
     graySubtitle: '#919191',
+    grayTabInactiveColor: '#454545',
     grayTitle: '#222',
     yellowUIFeedback: '#ffffa6',
     blueCallToAction: '#08c',
     blueUnread: '#0aadff',
     redDanger: '#ee512a',
     purpleChat: '#ad17f8',
     greenPrivateUnread: '#01a84c',
+    tagButtonTextColor: '#444',
     barStyle: 'dark-content',
     name: 'light',
   },
@@ -27,13 +29,15 @@ export const themes = {
     grayUI: '#666',
     grayUILight: '#232323',
     graySubtitle: '#666',
+    grayTabInactiveColor: '#888',
     grayTitle: '#999',
     yellowUIFeedback: '#403f30',
     blueCallToAction: '#0F82AF',
     blueUnread: '#0F82AF',
     purpleChat: '#ad17f8',
     redDanger: '#e45735',
     greenPrivateUnread: '#01a84c',
+    tagButtonTextColor: '#999',
     barStyle: 'light-content',
     name: 'dark',
   },