children components are srinking(widthwise) on every swipe in ios /android is working fine

[dhrjyaduvanshi]

	<ScrollView style={styles.listContainer}>

{this.props.state.homeData.length!==0? this.props.state.homeData.map((item,index) =>{ const swipeSettings = {

							           onClose:()=>this.reset(),
                                       autoClose: true,
                                       right: [
                                        { component:(<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
										<Icon2 size={20} color="#fff" name='cross'/>
										<Text style={{color:'#fff'}}>Reject</Text>
										</View>
                                         ),
										 onPress: () => this.rejectRequest(item.request_id), text: 'Reject',backgroundColor: 'red',underlayColor: 'rgba(255,255,255,1)',margin:10},
										 
										{ component:(<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
										<Icon size={20} color="#fff" name='md-checkmark-circle-outline'/>
										<Text style={{color:'#fff'}}>Accept</Text>
										</View>
                                         ),
										 onPress: () => {this.props.dispatch(acceptRequestData(item.request_id,item.user_id,item.start_date));this.props.navigation.navigate('ResolveRequest')},text: 'Accept',backgroundColor: 'red',underlayColor: 'rgba(255,255,255,1)',margin:10 },
										],
                                 };
						return (
						    <Swipeout  style={styles.swipeBox} {...swipeSettings} key={index}>
							<View style={styles.row} >
								
							<View style={styles.dogimg}>
										     <Image style={styles.dogImage}  source={{uri:this.props.state.serverLink + item.user_image}} alt="user" />
										</View>
							<View style={styles.col_md_10}>
												<Text style={styles.reason}>{item.reason}</Text>
												<Text style={styles.dates}>Date:{item.start_date} to {item.end_date}</Text>
												<Text style={styles.names}>{item.user_first_name} {item.user_last_name}</Text>
										</View>
							
							</View>
							</Swipeout>
						)
						}):<View style={{flexDirection:'row',elevation:1,shadowColor: '#000',shadowOffset: { width: 0, height: 2 },shadowOpacity: 0.8,shadowRadius: 2,}}>
                                 <Text style={{flex:1,fontWeight:'bold',textAlign:'center',padding:10}}>No Request has been made!</Text></View>
						}
					
				</ScrollView>

content inside row is srinking on every swipe this is my code snippet ,could someone help me on this one

[JovanKanevche]

Yes, I have the same problem.

[EyalSi]

Seems like moving to react native 0.55.2/0.55.3 introduces this problem on iOS. Returning to 0.54.4 fixes the problem. Didn't find other solution yet. opened #262 for that.

[kevinscience]

I have same problem!

[xiyangL]

same

[pinguinjkeke]

@EyalSi upgrade to 0.54.4 not fixed this problem for me.

[pinguinjkeke]

There is dirty hack for it: you can change image width by 0.1 on swipeout's onOpen and onClose callbacks and it will be rendered.

[superhawk610]

This only occurs when a right swipeout is used, I can't replicate it on a left swipeout.

[EyalSi]

@pinguinjkeke can you plz share how exactly did you solve it?

[mysport12]

Check out this resolved issue: https://github.com/facebook/react-native/issues/19302

[kenanlalic]

@mysport12 sorry but it does not solve it

[salahkhat]

It is solved by the translate only if the buttons are on the right, otherwise if the buttons are on the left, they shrink. And if I try to increase the scaleX of the buttons rather than changing their width, the result is disastrous.

checkout these screenshots :