diff --git a/package.json b/package.json
index 40391a714b..026eda557e 100644
--- a/package.json
+++ b/package.json
@@ -150,7 +150,6 @@
"react-native-restart": "^0.0.24",
"react-native-safe-area-context": "^4.7.4",
"react-native-screens": "3.27.0",
- "react-native-scrollable-tab-view": "ecency/react-native-scrollable-tab-view",
"react-native-select-dropdown": "^3.4.0",
"react-native-slider": "^0.11.0",
"react-native-snap-carousel": "^3.8.0",
diff --git a/patches/react-native-pager-view+5.4.25.patch b/patches/react-native-pager-view+5.4.25.patch
deleted file mode 100644
index f72a00f3ab..0000000000
--- a/patches/react-native-pager-view+5.4.25.patch
+++ /dev/null
@@ -1,22 +0,0 @@
-diff --git a/node_modules/react-native-pager-view/android/build.gradle b/node_modules/react-native-pager-view/android/build.gradle
-index 260b52f..e929c19 100644
---- a/node_modules/react-native-pager-view/android/build.gradle
-+++ b/node_modules/react-native-pager-view/android/build.gradle
-@@ -4,7 +4,7 @@ buildscript {
-
- repositories {
- google()
-- jcenter()
-+ mavenCentral() //patched
- }
-
- dependencies {
-@@ -51,7 +51,7 @@ android {
-
- repositories {
- mavenCentral()
-- jcenter()
-+ mavenCentral() //patched
- google()
-
- def found = false
diff --git a/patches/react-native-scrollable-tab-view+1.1.0.patch b/patches/react-native-scrollable-tab-view+1.1.0.patch
deleted file mode 100644
index 5aded72af1..0000000000
--- a/patches/react-native-scrollable-tab-view+1.1.0.patch
+++ /dev/null
@@ -1,188 +0,0 @@
-diff --git a/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js b/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js
-index da58b52..877603a 100644
---- a/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js
-+++ b/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js
-@@ -1,6 +1,7 @@
- const React = require('react');
--const { ViewPropTypes } = ReactNative = require('react-native');
-+const ReactNative = require('react-native');
- const PropTypes = require('prop-types');
-+const { TextPropTypes, ViewPropTypes } = require('deprecated-react-native-prop-types');
- const createReactClass = require('create-react-class');
- const {
- StyleSheet,
-@@ -18,7 +19,7 @@ const DefaultTabBar = createReactClass({
- backgroundColor: PropTypes.string,
- activeTextColor: PropTypes.string,
- inactiveTextColor: PropTypes.string,
-- textStyle: Text.propTypes.style,
-+ textStyle: TextPropTypes.style,
- tabStyle: ViewPropTypes.style,
- renderTab: PropTypes.func,
- underlineStyle: ViewPropTypes.style,
-diff --git a/node_modules/react-native-scrollable-tab-view/Example/android/build.gradle b/node_modules/react-native-scrollable-tab-view/Example/android/build.gradle
-index eed9972..61bdb60 100644
---- a/node_modules/react-native-scrollable-tab-view/Example/android/build.gradle
-+++ b/node_modules/react-native-scrollable-tab-view/Example/android/build.gradle
-@@ -2,7 +2,7 @@
-
- buildscript {
- repositories {
-- jcenter()
-+ mavenCentral() //patched
- }
- dependencies {
- classpath 'com.android.tools.build:gradle:2.2.3'
-@@ -15,7 +15,7 @@ buildscript {
- allprojects {
- repositories {
- mavenLocal()
-- jcenter()
-+ mavenCentral() //patched
- maven {
- // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
- url "$rootDir/../node_modules/react-native/android"
-diff --git a/node_modules/react-native-scrollable-tab-view/Example/package.json b/node_modules/react-native-scrollable-tab-view/Example/package.json
-index 43348c7..3b037c0 100644
---- a/node_modules/react-native-scrollable-tab-view/Example/package.json
-+++ b/node_modules/react-native-scrollable-tab-view/Example/package.json
-@@ -1,26 +1,78 @@
- {
-- "name": "Example",
-- "version": "0.0.1",
-- "private": true,
-- "scripts": {
-- "start": "node node_modules/react-native/local-cli/cli.js start",
-- "test": "jest"
-- },
-- "dependencies": {
-- "create-react-class": "^15.6.2",
-- "react": "16.0.0",
-- "react-native": "0.48.4",
-- "react-native-scrollable-tab-view": "file:../",
-- "react-native-vector-icons": "^4.4.0",
-- "react-navigation": "^1.0.0-beta.13"
-- },
-- "devDependencies": {
-- "babel-jest": "21.2.0",
-- "babel-preset-react-native": "4.0.0",
-- "jest": "21.2.1",
-- "react-test-renderer": "16.0.0"
-- },
-- "jest": {
-- "preset": "react-native"
-- }
-+ "name": "Example",
-+ "version": "0.0.1",
-+ "private": true,
-+ "scripts": {
-+ "start": "node node_modules/react-native/local-cli/cli.js start",
-+ "test": "jest"
-+ },
-+ "dependencies": {
-+ "create-react-class": "^15.6.2",
-+ "react": "16.0.0",
-+ "react-native": "0.48.4",
-+ "react-native-scrollable-tab-view": "file:../",
-+ "react-native-vector-icons": "^4.4.0",
-+ "react-navigation": "^1.0.0-beta.13"
-+ },
-+ "devDependencies": {
-+ "babel-jest": "21.2.0",
-+ "babel-preset-react-native": "4.0.0",
-+ "jest": "21.2.1",
-+ "react-test-renderer": "16.0.0"
-+ },
-+ "jest": {
-+ "preset": "react-native"
-+ },
-+ "react-native": {
-+ "zlib": "browserify-zlib",
-+ "console": "console-browserify",
-+ "constants": "constants-browserify",
-+ "crypto": "react-native-crypto",
-+ "dns": "dns.js",
-+ "net": "react-native-tcp",
-+ "domain": "domain-browser",
-+ "http": "@tradle/react-native-http",
-+ "https": "https-browserify",
-+ "os": "react-native-os",
-+ "path": "path-browserify",
-+ "querystring": "querystring-es3",
-+ "fs": "react-native-level-fs",
-+ "_stream_transform": "readable-stream/transform",
-+ "_stream_readable": "readable-stream/readable",
-+ "_stream_writable": "readable-stream/writable",
-+ "_stream_duplex": "readable-stream/duplex",
-+ "_stream_passthrough": "readable-stream/passthrough",
-+ "dgram": "react-native-udp",
-+ "stream": "stream-browserify",
-+ "timers": "timers-browserify",
-+ "tty": "tty-browserify",
-+ "vm": "vm-browserify",
-+ "tls": false
-+ },
-+ "browser": {
-+ "zlib": "browserify-zlib",
-+ "console": "console-browserify",
-+ "constants": "constants-browserify",
-+ "crypto": "react-native-crypto",
-+ "dns": "dns.js",
-+ "net": "react-native-tcp",
-+ "domain": "domain-browser",
-+ "http": "@tradle/react-native-http",
-+ "https": "https-browserify",
-+ "os": "react-native-os",
-+ "path": "path-browserify",
-+ "querystring": "querystring-es3",
-+ "fs": "react-native-level-fs",
-+ "_stream_transform": "readable-stream/transform",
-+ "_stream_readable": "readable-stream/readable",
-+ "_stream_writable": "readable-stream/writable",
-+ "_stream_duplex": "readable-stream/duplex",
-+ "_stream_passthrough": "readable-stream/passthrough",
-+ "dgram": "react-native-udp",
-+ "stream": "stream-browserify",
-+ "timers": "timers-browserify",
-+ "tty": "tty-browserify",
-+ "vm": "vm-browserify",
-+ "tls": false
-+ }
- }
-diff --git a/node_modules/react-native-scrollable-tab-view/ScrollableTabBar.js b/node_modules/react-native-scrollable-tab-view/ScrollableTabBar.js
-index 1500b2d..ff7a3d5 100644
---- a/node_modules/react-native-scrollable-tab-view/ScrollableTabBar.js
-+++ b/node_modules/react-native-scrollable-tab-view/ScrollableTabBar.js
-@@ -1,6 +1,7 @@
- const React = require('react');
--const { ViewPropTypes } = ReactNative = require('react-native');
-+const ReactNative = require('react-native');
- const PropTypes = require('prop-types');
-+const { TextPropTypes, ViewPropTypes } = require('deprecated-react-native-prop-types');
- const createReactClass = require('create-react-class');
- const {
- View,
-@@ -27,7 +28,7 @@ const ScrollableTabBar = createReactClass({
- style: ViewPropTypes.style,
- tabStyle: ViewPropTypes.style,
- tabsContainerStyle: ViewPropTypes.style,
-- textStyle: Text.propTypes.style,
-+ textStyle: TextPropTypes.style,
- renderTab: PropTypes.func,
- underlineStyle: ViewPropTypes.style,
- onScroll: PropTypes.func,
-diff --git a/node_modules/react-native-scrollable-tab-view/index.js b/node_modules/react-native-scrollable-tab-view/index.js
-index 24a4a3b..94d1d9a 100644
---- a/node_modules/react-native-scrollable-tab-view/index.js
-+++ b/node_modules/react-native-scrollable-tab-view/index.js
-@@ -9,9 +9,9 @@ import {
- Platform,
- StyleSheet,
- InteractionManager,
-- ViewPropTypes
- } from 'react-native';
-
-+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
- import TimerMixin from 'react-timer-mixin';
-
- import PagerView from 'react-native-pager-view';
diff --git a/src/components/tabBar/view/tabBar.styles.ts b/src/components/tabBar/view/tabBar.styles.ts
new file mode 100644
index 0000000000..378c65ace3
--- /dev/null
+++ b/src/components/tabBar/view/tabBar.styles.ts
@@ -0,0 +1,14 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+ tabbar: {
+ backgroundColor: '$primaryBackgroundColor',
+ },
+ tabbarLabel: {
+ color:'$primaryDarkText',
+ },
+ tabbarIndicator:{
+ backgroundColor:'$primaryBlue'
+ }
+
+});
diff --git a/src/components/tabBar/view/tabBarStyles.js b/src/components/tabBar/view/tabBarStyles.js
deleted file mode 100644
index 3b24f79ea8..0000000000
--- a/src/components/tabBar/view/tabBarStyles.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import EStyleSheet from 'react-native-extended-stylesheet';
-
-export default EStyleSheet.create({
- tab: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
- tabs: {
- height: 40,
- flexDirection: 'row',
- justifyContent: 'space-around',
- },
- tabButton: {
- flex: 1,
- },
- text: {
- fontSize: 16,
- fontFamily: '$primaryFont',
- },
-});
diff --git a/src/components/tabBar/view/tabBarView.js b/src/components/tabBar/view/tabBarView.js
deleted file mode 100644
index 0c24fa345d..0000000000
--- a/src/components/tabBar/view/tabBarView.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-import {
- Text,
- View,
- Animated,
- TouchableNativeFeedback,
- TouchableOpacity,
- Platform,
-} from 'react-native';
-
-// Styles
-import styles from './tabBarStyles';
-import getWindowDimensions from '../../../utils/getWindowDimensions';
-
-class TabBar extends PureComponent {
- /* Props
- * ------------------------------------------------ TODO: Fill fallowlines
- * @prop { type } name - Description.
- * @prop { type } name - Description.
- *
- */
-
- constructor(props) {
- super(props);
-
- this.state = {
- activeColor: !props.isDarkTheme ? '#357ce6' : '#96c0ff',
- inactiveColor: !props.isDarkTheme ? '#788187' : '#526d91',
- };
- }
-
- _renderTab = (name, page, isTabActive, onPressHandler) => {
- const { activeColor, inactiveColor } = this.state;
- const { textStyle } = this.props;
-
- const textColor = isTabActive ? activeColor : inactiveColor;
- const fontWeight = isTabActive ? 'bold' : 'normal';
- const Button = Platform.OS === 'ios' ? ButtonIos : ButtonAndroid;
- // TODO: make generic component!!
-
- return (
-
- );
- };
-
- _renderUnderline = () => {
- const { tabs, tabUnderlineDefaultWidth, tabUnderlineScaleX, scrollValue, underlineStyle } =
- this.props;
- const { activeColor } = this.state;
-
- const containerWidth = getWindowDimensions().nativeWidth;
- const numberOfTabs = tabs.length;
- const underlineWidth = tabUnderlineDefaultWidth || containerWidth / (numberOfTabs * 2);
- const scale = tabUnderlineScaleX || 2;
- const deLen = (containerWidth / numberOfTabs - underlineWidth) / 2;
- const tabUnderlineStyle = {
- position: 'absolute',
- width: underlineWidth,
- height: 2,
- borderRadius: 2,
- backgroundColor: activeColor,
- bottom: 0,
- left: deLen,
- };
-
- const translateX = scrollValue.interpolate({
- inputRange: [0, 1],
- outputRange: [0, containerWidth / numberOfTabs],
- });
-
- const scaleValue = (defaultScale) => {
- const number = 4;
- const arr = new Array(number * 2);
-
- return arr.fill(0).reduce(
- (pre, cur, idx) => {
- idx === 0 ? pre.inputRange.push(cur) : pre.inputRange.push(pre.inputRange[idx - 1] + 0.5);
- idx % 2 ? pre.outputRange.push(defaultScale) : pre.outputRange.push(1);
- return pre;
- },
- { inputRange: [], outputRange: [] },
- );
- };
-
- const scaleX = scrollValue.interpolate(scaleValue(scale));
- return (
-
- );
- };
-
- render() {
- const { activeTab, backgroundColor, style, goToPage, tabs } = this.props;
-
- return (
-
- {tabs.map((name, page) => {
- const isTabActive = activeTab === page;
- return this._renderTab(name, page, isTabActive, goToPage);
- })}
- {this._renderUnderline()}
-
- );
- }
-}
-
-const ButtonAndroid = (props) => (
-
- {props.children}
-
-);
-
-const ButtonIos = (props) => {props.children};
-
-const mapStateToProps = (state) => ({
- isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(TabBar);
diff --git a/src/components/tabBar/view/tabBarView.tsx b/src/components/tabBar/view/tabBarView.tsx
new file mode 100644
index 0000000000..0ed0f0f77b
--- /dev/null
+++ b/src/components/tabBar/view/tabBarView.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './tabBar.styles';
+import { Route, TabBarProps, TabBar as TabBarView } from 'react-native-tab-view';
+
+
+const TabBar = (props:TabBarProps) => {
+ return (
+
+ )
+}
+
+export default TabBar;
+
+
+
diff --git a/src/screens/bookmarks/screen/bookmarksScreen.tsx b/src/screens/bookmarks/screen/bookmarksScreen.tsx
index a3691d0b0e..6e52310ed2 100644
--- a/src/screens/bookmarks/screen/bookmarksScreen.tsx
+++ b/src/screens/bookmarks/screen/bookmarksScreen.tsx
@@ -10,6 +10,7 @@ import { UserListItem, WalletDetailsPlaceHolder, BasicHeader, TabBar } from '../
import globalStyles from '../../../globalStyles';
import styles from './bookmarksStyles';
import { OptionsModal } from '../../../components/atoms';
+import { Route, TabView } from 'react-native-tab-view';
const BookmarksScreen = ({
isLoading,
@@ -23,9 +24,24 @@ const BookmarksScreen = ({
initialTabIndex,
}) => {
const [selectedItemId, setSelectedItemId] = useState(null);
- const [activeTab, setActiveTab] = useState(0);
const actionSheetRef = useRef(null);
+ const [index, setIndex] = React.useState(initialTabIndex);
+ const [routes] = React.useState([
+ {
+ key: 'bookmarks',
+ title: intl.formatMessage({
+ id: 'bookmarks.title',
+ })
+ },
+ {
+ key: 'favorites',
+ title: intl.formatMessage({
+ id: 'favorites.title',
+ })
+ },
+ ]);
+
const _renderItem = (item, index, itemType) => {
const isFavorites = itemType === 'favorites';
const text = isFavorites ? item.account : `${item.author}/${item.permlink}`;
@@ -88,6 +104,25 @@ const BookmarksScreen = ({
}
};
+
+ const renderScene = ({ route }) => {
+ switch (route.key) {
+ case 'bookmarks':
+ return (
+
+ {_getTabItem(bookmarks, 'bookmarks')}
+
+
+ )
+ case 'favorites':
+ return (
+
+ {_getTabItem(favorites, 'favorites')}
+
+ )
+ }
+ }
+
return (
- setActiveTab(event.i)}
+ (
-
- )}
- >
-
- {_getTabItem(bookmarks, 'bookmarks')}
-
-
- {_getTabItem(favorites, 'favorites')}
-
-
+ />
+
+
+
{
- const intl = useIntl();
- const tabViewRef = useRef(null);
-
- const _handleDiscoverPress = () => {
- if (tabViewRef.current) {
- tabViewRef.current.goToPage(1);
- }
- };
-
- const _renderTabbar = () => (
-
- );
-
- return (
-
- {({
- subscriptions,
- discovers,
- handleOnPress,
- handleSubscribeButtonPress,
- subscribingCommunitiesInDiscoverTab,
- subscribingCommunitiesInJoinedTab,
- handleGetSubscriptions,
- isSubscriptionsLoading,
- isDiscoversLoading,
- }) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
- }}
-
- );
-};
-
-export default gestureHandlerRootHOC(CommunitiesScreen);
diff --git a/src/screens/communities/view/communitiesScreen.tsx b/src/screens/communities/view/communitiesScreen.tsx
new file mode 100644
index 0000000000..7899d1c1b7
--- /dev/null
+++ b/src/screens/communities/view/communitiesScreen.tsx
@@ -0,0 +1,113 @@
+import React, { useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { View } from 'react-native';
+
+// Components
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
+import {
+ TabBar,
+ BasicHeader,
+ CommunitiesList,
+ SubscribedCommunitiesList,
+} from '../../../components';
+
+import CommunitiesContainer from '../container/communitiesContainer';
+
+import styles from './communitiesScreenStyles';
+import globalStyles from '../../../globalStyles';
+import { TabView } from 'react-native-tab-view';
+
+const CommunitiesScreen = () => {
+ const intl = useIntl();
+
+
+ const [index, setIndex] = React.useState(0);
+ const [routes] = React.useState([
+ {
+ key: 'joined',
+ title: intl.formatMessage({
+ id: 'communities.joined',
+ })
+ },
+ {
+ key: 'discover',
+ title: intl.formatMessage({
+ id: 'communities.discover',
+ })
+ },
+ ]);
+
+ const _handleDiscoverPress = () => {
+ setIndex(1)
+ };
+
+
+
+ return (
+
+ {({
+ subscriptions,
+ discovers,
+ handleOnPress,
+ handleSubscribeButtonPress,
+ subscribingCommunitiesInDiscoverTab,
+ subscribingCommunitiesInJoinedTab,
+ handleGetSubscriptions,
+ isSubscriptionsLoading,
+ isDiscoversLoading,
+ }) => {
+ return (
+
+
+ {
+ switch (route.key) {
+ case 'joined':
+ return (
+
+
+
+ )
+ case 'discover':
+ return (
+
+
+
+
+ )
+ }
+ }}
+ />
+
+ );
+ }}
+
+ );
+};
+
+export default gestureHandlerRootHOC(CommunitiesScreen);
diff --git a/src/screens/drafts/screen/draftsScreen.js b/src/screens/drafts/screen/draftsScreen.js
index 77ccfe177e..5b53776f36 100644
--- a/src/screens/drafts/screen/draftsScreen.js
+++ b/src/screens/drafts/screen/draftsScreen.js
@@ -1,7 +1,6 @@
import React, { useMemo, useRef } from 'react';
import { injectIntl } from 'react-intl';
import { View, FlatList, Text, Platform, RefreshControl } from 'react-native';
-import ScrollableTabView from 'react-native-scrollable-tab-view';
import { default as AnimatedView, SlideInRight, SlideOutRight } from 'react-native-reanimated';
import EStyleSheet from 'react-native-extended-stylesheet';
@@ -25,6 +24,7 @@ import globalStyles from '../../../globalStyles';
import styles from './draftStyles';
import { useAppSelector } from '../../../hooks';
import { DEFAULT_USER_DRAFT_ID } from '../../../redux/constants/constants';
+import { TabView } from 'react-native-tab-view';
const DraftsScreen = ({
currentAccount,
@@ -45,7 +45,6 @@ const DraftsScreen = ({
handleItemLongPress,
batchSelectedItems,
handleBatchDeletePress,
- onChangeTab,
}) => {
const actionSheet = useRef(null);
const isDarkTheme = useAppSelector((state) => state.application.isDarkTheme);
@@ -65,6 +64,23 @@ const DraftsScreen = ({
return null;
}, [draftsCollection]);
+
+ const [index, setIndex] = React.useState(initialTabIndex);
+ const [routes] = React.useState([
+ {
+ key: 'drafts',
+ title: intl.formatMessage({
+ id: 'drafts.title',
+ })
+ },
+ {
+ key: 'schedules',
+ title: intl.formatMessage({
+ id: 'schedules.title',
+ })
+ },
+ ]);
+
// Component Functions
const _renderItem = (item, type) => {
const tags = item.tags ? item.tags.split(/[ ,]+/) : [];
@@ -190,6 +206,26 @@ const DraftsScreen = ({
);
};
+
+ const renderScene = ({ route }) => {
+ switch (route.key) {
+ case 'drafts':
+ return (
+
+ {_getTabItem(drafts, 'drafts')}
+
+ )
+ case 'schedules':
+ return (
+
+ {_getTabItem(schedules, 'schedules')}
+
+ )
+ }
+ }
+
return (
<>
@@ -199,36 +235,14 @@ const DraftsScreen = ({
})}
/>
- (
-
- )}
- >
-
- {_getTabItem(drafts, 'drafts')}
-
-
- {_getTabItem(schedules, 'schedules')}
-
-
+ onIndexChange={setIndex}
+ renderTabBar={TabBar}
+ renderScene={renderScene}
+ />
+
{batchSelectedItems && batchSelectedItems.length > 0 ? _renderDeleteButton() : null}
{
- return (
-
-
-
- (
-
- )}
- >
-
+
+ const intl = useIntl();
+
+ const [index, setIndex] = React.useState(0);
+ const [routes] = React.useState([
+ {
+ key: 'notifications',
+ title: intl.formatMessage({
+ id: 'notification.notification',
+ })
+ },
+ {
+ key: 'leaderboard',
+ title: intl.formatMessage({
+ id: 'notification.leaderboard',
+ })
+ },
+ ]);
+
+
+ const renderScene = ({ route }) => {
+ switch (route.key) {
+ case 'notifications':
+ return (
+
{() => (
-
+ )
+ case 'leaderboard':
+ return (
+
-
-
+ )
+ }
+ }
+
+
+ // const renderTabBar = (props) => (
+ //
+ // )
+
+
+ return (
+
+
+
+
+
);
};
-export default injectIntl(NotificationScreen);
+export default NotificationScreen;
diff --git a/src/screens/notification/screen/notificationStyles.js b/src/screens/notification/screen/notificationStyles.js
index c02737481b..7980fa272d 100644
--- a/src/screens/notification/screen/notificationStyles.js
+++ b/src/screens/notification/screen/notificationStyles.js
@@ -5,13 +5,10 @@ export default EStyleSheet.create({
flex: 1,
backgroundColor: '$primaryLightBackground',
},
- tabbar: {
- alignSelf: 'center',
- backgroundColor: '$primaryBackgroundColor',
- },
- tabbarItem: {
- flex: 1,
+ tabView:{
+ flex:1,
backgroundColor: '$primaryBackgroundColor',
minWidth: '$deviceWidth',
},
+
});
diff --git a/src/screens/searchResult/screen/searchResultScreen.tsx b/src/screens/searchResult/screen/searchResultScreen.tsx
index 88228f3157..02582d3508 100644
--- a/src/screens/searchResult/screen/searchResultScreen.tsx
+++ b/src/screens/searchResult/screen/searchResultScreen.tsx
@@ -1,6 +1,5 @@
import React, { memo, useState } from 'react';
import { View } from 'react-native';
-import ScrollableTabView from 'react-native-scrollable-tab-view';
import { useIntl } from 'react-intl';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import useDebounce from '../../../utils/useDebounceHook';
@@ -15,6 +14,7 @@ import PeopleResults from './tabs/people/view/peopleResults';
// Styles
import styles from './searchResultStyles';
import globalStyles from '../../../globalStyles';
+import { TabView } from 'react-native-tab-view';
const SearchResultScreen = ({ navigation }) => {
const intl = useIntl();
@@ -23,6 +23,7 @@ const SearchResultScreen = ({ navigation }) => {
const [searchInputValue, setSearchInputValue] = useState('');
const [searchValue, setSearchValue] = useState('');
+
const _handleChangeText = (value) => {
setSearchInputValue(value);
};
@@ -56,6 +57,34 @@ const SearchResultScreen = ({ navigation }) => {
const SearchResultsTabView = memo(({ searchValue }: { searchValue: string }) => {
const intl = useIntl();
+ const [index, setIndex] = React.useState(0);
+ const [routes] = React.useState([
+ {
+ key: 'posts',
+ title: intl.formatMessage({
+ id: 'search_result.best.title',
+ })
+ },
+ {
+ key: 'people',
+ title: intl.formatMessage({
+ id: 'search_result.people.title',
+ })
+ },
+ {
+ key: 'topics',
+ title: intl.formatMessage({
+ id: 'search_result.topics.title',
+ })
+ },
+ {
+ key: 'communities',
+ title: intl.formatMessage({
+ id: 'search_result.communities.title',
+ })
+ },
+
+ ]);
const clippedSearchValue =
searchValue.startsWith('#') || searchValue.startsWith('@')
@@ -63,47 +92,47 @@ const SearchResultsTabView = memo(({ searchValue }: { searchValue: string }) =>
: searchValue.trim().toLowerCase();
const isUsername = !!(searchValue.startsWith('#') || searchValue.startsWith('@'));
- const _renderTabbar = () => (
-
- );
+
+ const renderScene = ({ route }) => {
+ switch (route.key) {
+ case 'posts':
+ return (
+
+
+
+ );
+ case 'people':
+ return (
+
+
+
+ );
+ case 'topics':
+ return (
+
+
+
+ );
+ case 'communities':
+ return (
+
+
+
+ );
+
+ }
+
+ }
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ renderTabBar={TabBar}
+ renderScene={renderScene}
+ navigationState={{ index, routes }}
+ onIndexChange={setIndex}
+ />
+
);
});
diff --git a/yarn.lock b/yarn.lock
index 197768f214..6ddd9b6040 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5331,14 +5331,6 @@ create-jest@^29.7.0:
jest-util "^29.7.0"
prompts "^2.0.1"
-create-react-class@^15.6.2:
- version "15.7.0"
- resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
- integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
- dependencies:
- loose-envify "^1.3.1"
- object-assign "^4.1.1"
-
cross-fetch@^3.0.4, cross-fetch@^3.0.6, cross-fetch@^3.1.5:
version "3.1.8"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
@@ -11523,11 +11515,6 @@ react-native-os@^1.2.6:
resolved "https://registry.yarnpkg.com/react-native-os/-/react-native-os-1.2.6.tgz#1bb16d78ccad1143972183a04f443cf1af9fbefa"
integrity sha512-OlT+xQAcvkcnf7imgXiu+myMkqDt4xw2bP5SlVo19hEn5XHBkPMLX7dk3sSGxxncH/ToMDsf1KLyrPabNVtadA==
-react-native-pager-view@^5.4.22:
- version "5.4.25"
- resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.25.tgz#cd639d5387a7f3d5581b55a33c5faa1cbc200f97"
- integrity sha512-3drrYwaLat2fYszymZe3nHMPASJ4aJMaxiejfA1V5SK3OygYmdtmV2u5prX7TnjueJzGSyyaCYEr2JlrRt4YPg==
-
react-native-pager-view@^6.4.1:
version "6.4.1"
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.4.1.tgz#82d04107229c19967a503de53a231dd95fcccd10"
@@ -11619,15 +11606,6 @@ react-native-screens@3.27.0:
react-freeze "^1.0.0"
warn-once "^0.1.0"
-react-native-scrollable-tab-view@ecency/react-native-scrollable-tab-view:
- version "1.1.0"
- resolved "https://codeload.github.com/ecency/react-native-scrollable-tab-view/tar.gz/d35f17472eb2608c4895dcaac472f499cf6552cf"
- dependencies:
- create-react-class "^15.6.2"
- prop-types "^15.6.0"
- react-native-pager-view "^5.4.22"
- react-timer-mixin "^0.13.3"
-
react-native-select-dropdown@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/react-native-select-dropdown/-/react-native-select-dropdown-3.4.0.tgz#3ce31dc2e5ffa1abf4c47e3297bf0da7144f1ea3"
@@ -11863,11 +11841,6 @@ react-test-renderer@18.2.0:
react-shallow-renderer "^16.15.0"
scheduler "^0.23.0"
-react-timer-mixin@^0.13.3:
- version "0.13.4"
- resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
- integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
-
react@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"