gesture handler hoc integration in each native screen

package.json

@@ -195,7 +195,7 @@
     "eslint-plugin-react-native": "^3.7.0",
     "husky": "^3.1.0",
     "jest": "^26.6.3",
-    "jetifier": "^1.6.3",
+    "jetifier": "^2.0.0",
     "lint-staged": "^7.2.0",
     "metro-react-native-babel-preset": "0.72.3",
     "prettier": "^2.0.2",

src/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import 'react-native-gesture-handler';
 import { Provider, connect } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { IntlProvider } from 'react-intl';
@@ -12,21 +11,26 @@ import messages from './config/locales';
 import Application from './screens/application';
 import { persistor, store } from './redux/store/store';
 import { initQueryClient } from './providers/queries';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const queryClientProviderProps = initQueryClient();
 
 const _renderApp = ({ locale }) => (
+
   <PersistQueryClientProvider {...queryClientProviderProps}>
     <PersistGate loading={null} persistor={persistor}>
       <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
-        <SafeAreaProvider>
-          <Host>
-            <Application />
-          </Host>
-        </SafeAreaProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <SafeAreaProvider>
+            <Host>
+              <Application />
+            </Host>
+          </SafeAreaProvider>
+        </GestureHandlerRootView>
       </IntlProvider>
     </PersistGate>
   </PersistQueryClientProvider>
+
 );
 
 const mapStateToProps = (state) => ({

src/screens/accountBoost/screen/accountBoostScreen.js

@@ -16,6 +16,7 @@ import { InAppPurchaseContainer } from '../../../containers';
 import styles from './accountBoostStyles';
 import UserRibbon from '../../../components/userRibbon/userRibbon';
 import { vestsToHp } from '../../../utils/conversions';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const ITEM_SKUS = Platform.select({
   ios: ['999boosts'],
@@ -81,4 +82,4 @@ const AccountBoost = ({ route }) => {
   );
 };
 
-export default AccountBoost;
+export default gestureHandlerRootHOC(AccountBoost);

src/screens/bookmarks/container/bookmarksContainer.js

@@ -18,6 +18,7 @@ import ROUTES from '../../../constants/routeNames';
 
 // Component
 import BookmarksScreen from '../screen/bookmarksScreen';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const BookmarksContainer = ({ currentAccount, intl, navigation }) => {
   const [favorites, setFavorites] = useState([]);
@@ -135,4 +136,4 @@ const mapStateToProps = (state) => ({
   currentAccount: state.account.currentAccount,
 });
 
-export default connect(mapStateToProps)(injectIntl(BookmarksContainer));
+export default gestureHandlerRootHOC(connect(mapStateToProps)(injectIntl(BookmarksContainer)));

src/screens/boost/screen/boostScreen.js

@@ -13,6 +13,7 @@ import { InAppPurchaseContainer } from '../../../containers';
 import globalStyles from '../../../globalStyles';
 import UserRibbon from '../../../components/userRibbon/userRibbon';
 import styles from './styles';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const ITEM_SKUS = Platform.select({
   ios: ['099points', '199points', '499points', '999points', '4999points', '9999points'],
@@ -59,4 +60,4 @@ const BoostScreen = ({ route }) => {
   );
 };
 
-export default BoostScreen;
+export default gestureHandlerRootHOC(BoostScreen);

src/screens/coinDetails/screen/coinDetailsScreen.tsx

@@ -17,6 +17,7 @@ import RootNavigation from '../../../navigation/rootNavigation';
 import ROUTES from '../../../constants/routeNames';
 import { COIN_IDS } from '../../../constants/defaultCoins';
 import { DelegationsModal, MODES } from '../children/delegationsModal';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 export interface CoinDetailsScreenParams {
   coinId: string;
@@ -206,4 +207,4 @@ const CoinDetailsScreen = ({ navigation, route }: CoinDetailsScreenProps) => {
   );
 };
 
-export default CoinDetailsScreen;
+export default gestureHandlerRootHOC(CoinDetailsScreen);

src/screens/communities/view/communitiesScreen.js

@@ -15,6 +15,7 @@ import CommunitiesContainer from '../container/communitiesContainer';
 
 import styles from './communitiesScreenStyles';
 import globalStyles from '../../../globalStyles';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const CommunitiesScreen = () => {
   const intl = useIntl();
@@ -99,4 +100,4 @@ const CommunitiesScreen = () => {
   );
 };
 
-export default CommunitiesScreen;
+export default gestureHandlerRootHOC(CommunitiesScreen);

src/screens/community/screen/communityScreen.js

@@ -14,6 +14,7 @@ import styles from './communityStyles';
 import { getDefaultFilters, getFilterMap } from '../../../constants/options/filters';
 import { useAppSelector } from '../../../hooks';
 import { TagResult } from '../..';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const CommunityScreen = ({ route }) => {
   const tag = route.params?.tag ?? '';
@@ -125,4 +126,4 @@ const CommunityScreen = ({ route }) => {
   );
 };
 
-export default CommunityScreen;
+export default gestureHandlerRootHOC(CommunityScreen);

src/screens/drafts/container/draftsContainer.tsx

@@ -20,6 +20,7 @@ import { default as ROUTES } from '../../../constants/routeNames';
 
 // Component
 import DraftsScreen from '../screen/draftsScreen';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const DraftsContainer = ({ currentAccount, navigation, route }) => {
   const { mutate: deleteDraft, isLoading: isDeletingDraft } = useDraftDeleteMutation();
@@ -85,4 +86,4 @@ const mapStateToProps = (state) => ({
   currentAccount: state.account.currentAccount,
 });
 
-export default injectIntl(connect(mapStateToProps)(DraftsContainer));
+export default gestureHandlerRootHOC(injectIntl(connect(mapStateToProps)(DraftsContainer)));

src/screens/editHistoryScreen/editHistoryScreen.tsx

@@ -12,6 +12,7 @@ import { getCommentHistory } from '../../providers/ecency/ecency';
 import { dateToFormatted } from '../../utils/time';
 import historyBuilder from './historyBuilder';
 import getWindowDimensions from '../../utils/getWindowDimensions';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 export interface CommentHistoryListItemDiff {
   title: string;
@@ -218,4 +219,4 @@ const EditHistoryScreen = ({ route }) => {
   );
 };
 
-export default EditHistoryScreen;
+export default gestureHandlerRootHOC(EditHistoryScreen);

src/screens/editor/container/editorContainer.tsx

@@ -47,6 +47,7 @@ import QUERIES from '../../../providers/queries/queryKeys';
 import bugsnapInstance from '../../../config/bugsnag';
 import { useUserActivityMutation } from '../../../providers/queries/pointQueries';
 import { PointActivityIds } from '../../../providers/ecency/ecency.types';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 /*
  *            Props Name        Description                                     Value
@@ -1165,6 +1166,6 @@ const mapQueriesToProps = () => ({
   userActivityMutation: useUserActivityMutation(),
 });
 
-export default connect(mapStateToProps)(
+export default gestureHandlerRootHOC(connect(mapStateToProps)(
   injectIntl((props) => <EditorContainer {...props} {...mapQueriesToProps()} />),
-);
+));

src/screens/feed/screen/feedScreen.tsx

@@ -14,6 +14,7 @@ import styles from './feedStyles';
 import { getDefaultFilters, getFilterMap } from '../../../constants/options/filters';
 
 import { useAppSelector } from '../../../hooks';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const FeedScreen = () => {
   const mainTabs = useAppSelector(
@@ -56,4 +57,4 @@ const FeedScreen = () => {
   );
 };
 
-export default FeedScreen;
+export default gestureHandlerRootHOC(FeedScreen);

src/screens/follows/container/followsContainer.js

@@ -9,6 +9,7 @@ import get from 'lodash/get';
 import { getFollowers, getFollowing, getFollowSearch } from '../../../providers/hive/dhive';
 // Component
 import FollowsScreen from '../screen/followsScreen';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 /*
  *            Props Name        Description                                     Value
@@ -138,4 +139,4 @@ class FollowsContainer extends Component {
   }
 }
 
-export default FollowsContainer;
+export default gestureHandlerRootHOC(FollowsContainer);

src/screens/login/container/loginContainer.tsx

@@ -36,6 +36,7 @@ import { showActionModal } from '../../../redux/actions/uiAction';
 import { UserAvatar } from '../../../components';
 import { useUserActivityMutation } from '../../../providers/queries/pointQueries';
 import { PointActivityIds } from '../../../providers/ecency/ecency.types';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 /*
  *            Props Name        Description                                     Value
@@ -296,6 +297,6 @@ const mapHooksToProps = () => ({
   userActivityMutation: useUserActivityMutation(),
 });
 
-export default connect(mapStateToProps)(
+export default gestureHandlerRootHOC(connect(mapStateToProps)(
   injectIntl((props) => <LoginContainer {...props} {...mapHooksToProps()} />),
-);
+));

src/screens/notification/container/notificationContainer.tsx

@@ -17,6 +17,7 @@ import { useAppSelector } from '../../../hooks';
 import { useNotificationReadMutation, useNotificationsQuery } from '../../../providers/queries';
 import { NotificationFilters } from '../../../providers/ecency/ecency.types';
 import QUERIES from '../../../providers/queries/queryKeys';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const NotificationContainer = ({ navigation }) => {
   const dispatch = useDispatch();
@@ -146,5 +147,5 @@ const NotificationContainer = ({ navigation }) => {
   );
 };
 
-export default NotificationContainer;
+export default gestureHandlerRootHOC(NotificationContainer);
 /* eslint-enable */

src/screens/pinCode/screen/pinCodeScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { BackHandler } from 'react-native';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import PinCodeContainer from '../container/pinCodeContainer';
 
 const PinCodeScreen = ({ route, navigation }) => {
@@ -20,4 +21,4 @@ const PinCodeScreen = ({ route, navigation }) => {
   return <PinCodeContainer hideCloseButton={hideCloseButton} pinCodeParams={route.params ?? {}} />;
 };
 
-export default PinCodeScreen;
+export default gestureHandlerRootHOC(PinCodeScreen);

src/screens/post/container/postContainer.js

@@ -7,6 +7,7 @@ import { getPost } from '../../../providers/hive/dhive';
 
 // Component
 import PostScreen from '../screen/postScreen';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 /*
  *            Props Name        Description                                     Value
@@ -121,4 +122,4 @@ const mapStateToProps = (state) => ({
   isLoggedIn: state.application.isLoggedIn,
 });
 
-export default connect(mapStateToProps)(PostContainer);
+export default gestureHandlerRootHOC(connect(mapStateToProps)(PostContainer));

src/screens/profile/screen/profileScreen.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 import { Profile } from '../../../components';
 import { ProfileContainer } from '../../../containers';
@@ -87,4 +88,4 @@ const ProfileScreen = ({ route }) => (
   </ProfileContainer>
 );
 
-export default ProfileScreen;
+export default gestureHandlerRootHOC(ProfileScreen);

src/screens/profileEdit/screen/profileEditScreen.js

@@ -7,6 +7,7 @@ import { ProfileEditContainer } from '../../../containers';
 
 import { AvatarHeader, ProfileEditForm } from '../../../components';
 import { OptionsModal } from '../../../components/atoms';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 class ProfileEditScreen extends PureComponent {
   /* Props
@@ -109,4 +110,4 @@ class ProfileEditScreen extends PureComponent {
   }
 }
 
-export default injectIntl(ProfileEditScreen);
+export default gestureHandlerRootHOC(injectIntl(ProfileEditScreen));

src/screens/reblogs/screen/reblogScreen.js

@@ -12,6 +12,7 @@ import AccountListContainer from '../../../containers/accountListContainer';
 // Utils
 import globalStyles from '../../../globalStyles';
 import { getTimeFromNow } from '../../../utils/time';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const renderUserListItem = (item, index, handleOnUserPress) => {
   return (
@@ -55,4 +56,4 @@ const ReblogScreen = ({ navigation, route }) => {
   );
 };
 
-export default ReblogScreen;
+export default gestureHandlerRootHOC(ReblogScreen);

src/screens/redeem/screen/redeemScreen.js

@@ -2,6 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import { RedeemContainer, PointsContainer } from '../../../containers';
 
 import { Promote, PostBoost } from '../../../components';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 class RedeemScreen extends PureComponent {
   constructor(props) {
@@ -72,4 +73,4 @@ class RedeemScreen extends PureComponent {
   }
 }
 
-export default RedeemScreen;
+export default gestureHandlerRootHOC(RedeemScreen);

src/screens/referScreen/referScreen.tsx

@@ -35,6 +35,7 @@ import ROUTES from '../../constants/routeNames';
 import { showProfileModal } from '../../redux/actions/uiAction';
 import RootNavigation from '../../navigation/rootNavigation';
 import { useAppSelector } from '../../hooks';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const ReferScreen = () => {
   const intl = useIntl();
@@ -250,4 +251,4 @@ const ReferScreen = () => {
   );
 };
 
-export default ReferScreen;
+export default gestureHandlerRootHOC(ReferScreen);

src/screens/register/registerScreen.js

@@ -25,6 +25,7 @@ import styles from './registerStyles';
 import ESTEEM_LOGO from '../../assets/like_new.png';
 import ESTEEM_SMALL_LOGO from '../../assets/ecency_logo_transparent.png';
 import getWindowDimensions from '../../utils/getWindowDimensions';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const RegisterScreen = ({ navigation, route }) => {
   const intl = useIntl();
@@ -223,4 +224,4 @@ const hideAnimation = {
     height: 0,
   },
 };
-export default RegisterScreen;
+export default gestureHandlerRootHOC(RegisterScreen);

src/screens/searchResult/screen/searchResultScreen.tsx

@@ -14,6 +14,7 @@ import PeopleResults from './tabs/people/view/peopleResults';
 // Styles
 import styles from './searchResultStyles';
 import globalStyles from '../../../globalStyles';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const SearchResultScreen = ({ navigation }) => {
   const [searchValue, setSearchValue] = useState('');
@@ -87,4 +88,4 @@ const SearchResultScreen = ({ navigation }) => {
   );
 };
 
-export default SearchResultScreen;
+export default gestureHandlerRootHOC(SearchResultScreen);

src/screens/settings/container/settingsContainer.tsx

@@ -62,6 +62,7 @@ import { encryptKey, decryptKey } from '../../../utils/crypto';
 import SettingsScreen from '../screen/settingsScreen';
 import { SERVER_LIST } from '../../../constants/options/api';
 import ROUTES from '../../../constants/routeNames';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 /*
  *            Props Name        Description                                     Value
@@ -540,4 +541,4 @@ const mapHooksToProps = (props) => {
   const navigation = useNavigation();
   return <SettingsContainer {...props} navigation={navigation} />;
 };
-export default connect(mapStateToProps)(injectIntl(mapHooksToProps));
+export default gestureHandlerRootHOC(connect(mapStateToProps)(injectIntl(mapHooksToProps)));

src/screens/spinGame/screen/spinGameScreen.js

@@ -4,8 +4,9 @@ import React from 'react';
 import { SpinGameContainer, InAppPurchaseContainer } from '../../../containers';
 
 import { SpinGame } from '../../../components';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
-const SpinGameScreen = ({ route }) => {
+const SpinGameScreen = gestureHandlerRootHOC(({ route }) => {
   return (
     <SpinGameContainer>
       {({ startGame, score, gameRight, nextDate, isLoading, statusCheck }) => (
@@ -27,6 +28,6 @@ const SpinGameScreen = ({ route }) => {
       )}
     </SpinGameContainer>
   );
-};
+});
 
 export { SpinGameScreen as SpinGame };

src/screens/tagResult/screen/tagResultScreen.js

@@ -9,6 +9,7 @@ import { SearchInput, TabbedPosts } from '../../../components';
 import styles from './tagResultStyles';
 
 import { GLOBAL_POST_FILTERS, GLOBAL_POST_FILTERS_VALUE } from '../../../constants/options/filters';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const TagResultScreen = ({ navigation, route }) => {
   const initTag = route.params?.tag ?? '';
@@ -65,4 +66,4 @@ const TagResultScreen = ({ navigation, route }) => {
   );
 };
 
-export default TagResultScreen;
+export default gestureHandlerRootHOC(TagResultScreen);

src/screens/transfer/index.js

@@ -6,6 +6,7 @@ import TransferView from './screen/transferScreen';
 import AddressView from './screen/addressScreen';
 import PowerDownView from './screen/powerDownScreen';
 import DelegateView from './screen/delegateScreen';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const Transfer = ({ navigation, route }) => (
   <TransferContainer navigation={navigation} route={route}>
@@ -106,4 +107,4 @@ const Transfer = ({ navigation, route }) => (
   </TransferContainer>
 );
 
-export default Transfer;
+export default gestureHandlerRootHOC(Transfer);

src/screens/voters/screen/votersScreen.js

@@ -12,6 +12,7 @@ import AccountListContainer from '../../../containers/accountListContainer';
 import { getActiveVotes } from '../../../providers/hive/dhive';
 import { parseActiveVotes } from '../../../utils/postParser';
 import { getResizedAvatar } from '../../../utils/image';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 const filterOptions = ['rewards', 'percent', 'time'];
 
@@ -78,4 +79,4 @@ const VotersScreen = ({ route }) => {
   );
 };
 
-export default VotersScreen;
+export default gestureHandlerRootHOC(VotersScreen);

src/screens/wallet/screen/walletScreen.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 
 // Containers
-import { FlatList } from 'react-native-gesture-handler';
+import { FlatList, gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { useIntl } from 'react-intl';
 import moment from 'moment';
 import { LoggedInContainer } from '../../../containers';
@@ -298,5 +298,5 @@ const WalletScreen = ({ navigation }) => {
   );
 };
 
-export default WalletScreen;
+export default gestureHandlerRootHOC(WalletScreen);
 /* eslint-enable */

src/screens/webBrowser/screen/webBrowser.tsx

@@ -5,6 +5,7 @@ import { WebView } from 'react-native-webview';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import styles from './webBrowserStyles';
 import { IconButton } from '../../../components';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 export interface WebBrowserParams {
   url: string;
@@ -59,4 +60,4 @@ const WebBrowser = ({ navigation, route }: Props) => {
   );
 };
 
-export default WebBrowser;
+export default gestureHandlerRootHOC(WebBrowser);

src/screens/welcome/screen/WelcomeScreen.tsx

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Text, Image, View, SafeAreaView, TouchableOpacity, Linking } from 'react-native';
 
 import EStyleSheet from 'react-native-extended-stylesheet';
-import { ScrollView } from 'react-native-gesture-handler';
+import { gestureHandlerRootHOC, ScrollView } from 'react-native-gesture-handler';
 import VersionNumber from 'react-native-version-number';
 
 import { CheckBox, Icon, MainButton } from '../../../components';
@@ -122,4 +122,4 @@ const WelcomeScreen = () => {
   );
 };
 
-export default WelcomeScreen;
+export default gestureHandlerRootHOC(WelcomeScreen);

yarn.lock

@@ -6868,10 +6868,10 @@ jest@^26.6.3:
     import-local "^3.0.2"
     jest-cli "^26.6.3"
 
-jetifier@^1.6.3:
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.8.tgz#e88068697875cbda98c32472902c4d3756247798"
-  integrity sha512-3Zi16h6L5tXDRQJTb221cnRoVG9/9OvreLdLU2/ZjRv/GILL+2Cemt0IKvkowwkDpvouAU1DQPOJ7qaiHeIdrw==
+jetifier@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-2.0.0.tgz#699391367ca1fe7bc4da5f8bf691eb117758e4cb"
+  integrity sha512-J4Au9KuT74te+PCCCHKgAjyLlEa+2VyIAEPNCdE5aNkAJ6FAJcAqcdzEkSnzNksIa9NkGmC4tPiClk2e7tCJuQ==
 
 jimp@^0.16.1:
   version "0.16.2"