fix shrinking children components on every swipe on ios

[oleh-mryhlod]

Fix for #262 #264 #266 issues
Used 'transformX' instead 'left' for styleContentPos

[PvanHengel]

What's the plan/timeline for getting this into a published release, I'm surprised more people don't have this issue.

[harrymash2006]

this does not fix the issue.I am still facing the issue on iOS. React-native:0.55.2

[robertsolero]

I can also confirm this doesn't fix the issue on react-native0.55.4 , iOS.
It works great if the swipe out is on the left side, but not on the right side.

[oleh-mryhlod]

@harrymash2006 @robertsolero Hi, How do You test out my solution? On the PR I've changed only file in src folder. I have the fork https://github.com/oleh-mryhlod/react-native-swipeout/tree/distribution with build version that contains my fix, can You try to test it?) It works for me in RN 54 iOS

[harrymash2006]

yes, I just tried changing the whole index.js file in my node_modules/react-native-swipeout with your index.js but unfortunately issue still persists

[oleh-mryhlod]

@harrymash2006 to see changes try to change dist/index.js
replace the line:
left: this._rubberBandEasing(posX, limit),
with this line:
transform: [{ translateX: this._rubberBandEasing(posX, limit) }],

[harrymash2006]

yes, actually I changed the whole file and it has updated code with transform: check this

[oleh-mryhlod]

Hmm,
I've just tested it out in RN 56 and it works for me as well
I don't know why it isn't working for You, can You provide some screenshots how it looks like and some code of usage?

[harrymash2006]

I am using this exact code as below:

<Swipeout key={index} backgroundColor= 'transparent' style={{width:'100%',height:40}} autoClose={true} right={[{type:'delete',backgroundColor: 'red', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Image style={{height:30, width:30}} source={require('../assets/images/trash.png')} />

), onPress: () => { this.deletePriority(data,index) }}]} >
<TouchableOpacity onPress={()=> this.onSelected(data,index)} key={index} activeOpacity={0.5} style={{ height:40,width:'100%',alignItems:'center',justifyContent:'space-between', backgroundColor:'#a6a6a6', flexDirection:'row',
borderWidth:0.5, borderColor:'white', borderLeftWidth:0, borderRightWidth:0}}>
<Text style={{paddingLeft:10, fontFamily:'HelveticaNeueLTStd-LT', color:'white', fontSize:20,flexDirection:'row',justifyContent:'flex-start',paddingTop:Platform.OS === 'ios'?10:0, }}>{data}
<View style={{justifyContent:'flex-end', marginRight:10, alignSelf:'center'}}>
{(this.state.selectedPriority == data) &&

}

I have attached the screenshot of simulator and index.txt with modified code you suggested for swipeout component (iPhone 6s

index.txt

).

[VincentCATILLON]

I still have the issue using your PR:

[HunDunDM]

@oleh-mryhlod
I used yarn add 'https://github.com/oleh-mryhlod/react-native-swipeout.git#distribution'
then i got (hidden the project path)

error: bundling failed: Error: Couldn't find preset "es2015" relative to directory "{project}/node_modules/react-native-swipeout"
    at {project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets ({project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets ({project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions ({project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init ({project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions ({project}/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File ({project}/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform ({project}/node_modules/babel-core/lib/transformation/pipeline.js:46:16)

and my react-native version is 0.55.4.
According to #264 , react-native 0.56+ may not have this problem.

[HunDunDM]

@oleh-mryhlod
I just copied the src folder from you repo to my project, and then solved the problem! (I used the right buttons)

[SilencerWeb]

@oleh-mryhlod this fix doesn't solve the problem in RN 55 :(

@HunDunDM does it work for you?

[HunDunDM]

@SilencerWeb
It looks like this PR don't take effect in v2.3.4
In the code getting from npm
/dist/index.js

    var styleContentPos = {
      content: {
        left: this._rubberBandEasing(posX, limit)
      }
    };

/src/index.js

    var styleContentPos = {
      content: {
        transform: [{ translateX: this._rubberBandEasing(posX, limit) }],
      },
    };

cc @silentcloud

[SilencerWeb]

@silentcloud could u pls check it? it is very serious bug :(