Android Crashing on RN 50.4 with illegalViewOperationException #17092
Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS Sierra 10.12.5
Node: 7.9.0
Yarn: 1.3.2
npm: 4.2.0
Watchman: 4.9.0
Xcode: Xcode 8.2.1 Build version 8C1002
Android Studio: 3.0 AI-171.4408382
Packages: (wanted => installed)
react: 16.1.1 => 16.1.1
react-native: 0.50.4 => 0.50.4
Target Platform: Android 6.0.1
-->
Steps to Reproduce
Launch the app normally. Occasionally the app crashes on launch. Reproduced on XiaoMi Mi5 and Samsung Galaxy S5
So far not reproduced on emulator
Expected Behavior
The app should launch normally
Actual Behavior
App crashes on actual device with the following message:
com.facebook.react.uimanager.illegalViewOperationException: trying to set local data for view with unknown tag
Don't seem to be able to reproduce on emulator, but do see these warnings on iOS emulator when executing the same scenario (launching a logged in app)
2017-12-06 11:36:07.498 [warn][tid:main][RCTUIManager.m:462] Warning: Overriding previous layout animation with new one before the first began:
<RCTLayoutAnimationGroup: 0x60800024e8b0; creatingLayoutAnimation: (null); updatingLayoutAnimation: <RCTLayoutAnimation: 0x60800086d280; duration: 0.250000; delay: 0.000000; property: (null); springDamping: 0.000000; initialVelocity: 0.000000; animationType: 5;>; deletingLayoutAnimation: (null)> -> <RCTLayoutAnimationGroup: 0x608000257610; creatingLayoutAnimation: <RCTLayoutAnimation: 0x60800067e300; duration: 0.300000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>; updatingLayoutAnimation: <RCTLayoutAnimation: 0x60800067ed80; duration: 0.300000; delay: 0.000000; property: (null); springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>; deletingLayoutAnimation: <RCTLayoutAnimation: 0x60800067ec00; duration: 0.300000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>>.
2017-12-06 11:36:07.521 [warn][tid:main][RCTView.m:610] (ADVICE) View #424 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.
Reproducible Demo
I'm not sure which part of the code actually produces this problem as it seem like some transition problem. Doesn't happen all the time either - once the app is launched successfully, no other problems until trying to launch again, where the app could launch properly, or it crashes again. So far not reproducable on emulator
App.js render method
render () {
return (
<Provider store={store}>
<RootContainer />
</Provider>
)
}
Root Container render method (Note: using react native router flux v3.43)
render () {
return (
<View style={styles.applicationView}>
<StatusBar barStyle='light-content' />
<NavigationRouter />
<Overlay profile={this.props.overlayText} />}
</View>
)
}
Overlay render method
render(){
return <View pointerEvents='none' style={{ flexDirection: 'column',flex: 1, zIndex: 1, position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0}}>{
this.state.images.map((img, i) =>{
return img
})
}</View>
}
Startup (Splash Screen) code
class SplashScreen extends React.Component {
constructor (props) {
super(props)
this.image = Images.logo
this.startupComplete = this.props.startupComplete
}
componentWillReceiveProps (nextProps) {
if (nextProps.startupComplete !== this.startupComplete) {
this.nextScreen()
}
}
componentDidMount () {
if (this.props.startupComplete) {
this.nextScreen()
} else {
setTimeout(this.nextScreen.bind(this), screenTimeout)
}
}
nextScreen () {
if (this.props.credentials && this.props.credentials.token) { // Go to login screen if token is empty, otherwise go to main screen
NavigationActions.mainScreen({type: 'reset'})
} else {
NavigationActions.loginScreen({type: 'reset'})
}
}
render () {
return (
<View style={styles.centered}>
<Image source={this.image} style={styles.logo} />
</View>
)
}
}
const mapStateToProps = (state) => {
return {
startupComplete: state.login.startupComplete,
credentials: state.login.credentials
}
}
MainScreen render method
render () {
return (
<View style={{flex: 1, backgroundColor: 'transparent', flexDirection: 'column', alignSelf: 'stretch'}}>
<View style={{position: 'absolute', top: 55, bottom: 0, left: 0, right: 0}}>
<AlertMessage title='No Messages to Display' show={this._noRowData()} />
<SwipeListView
contentContainerStyle={styles.listContent}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
enableEmptySections
pageSize={15}
/>
<View style={styles.footer}>
<NavFooter />
</View>
<ActionButton buttonColor='rgba(231,76,60,1)' offsetY={60} position='right' >
<ActionButton.Item textStyle={{fontSize: Fonts.size.small}} buttonColor='green' title={I18n.t('newItem')} onPress={() => this.onCreateItem()}>
<Icon
name='comment-o'
type='font-awesome'
style={styles.actionButtonIcon}
color={Colors.bluebtn}
/>
</ActionButton.Item>
<ActionButton.Item textStyle={{fontSize: Fonts.size.small}} buttonColor='blue' title={I18n.t('newGroup')} onPress={() => this.multipleItems()}>
<Icon
name='bullhorn'
type='font-awesome'
style={styles.actionButtonIcon}
color={Colors.bluebtn}
/>
</ActionButton.Item>
</ActionButton>
</View>
</View>
)
}