Nativebase: How to style SwipeRow

[nonameolsson]

Hi! Thanks for trying out NativeBase!
Due to the overwhelming requests and issues/questions we ask you to add the following details with your issue.

Please check the existing open/closed issues for a possible duplicate before creating a new issue :)

Also DO fill out the below form to give us a better idea about your environment and help us debug it quicker. Issues without the required details will mostly be unattended to.

react-native, react and native-base version

React-native: 0.46.4
React: 16.0.0-alpha.12
Native-base: 2.3.1

Expected behaviour

Right and left should be below body

Actual behaviour

Right and left is shown and not possible to style

Steps to reproduce (code snippet or screenshot)

 <Container style={{ backgroundColor: '#FFF' }}>
        <Content scrollEnabled={false}>
          <SwipeRow
            leftOpenValue={75}
            rightOpenValue={-75}
            left={
              <Button success onPress={() => alert('Add')}>
                <Icon active name='add' style={{ color: '#FFF' }} />
              </Button>
            }
            right={
              <Button danger onPress={() => alert('Trash')}>
                <Icon active name='trash' />
              </Button>
            }
            body={
              <View style={{ paddingLeft: 20 }}>
                <Text>Some Body Text</Text>
              </View>
            }
          />
        </Content>
      </Container>

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Have only tried Android

Any other additional info which would help us debug the issue quicker.

I have tried to copy code from the Kitchen Sink app, but it still isn't possible.

[WiseClock]

View should be transparent by default, try:

body={
    <View style={{ paddingLeft: 20, backgroundColor: '#FFF' }}>
        <Text>Some Body Text</Text>
    </View>
}

[nonameolsson]

@WiseClock Thanks, of course, will try that! But how come the instructions doesn't show something like that?
https://docs.nativebase.io/Components.html#swipeable-single-def-headref

[shivrajkumar]

@nonameolsson This was an issue in v2.2.1 and was resolved in v2.3.0. Please make sure that NativeBase version is 2.3.0 or above. Do check with yarn.lock file

[nonameolsson]

@shivrajkumar I have version 2.3.1. What is the issue that shouldn't exist in that version?

[shivrajkumar]

@nonameolsson In v2.2.1, left and right part of the SwipeRow was visible in android. But by default it should have been hidden and should be visible only on swipe. And this issue was fixed in v2.3.0.

[brycejacobs]

@shivrajkumar This is showing up on ios for the Swipeable list now, on version 2.3.1.

[shivrajkumar]

@brycejacobs Its working fine in the latest version. Make sure to merge the new changes of the theme files if you had ejected the theme previously. The older theme code might be causing the issue.