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 :