Cleanup SegmentedControl (Filter) component

android/app/build.gradle

@@ -98,7 +98,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 222
+        versionCode 223
         versionName MYAPP_VERSION
     }
 

fastlane/Fastfile

@@ -3,7 +3,7 @@ fastlane_require "fileutils"
 fastlane_require "json"
 
 IOS_APP_VERSION = "2.0.9"
-ANDROID_APP_VERSION = "2.0.5" # run `fastlane bootstrap` after editing this
+ANDROID_APP_VERSION = "2.0.6" # run `fastlane bootstrap` after editing this
 PROJECT_NAME = "Discourse"
 IOS_TEAM_ID = "6T3LU73T8S"
 KEYS_REPOSITORY = "git@github.com:discourse-org/discourse-mobile-keys.git"

ios/Discourse.xcodeproj/project.pbxproj

@@ -481,7 +481,7 @@
 				CODE_SIGN_IDENTITY = "iPhone Developer";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 577;
+				CURRENT_PROJECT_VERSION = 582;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = 6T3LU73T8S;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 6T3LU73T8S;
@@ -526,7 +526,7 @@
 				CODE_SIGN_ENTITLEMENTS = Discourse/Discourse.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 577;
+				CURRENT_PROJECT_VERSION = 582;
 				DEVELOPMENT_TEAM = 6T3LU73T8S;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 6T3LU73T8S;
 				ENABLE_BITCODE = NO;

ios/Discourse/Info.plist

@@ -37,7 +37,7 @@
 		<dict/>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>577</string>
+	<string>582</string>
 	<key>Fabric</key>
 	<dict>
 		<key>APIKey</key>

ios/ShareExtension/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>2.0.9</string>
 	<key>CFBundleVersion</key>
-	<string>577</string>
+	<string>582</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionAttributes</key>

js/screens/CommonComponents/Filter.ios.js

@@ -0,0 +1,33 @@
+/* @flow */
+'use strict';
+
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import SegmentedControl from '@react-native-community/segmented-control';
+import {ThemeContext} from '../../ThemeContext';
+
+const Filter = props => {
+  const theme = useContext(ThemeContext);
+  return (
+    <View
+      style={{
+        flex: 0,
+        backgroundColor: theme.background,
+        marginHorizontal: props.marginHorizontal,
+      }}>
+      <SegmentedControl
+        values={props.tabs}
+        style={{
+          margin: 12,
+          opacity: 0.85,
+        }}
+        selectedIndex={props.selectedIndex}
+        onChange={event => {
+          props.onChange(event.nativeEvent.selectedSegmentIndex);
+        }}
+      />
+    </View>
+  );
+};
+
+export default Filter;

js/screens/CommonComponents/index.js

@@ -0,0 +1,8 @@
+/* @flow */
+'use strict';
+
+import Filter from './Filter';
+
+module.exports = {
+  Filter: Filter,
+};

js/screens/HomeScreen.js

@@ -3,14 +3,14 @@
 
 import React from 'react';
 import {
-  Animated,
   ActivityIndicator,
   Platform,
   RefreshControl,
   StyleSheet,
   View,
 } from 'react-native';
 import Components from './HomeScreenComponents';
+import Common from './CommonComponents';
 import {ThemeContext} from '../ThemeContext';
 import i18n from 'i18n-js';
 import {donateShortcut} from 'react-native-siri-shortcut';
@@ -34,8 +34,6 @@ class HomeScreen extends React.Component {
       authProcessActive: false,
       showTopicList: false,
       selectedTabIndex: 0,
-      scrollYOffset: 0,
-      showHotToggle: new Animated.Value(1),
     };
 
     this._onChangeSites = e => this.onChangeSites(e);
