Nativebase: Can only update a mounted or mounting component. Please check the code for the Icon component.

[clems36]

Hi,

react-native 43.4, react 16.0.0-alpha.6, native-base: 2.1.3

Expected behaviour

The Icons should display without a warning.

Actual behaviour

The Icons display correctly but I get a warning:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is no-op.
Please check the code for the Icon component.

Steps to reproduce (code snippet or screenshot)

Relevant code situated inside the render function:

{checkins.map((checkin, index) => {
const addTime = formatTime(checkin.date);
let errorCode;
if (checkin.errorCode) {
    errorCode = checkin.errorCode;
}
if (checkin) {
    return (
        <View key={index} style={s.rowView}>
               <View style={s.row}>
                        <Text style={s.smallColumn}>{addTime}</Text>
                        <Text style={s.bigColumn}>{checkin.client.name} ({checkin.client.id})</Text>
                        <Text style={s.smallColumn}>
                              {checkin.checkInStatus === 'NOT_SENT_YET' &&
                                      <Icon name="time" style={{ color: '#77a5ef' }} />
                              }
                              {checkin.checkInStatus === 'ERROR' &&
                                      <Icon name="close" style={{ color: 'red' }} />
                               }
                              {checkin.checkInStatus === 'OK' &&
                                       <Icon name="checkmark" style={{ color: 'green' }} />
                               }
                               {checkin.checkInStatus === 'MISSING_INFO' &&
                                        <Icon name="alert" style={{ color: 'orange' }} />
                               }
                          </Text>
                 </View>
                  {checkin.checkInStatus === 'ERROR' && checkin.errorCode &&
                         <Text style={s.errorMessage}>{checkin.errorCode}</Text>
                   }
          </View>
     );
}

I think the warning is due to the Icon being returned in a map function but I don't know why.
Thanks!

[shivrajkumar]

@clementino36 This is because, initially you don't have any Icon mounted to be displayed and are trying to display it on condition. This conditional use case won't work unless you mount an Icon initially and then change it on conditions.

[clems36]

Thanks for your answer. The condition works though, the icons appear correctly, I only get the warnings which is a little annoying.
So you suggest that I initialize the icons before I display them ? How can I do that ?

[shivrajkumar]

Check https://github.com/gaearon/react-hot-loader/issues/457#issuecomment-273920552.
This might be, if you are using setState for your checkin values.

[shivrajkumar]

Closing this, as this is not related to NativeBase

[stevenyap]

@clementino36 I don't think there is anything wrong with your code and I don't understand what is mounting a component first and then change it on conditions...

However, I have also encountered the same issue with Icon and it turns out that the warning arises from a change in my redux state while the component (with the Icon) is rendering.
Specially, my register screen component is rendering with the icons and while that is happening, my redux state has changed (user has login before from redux-persist) and the register screen component has to be unmounted in the midst of its rendering which causes the warning.

If you still have this warning, you may try to see if there is any external factors that are forcing a re-render of your component.

Hope this helps!

[clems36]

I guess I'm in the same case, my component rerenders several times. Did you do anything to make the warning go away or did you just leave it ? It doesn't bother me that much.

[stevenyap]

My warning has gone away after I found the external factor forcing a re-render.
if your component re-renders several times, you need to check through carefully internally (if you have setState) and externally (redux/parent component/etc) what is causing it.

After you found it, the warning should go away.

[clems36]

Thank you