Skip to content

Drawer gestures iOS and tab #1198

@RUIFERNANDE5

Description

@RUIFERNANDE5

On iOS i'm experiencing an unusual swiping issue.
As you see in the picture below, swiping left while drawer is open (sometimes when opening the drawer) I'm able to go back to a previous scene even if this scene is reseted (tested the back behavior with android button).
This only happens if mode is not set to modal, since if it is set to modal I'm able to disable gestures.
Probably relalted to #818, even tho I'd like to have gestures enabled.
My current router code:

export const Drawer = DrawerNavigator({
    Tabs: {
        screen: Tabs
    },
    Profile: {
        screen: ProfileStack,
    },
    Settings: {
        screen: SettingsStack,
    },
}, {
    cardStack: {
        gesturesEnabled: false,
    },
    contentComponent: props => <ControlPanel {...props}/>,
});

export const Router = StackNavigator({
    Auth: {
        screen: Auth,
    },
    Dashboard : {
        screen: Drawer,
    },
}, {
    headerMode: 'none',
});

drawerissue

Now, on android I'm not sure that's an issue with react-navigation itself but any help would be appreciated.
I want TabNavigator to have the same styles in both android and iOS (bottom bar) , using a custom tabBarIcon for convenience and setting showLabel:false.
As you can see on the picture below, It does have a weird padding / margin which I can't figure out.

screen-shot-2017-04-24-at-10 52 56- 2

const TabIcon = (props) => {
    return (
        <View style={styles.container}>
            <Icon name={props.image+(!props.selected ? '-o' : '')}
                  size={18} style={{ color: props.selected ? '#48aea4' : '#8d8d92' }}/>
            <Text style={{fontSize: 11, marginTop: 5, color: props.selected ? '#48aea4' : '#8d8d92' }}>{props.label}</Text>
        </View>

    );
}

export const Tabs = TabNavigator({
    Favorites: {
        screen: FavoritesStack,
        navigationOptions: {
            tabBarLabel: 'Favorites',
            tabBarIcon: ({ focused }) => <TabIcon image="star" label="Favorites" selected={focused}/>
        },
    },
}, {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    tabBarOptions: {
        showLabel: false,
        scrollEnabled: false,
        showIcon: true,
        style: {
            backgroundColor : '#f2f2f3',
            height: 60,
            margin: 0,
            padding: 0,
            overflow: 'visible'
        },
        indicatorStyle: {
            height: 0
        },
    },
});

Thanks in advance.

UPDATE: I'm now able to resolve error 1 by passing cardStack: { gesturesEnabled: false, }, to Drawernavigator however I think it is a bug still. Even tho I'm ok without gestures on tabs I'll keep an eye on it

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions