Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SwipeRow isnt rendering left and right hidden menus the same.

See original GitHub issue

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": "16.3.1",
"react-native": "~0.55.2",
"native-base": "^2.4.5",

Expected behaviour

i would expect the swipe menu to show red, purple, blue, green on both left and right swipes. swiping right gives the expected behavior swiping left does not.

Actual behaviour

Part of red is shown then purple, blue, green, and then rest of red.

Steps to reproduce (code snippet or screenshot)

import {Text, Thumbnail,Button,Icon, SwipeRow } from 'native-base';
import { StyleSheet, View, TouchableHighlight, Image, Dimensions} from 'react-native';

const Card = (props) => {
  let enrolleeThubnail = props.enrolleeImage;
		return (
      <View style={styles.Card} >
        <SwipeRow
            style={{ marginTop: -7, marginRight: -9, marginBottom: -7, backgroundColor: '#fafafa'}}
            leftOpenValue={Dimensions.get("window").width *.8}
            stopLeftSwipe={Dimensions.get("window").width * .8}
            rightOpenValue={-Dimensions.get("window").width * .8}
            stopRightSwipe={-Dimensions.get("window").width * .8}
            left={
                  <View style={{flexDirection: 'row', width: '100%', height: '100%'}} >
                        <TouchableOpacity  style={{backgroundColor: 'red', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Buzz')}>
                             <Image style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                        </TouchableOpacity>
                       <TouchableOpacity  style={{backgroundColor: 'purple', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Vibrate')}>
                              <Image  style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                       </TouchableOpacity>
                       <TouchableOpacity  style={{backgroundColor: 'blue', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Locate')}>
                              <Image  style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                       </TouchableOpacity>
                      <TouchableOpacity  style={{backgroundColor: 'green', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Real Time')}>
                                <Image  style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                       </TouchableOpacity>
                </View>
            }
            body={
                <TouchableHighlight style={{ width: '100%', height: '100%'}} onPress={() => props.buttonPress()}>
                  <View style={styles.touchableCard} >
                    <Image style={styles.thumbnailIcon} source={require('../../../Images/iosDashboard.png')} />

                    <View style={styles.Info}>
                       <View style={{width: '60%'}}>
                           <Text style={styles.primaryText}>{props.Name}</Text>
                           <Text style={styles.text}>{props.primaryID}</Text>
                           <View style={{	flexDirection: 'row', justifyContent: 'flex-start', width: '100%'}}>
                              <Image style={styles.dIcon} source={require('../../../Images/Icon.png')} />
                              <Text style={styles.secondaryText}>{props.Assigned}</Text>
                           </View>
                           <Text style={styles.text}>{props.Date}</Text>
                           <Text style={styles.text}>{props.org}</Text>
                       </View>
                    </View>

                    <View style={{ width: '10%',flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
                        <Image source={require('../../../Images/32.png')} />
                    </View>
                    <Image style={{width: '15%', height: '100%'}} source={require('../../../Images/next.png')} />
                  </View>
                </TouchableHighlight>
              }
              right={
                  <View style={{flexDirection: 'row', width: '100%', height: '100%'}} >
                      <TouchableOpacity  style={{backgroundColor: 'red', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Buzz')}>
                            <Image style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                     </TouchableOpacity>
                     <TouchableOpacity  style={{backgroundColor: 'purple', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Vibrate')}>
                           <Image  style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                       </TouchableOpacity>
                       <TouchableOpacity  style={{backgroundColor: 'blue', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Locate')}>
                             <Image  style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                      </TouchableOpacity>
                     <TouchableOpacity  style={{backgroundColor: 'green', width: '25%', height: '100%', justifyContent: 'center', alignItems: 'center'}} onPress={() => alert('Real Time')}>
                        <Image  style={{width: 25, height: 25}} source={require('../../../Images/smile.jpg')} />
                       </TouchableOpacity>
               </View>
             }
        />
      </View>
		);
}

const styles = StyleSheet.create({
    Card: {
      height: 110,
      marginLeft: Dimensions.get("window").width * .025,
      marginTop: 7,
      width: '95%',
      borderWidth: 1,
      borderColor: '#fafafa',
    },
    touchableCard: {
  		flexDirection: 'row',
  		justifyContent: 'flex-start',
      backgroundColor: '#fafafa',
      height: '100%'
  	},
  	thumbnailIcon: {
  		height: 75,
  		width: 75,
  		height: 75,
  		borderRadius: 75 / 2,
  		borderColor: 'black',
  		borderWidth: 1,
      marginTop: '5%',
      marginLeft: 5,
  	},
   dIcon: {
      height: 24,
      width: 24
    },
    Info: {
      backgroundColor:"#fafafa",
      paddingLeft: 10,
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
    },
  	text: {
  		fontSize: 14,
  		fontFamily: 'aller',
      color: 'gray',
      width: '100%'
  	},
    primaryText: {
  		fontSize: 18,
  		fontFamily: 'aller',
      fontWeight: 'bold',
      width: '100%',
  	},
    secondaryText: {
  		fontSize: 16,
      fontWeight: 'bold',
      width: '100%',
      fontFamily: 'aller'
  	},
    batteryIcon: {
      height: 75,
    	width: 75,
    	height: 75,
    	borderRadius: 75 / 2,
    	borderColor: 'black',
    	borderWidth: 1,
      marginTop: '5%',
      marginLeft: 5,
    }

});


export default (EnrolleeCard);