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
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?
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.