Button backgroundColor not changing after component rerendered

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

I tried to dynamically change the backgroundColor of a button by setting a variable as the value of the backgroundColor. Even though the component was rerendering, the styling value was not changing. I logged the value of variable below the user. As we can see, after pressing the Button, the component is rerendering and the value does change but the backgroundColor does not.

After changing the button Component to a TouchableOpacity component and design the Button myself, it did work.

node, npm, react-native, react and native-base version, expo version if used, xcode version

Node : 10.16.0 NPM : 6.10.2 React : 16.8.6 React-Native : 0.60.4 Native-Base : 2.13.0

Expected behaviour

The backgroundColor should change when the component is rerendering and the value of it is changing.

Actual behaviour

The backgroundColor did not change, the only way of doing so was to manually rerender the component by pressing the Display button to reshow the components.

Steps to reproduce

This is my Icon wrapped inside a Button component from native-base.

            <Button
                style={[
                  wallStyling.buttonIcon,
                  { backgroundColor: isMagnified },
                ]}
                onPress={() => this.handleMagnifyMessage(message)}
              >
                <Icon active name="md-resize" style={wallStyling.icon} />
              </Button>

The variable was defined as : const isMagnified = magnifiedMessage === message._id ? 'green' : '#0078FF'; This is the workaround I used, I had to create my own button Component by using a TouchableOpacity from react-native instead of a Button from native-base. It was working after using TouchableOpacity.

              <TouchableOpacity
                style={[
                  wallStyling.buttonIcon,
                  {
                    backgroundColor: isMagnified,
                    alignSelf: 'center',
                    color: '#fff',
                    paddingHorizontal: 17,
                    paddingVertical: 12,
                    justifyContent: 'center',
                  },
                ]}
                onPress={() => this.handleMagnifyMessage(message)}
              >
                <Icon active name="md-resize" style={wallStyling.icon} />
              </TouchableOpacity>

Is the bug present in both iOS and Android or in any one of them?

I only tried on Android.

Any other additional info which would help us debug the issue quicker.

I also tried to set the backgroundColor on the Icon directly but it didn’t change anything. To make it work using only an Icon, I had to wrap it in a View component and set the backgroundColor to it.

[lwintjen]

@PlabanJr It now works, thanks for your snippet. I guess it came from my version of native-base not up to date.

[PlabanJr]

@lwintjen @dgeorgiev I tried this in snack and is working fine. Please check once and if you can reproduce it make the changes to this snack and let me know.