@@ -161,38 +159,33 @@ class HomeScreen extends React.Component {
 
   _renderTopicListToggle() {
     const theme = this.context;
-    const hotToggle = this.state.showHotToggle;
-    const maxHeight = hotToggle.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 90],
-    });
 
     const publicSiteCount = this._siteManager.sites.filter(
       site => site.loginRequired === false,
     ).length;
 
     if (publicSiteCount > 0) {
       return (
-        <Animated.View
+        <View
           style={{
             flex: 0,
             backgroundColor: theme.background,
             borderColor: theme.grayBorder,
             borderWidth: StyleSheet.hairlineWidth,
-            maxHeight: maxHeight,
             width: '100%',
           }}>
-          <Components.HotToggle
+          <Common.Filter
             selectedIndex={this.state.selectedTabIndex}
             tabs={[i18n.t('sites'), i18n.t('hot_topics')]}
+            marginHorizontal={'20%'}
             onChange={index => {
               this.setState({
                 showTopicList: Boolean(index),
                 selectedTabIndex: index,
               });
             }}
           />
-        </Animated.View>
+        </View>
       );
     }
   }
@@ -219,36 +212,6 @@ class HomeScreen extends React.Component {
     this._siteManager.updateOrder(from, to);
   }
 
-  _scrollEventHandler(e) {
-    // this hides/shows the hot topic toggle bar on scroll
-    // for non tablets only (given reduced space)
-    if (Platform.isPad) {
-      return;
-    }
-
-    const currentOffset = e.nativeEvent.contentOffset.y;
-    const diff = currentOffset - (this.state.scrollYOffset || 0);
-    if (currentOffset > 10 && Math.abs(diff) < 5) {
-      // small buffer if scroll direction is not yet clear
-    } else if (diff < 0 || currentOffset < 5) {
-      Animated.timing(this.state.showHotToggle, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(this.state.showHotToggle, {
-        toValue: 0,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-    }
-
-    this.setState({
-      scrollYOffset: currentOffset,
-    });
-  }
-
   _renderSites() {
     const theme = this.context;
     if (this.state.loadingSites) {
@@ -279,8 +242,6 @@ class HomeScreen extends React.Component {
                 renderItem={item => this._renderItem(item)}
                 keyExtractor={item => `draggable-item-${item.url}`}
                 onReordered={this.onReordered}
-                onScrollBeginDrag={e => this._scrollEventHandler(e)}
-                onScrollEndDrag={e => this._scrollEventHandler(e)}
                 scaleSelectionFactor={1.05}
                 estimatedItemSize={130}
                 refreshControl={

js/screens/HomeScreenComponents/index.js

@@ -6,13 +6,11 @@ import SiteRow from './SiteRow';
 import DebugRow from './DebugRow';
 import NavigationBar from './NavigationBar';
 import Notification from './Notification';
-import HotToggle from './HotToggle';
 
 module.exports = {
   OnBoardingView: OnBoardingView,
   SiteRow: SiteRow,
   DebugRow: DebugRow,
   NavigationBar: NavigationBar,
   Notification: Notification,
-  HotToggle: HotToggle,
 };

js/screens/NotificationsScreen.js

@@ -6,6 +6,7 @@ import Immutable from 'immutable';
 import {InteractionManager, SafeAreaView, View} from 'react-native';
 import {ImmutableVirtualizedList} from 'react-native-immutable-list-view';
 import Components from './NotificationsScreenComponents';
+import Common from './CommonComponents';
 import DiscourseUtils from '../DiscourseUtils';
 import {ThemeContext} from '../ThemeContext';
 import i18n from 'i18n-js';
@@ -179,7 +180,7 @@ class NotificationsScreen extends React.Component {
 
   _renderListHeader() {
     return (
-      <Components.Filter
+      <Common.Filter
         selectedIndex={this.state.selectedIndex}
         tabs={[i18n.t('new'), i18n.t('replies'), i18n.t('all')]}
         onChange={index => {

js/screens/NotificationsScreenComponents/index.js

@@ -3,12 +3,10 @@
 
 import NotificationRow from './NotificationRow';
 import NavigationBar from './NavigationBar';
-import Filter from './Filter';
 import EmptyNotificationsView from './EmptyNotificationsView';
 
 module.exports = {
   Row: NotificationRow,
-  Filter: Filter,
   NavigationBar: NavigationBar,
   EmptyNotificationsView: EmptyNotificationsView,
 };