[PLAY STEEM] Implementing Swipe Back

etainclub (78)memberin Steemit Dev Group • 3 years ago (edited)

Hi, I am the developer of the PLAY STEEM mobile apps.

some users want to navigate the sceens by swiping.

I as an android user have been using the following universal app to swipe screens:
https://play.google.com/store/apps/details?id=com.samsung.android.sidegesturepad

But there is no such app in ios.

So I tried to apply swipe gesture to go back between screens.

Swiping between tabs

It was simple to apply swipe gesture to tab screens.

The app has been using createMaterialBottomTabNavigator which does not support swipe gesture, but createMaterialTopTabNavigator does.

// navigation
//import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

and added the following options to the Tab Navigator.

const TabNavigator = (props) => {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      tabBarPosition="bottom"
      tabBarOptions={{
        showIcon: true,
        showLabel: false,
        activeTintColor: '#FFFFFF',
        inactiveTintColor: '#F8F8F8',
        style: {
          backgroundColor: argonTheme.COLORS.STEEM,
        },
        indicatorStyle: {
          height: 0,
        },
        // iconStyle: {
        //   height: 30,
        // }
      }}
    >

Tada! It works!

Swipe In Stacks

But there is an issue with post details screen because it does not belong to any screen. It is a standalone to go back the parent screen.

Temporarily, I put the post details screen under the feed stack. Then the swipe back works as follows between feed and post details:

The animation effects are different for ios and android, I had to set the following options:

<Stack.Navigator
      mode="card"
      headerMode="float"
      screenOptions={{
        gestureEnabled: true,
        gestureDirection: 'horizontal',
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        // transitionSpec: {
        //   open: TransitionSpecs.TransitionIOSSpec,
        //   close: TransitionSpecs.TransitionIOSSpec,
        // }
      }}
    >
      <Stack.Screen
        name="Feed"
        component={Feed}
        options={{
          header: ({ navigation }) => {
            return <Header title="Feed" navigation={navigation} back={false} />;
          },
        }}
      />

      <Stack.Screen
        name="PostDetails"
        component={PostDetails}
        options={{
          header: ({ navigation }) => {
            return <Header title="Post" navigation={navigation} back={true} />;
          },
        }}
      />

Still there are issues to swipe back from notification screen and profile.

How is it? Do you guys like this feature?