0

I use the TabNavigator from react-navigation and have in one Tab a swipeable Component (SwipeRow component from NativeBase). When swiping left or right on that component it shows context menu, so I disabled the swiping Ability from the Tabs in android (iOS is false by default) by declaring swipeEnabled: false in TabNavigator. Well, TabSwiping is now disabled, but all of a sudden, the context menu is not rendered correctly anymore. On Android with swipeEnabled: true and iOS everything works fine!

Screenshots (Card Element swiped to the left):

Android with swipeEnabled: false Android with <code>swipeEnabled: false</code>

iOS (correctly) iOS (correctly)

Code:

    <SwipeRow
      leftOpenValue={100}
      rightOpenValue={-100}
      left={<View style={{flex: 1,
               flexDirection: 'column',
               justifyContent: 'space-between',
               marginTop: 7,
               marginBottom: 7,
               marginLeft: 3,
               marginRight: 3,}}>
                   <Button>...</Button>
                   <Button>...</Button>
             </View>}
      body={<Card > ... </Card>}
      right={/* similar to `left` */}
      style={{backgroundColor: 'transparent', 
              padding: 0,
              paddingRight:0,
              paddingLeft:0,
              paddingTop:0,
              paddingBottom:0, 
              margin: 0,
              marginTop: 0, 
              marginLeft: 0, 
              marginRight: 0,  
              marginBottom: 0, 
              borderBottomWidth:0,
              flex: 1,
            }}
     />

Any ideas why this is happening? Can I disable TabSwiping another way or can I style the menu differently so it gets renders correctly with swipeEnabled: false on android?

Mika
  • 534
  • 5
  • 14

1 Answers1

0

I am now pretty sure it is a styling issue. Adding a fixed height to SwipeRow style-prop fixes the problem, flex: 1 (see above) makes the context menu expand over the whole display height. Nevertheless, I dont know what the height of the content will be. For now I try to calculate it pretty close, but I was happier with the solution before swipeEnabled: false. What does disabling this option do to the overall NativeBase Content, Container or Tab component?

Mika
  • 534
  • 5
  • 14