Error while updating property 'transform' of a view managed by: RCTView

[peterchibunna]

I get the red screen error as named above, followed by null and then another line that just reads: For input string: "0deg".

What could be the problem?

[var77]

Hi @peterchibunna can you share a code?

[peterchibunna]

render() {
        return (
         <Container>
             {!this.state.loading && this.state.displayedCards.length > 0 ?
              this.state.displayedCards.map((item) => {
                  return (
                     <Card
                      key={item.email}
                      onSwipeRight={this.handleRelease.bind(this, 1)}
                      onSwipeLeft={this.handleRelease.bind(this, 0)}
                      onSwipeCenter={this.handleRelease.bind(this, -1)}
                      onRelease={() => true}
                      onRightAnimationEnd={() => true}
                      onLeftAnimationEnd={() => true}
                      onCenterAnimationEnd={() => true}
                      onReleaseAnimationEnd={() => true}
                      swipeLength={width / 5}
                     >
                         <ImageBackground style={{
                             flex: 1,
                             width: null,
                             height, 
                             backgroundColor: 'white',
                             flexDirection: 'column',
                             justifyContent: 'space-around',
                         }} source={require('../images/amazing_2-wallpaper-1280x1280.jpg')}>
                             <View style={{
                                 justifyContent: 'center',
                                 alignItems: 'center',
                                 flex: 0.2}}>
                                 <Image source={{uri: item.picture.large}} style={styles.profilePhoto} />
                             </View>
                             <Text style={[styles.topLabel,]}>Is {item.gender === 'female' ? 'she' : 'he'} your type?</Text>
                             <View style={styles.rowContainer}>
                                 <View style={styles.rowContainer}>
                                     <Button raised={true} style={styledButtonsLarge} text={'Yes'} icon={'favorite'} onPress={() => {
                                         this.handleYes(item);
                                     }}/>
                                 </View>
                                 <View style={styles.rowContainer}>
                                     <Button
                                      raised={true} style={styledButtons} text={''} icon={<MaterialCommunityIcon name={'close'} color={'red'} size={26}/>}
                                      onPress={() => this.handleNo(item)}
                                     />
                                     <Button
                                      raised={true} style={styledButtons} text={''} icon={<MaterialCommunityIcon name={'information-variant'} color={'#288eff'} size={26}/>}
                                      onPress={() => alert("Person: " + item.email)}
                                     />
                                 </View>
                             </View>
                         </ImageBackground>

                     </Card>
                  )
              })

              :
                <Spinner visible={this.state.loading} textContent={"Loading matches..."} color={'#c61c98'} textStyle={{color: '#ac1b81'}} overlayColor={'rgba(0, 0, 0, 0.05)'}/>
             }

             {!this.state.loading && this.state.loaded && this.state.allCards.length === 0 ?
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize: 20}}>Failed to load matches! :(</Text>
                    <Text style={{fontSize: 14}}>Probably a network problem</Text>
                    <View style={{height: 50}}/>
                    <Button text={'Retry'} upperCase={false} accent icon={'refresh'} onPress={() => this.componentWillMount()}/>
                </View> : null}

             {this.state.noMoreMatches ?
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize: 20}}>No more matches! :(</Text>
                    <View style={{height: 50}}/>
                    <Button text={'Fetch more'} upperCase={false} accent icon={'refresh'} onPress={() => {
                        this.setState({loaded: false, noMoreMatches: false});
                        this.componentWillMount()
                    }}/>
                </View>
                : null}

         </Container>
        );
    }

[peterchibunna]

that is the render method of my Component.

[peymancyb]

@peterchibunna Hi can you please attach an screen shot of your error?

[var77]

@peterchibunna is the example working for you included in the package? And can you please attach screenshot of your error?

[peterchibunna]

I changed to another component. I'll have to plug back my code later and attach the screenshot you require.

[ghost]

I am also encountering this error Error while updating property 'transform' of a view managed by: RCTView

[ghost]

Just to clarify, I am using fresh install of react-native-swiping-cards and using this code:

class App extends Component {
    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                 <Card
                      onSwipeRight={() => true}
                      onSwipeLeft={() => true}
                      onSwipeCenter={() => true}
                      onRelease={() => true}
                      onRightAnimationEnd={() => true}
                      onLeftAnimationEnd={() => true}
                      onCenterAnimationEnd={() => true}
                      onReleaseAnimationEnd={() => true}
                 >
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                      <Image source={{uri: "https://source.unsplash.com/random"}} />
                    </View>
                 </Card> 
            </View>
        );
    }
}

Error is as follows:

Error while updating property 'transform' of a view managed by: RCTView
null
For input string: "0deg"