Header error on native base web

[clayrisser]

I am getting the following error when using the Header.js component on the web.

The header displays and operates correctly. It just throws the following error in the browser console.

index.js:38 Warning: Received `false` for a non-boolean attribute `uppercase`.

If you want to write it to the DOM, pass a string instead: uppercase="false" or uppercase={value.toString()}.

If you used to conditionally omit it with uppercase={condition && value}, pass uppercase={condition ? value : undefined} instead.
    in div (created by Text)
    in Text (at Text.js:30)
    in Text (at connectStyle.js:384)
    in Styled(Text) (at MainContent.js:26)
    in a (created by Link)
    in Link (at MainContent.js:25)
    in div (created by View)
    in View (at Header.js:102)
    in div (created by View)
    in View (at Header.js:67)
    in Header (at connectStyle.js:384)
    in Styled(Header) (at MainContent.js:19)
    in div (created by View)
    in View (at Container.js:15)
    in Container (at connectStyle.js:384)
    in Styled(Container) (at MainContent.js:18)
    in MainContent (at Home.js:47)
    in Home (created by Connect(Home))
    in Connect(Home) (created by Route)
    in Route (at index.js:12)
    in Switch (at index.js:10)
    in Routes (at App.js:6)
    in App (at Reaction.js:45)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Connect(ConnectedRouter))
    in Connect(ConnectedRouter) (at Reaction.js:44)
    in PersistGate (at Reaction.js:43)
    in Provider (at Reaction.js:42)
    in Reaction (at ClientApp.js:13)
    in StyleProvider (at ClientApp.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at ClientApp.js:11)
    in ClientApp
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

Here is how I am using the Header

        <Header
          style={{
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <Link to="/home">
            <Text style={{ fontSize: 24 }}>{config.title}</Text>
          </Link>
        </Header>

Also, here is the theme styling I'm using for Header

import { PixelRatio, StatusBar } from 'react-native';
import variable from '~/theme/variables/platform';

export default (variables = variable) => {
  const { platform, platformStyle } = variables;
  const headerTheme = {
    '.span': {
      height: 128,
      'NativeBase.Left': {
        alignSelf: 'flex-start'
      },
      'NativeBase.Body': {
        alignSelf: 'flex-end',
        alignItems: 'flex-start',
        justifyContent: 'center',
        paddingBottom: 26
      },
      'NativeBase.Right': {
        alignSelf: 'flex-start'
      }
    },
    '.hasSubtitle': {
      'NativeBase.Body': {
        'NativeBase.Title': {
          fontSize: variables.titleFontSize - 2,
          fontFamily: variables.titleFontfamily,
          textAlign: 'center',
          fontWeight: '500',
          paddingBottom: 3
        },
        'NativeBase.Subtitle': {
          fontSize: variables.subTitleFontSize,
          fontFamily: variables.titleFontfamily,
          color: variables.subtitleColor,
          textAlign: 'center'
        }
      }
    },
    '.transparent': {
      backgroundColor: 'transparent',
      borderBottomColor: 'transparent',
      elevation: 0,
      shadowColor: null,
      shadowOffset: null,
      shadowRadius: null,
      shadowOpacity: null,
      paddingTop: platform === 'android' ? StatusBar.currentHeight : undefined,
      height:
        platform === 'android'
          ? variables.toolbarHeight + StatusBar.currentHeight
          : variables.toolbarHeight
    },
    '.noShadow': {
      elevation: 0,
      shadowColor: null,
      shadowOffset: null,
      shadowRadius: null,
      shadowOpacity: null
    },
    '.hasTabs': {
      elevation: 0,
      shadowColor: null,
      shadowOffset: null,
      shadowRadius: null,
      shadowOpacity: null,
      borderBottomWidth: null
    },
    '.hasSegment': {
      elevation: 0,
      shadowColor: null,
      shadowOffset: null,
      shadowRadius: null,
      shadowOpacity: null,
      borderBottomWidth: null,
      'NativeBase.Left': {
        flex: 0.3
      },
      'NativeBase.Right': {
        flex: 0.3
      },
      'NativeBase.Body': {
        flex: 1,
        'NativeBase.Segment': {
          marginRight: 0,
          alignSelf: 'center',
          'NativeBase.Button': {
            paddingLeft: 0,
            paddingRight: 0
          }
        }
      }
    },
    '.noLeft': {
      'NativeBase.Left': {
        width: platform === 'ios' ? undefined : 0,
        flex: platform === 'ios' ? 1 : 0
      },
      'NativeBase.Body': {
        'NativeBase.Title': {
          paddingLeft: platform === 'ios' ? undefined : 10
        },
        'NativeBase.Subtitle': {
          paddingLeft: platform === 'ios' ? undefined : 10
        }
      }
    },
    'NativeBase.Button': {
      justifyContent: 'center',
      alignSelf: 'center',
      alignItems: 'center',
      '.transparent': {
        'NativeBase.Text': {
          color: variables.toolbarBtnTextColor,
          fontWeight: '600'
        },
        'NativeBase.Icon': {
          color: variables.toolbarBtnColor
        },
        'NativeBase.IconNB': {
          color: variables.toolbarBtnColor
        },
        paddingHorizontal: variables.buttonPadding
      },
      paddingHorizontal: 15
    },
    '.searchBar': {
      'NativeBase.Item': {
        'NativeBase.Icon': {
          backgroundColor: 'transparent',
          color: variables.dropdownLinkColor,
          fontSize: variables.toolbarSearchIconSize,
          alignItems: 'center',
          marginTop: 2,
          paddingRight: 10,
          paddingLeft: 10
        },
        'NativeBase.IconNB': {
          backgroundColor: 'transparent',
          color: null,
          alignSelf: 'center'
        },
        'NativeBase.Input': {
          alignSelf: 'center',
          lineHeight: null,
          height: variables.searchBarInputHeight
        },
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'flex-start',
        flex: 1,
        height: variables.searchBarHeight,
        borderColor: 'transparent',
        backgroundColor: variables.toolbarInputColor
      },
      'NativeBase.Button': {
        '.transparent': {
          'NativeBase.Text': {
            fontWeight: '500'
          },
          paddingHorizontal: null,
          paddingLeft: platform === 'ios' ? 10 : null
        },
        paddingHorizontal: platform === 'ios' ? undefined : null,
        width: platform === 'ios' ? undefined : 0,
        height: platform === 'ios' ? undefined : 0
      }
    },
    '.rounded': {
      'NativeBase.Item': {
        borderRadius:
          platform === 'ios' && platformStyle !== 'material' ? 25 : 3
      }
    },
    'NativeBase.Left': {
      'NativeBase.Button': {
        '.hasText': {
          marginLeft: -10,
          height: 30,
          'NativeBase.Icon': {
            color: variables.toolbarBtnColor,
            fontSize: variables.iconHeaderSize,
            marginTop: 2,
            marginRight: 5,
            marginLeft: 2
          },
          'NativeBase.Text': {
            color: variables.toolbarBtnTextColor,
            fontSize: platform === 'ios' ? 17 : 0,
            marginLeft: 7,
            lineHeight: 19.5
          },
          'NativeBase.IconNB': {
            color: variables.toolbarBtnColor,
            fontSize: variables.iconHeaderSize,
            marginTop: 2,
            marginRight: 5,
            marginLeft: 2
          }
        },
        '.transparent': {
          marginLeft:
            platform === 'ios' && platformStyle !== 'material' ? -3 : 0,
          'NativeBase.Icon': {
            color: variables.toolbarBtnColor,
            fontSize:
              platform === 'ios' && variables.platformStyle !== 'material'
                ? variables.iconHeaderSize + 1
                : variables.iconHeaderSize,
            marginTop: 0,
            marginRight: 2,
            marginLeft: 1,
            paddingTop: 1
          },
          'NativeBase.IconNB': {
            color: variables.toolbarBtnColor,
            fontSize:
              platform === 'ios' && variables.platformStyle !== 'material'
                ? variables.iconHeaderSize + 1
                : variables.iconHeaderSize - 2,
            marginTop: 0,
            marginRight: 2,
            marginLeft: 1,
            paddingTop: 1
          },
          'NativeBase.Text': {
            color: variables.toolbarBtnTextColor,
            fontSize: platform === 'ios' ? 17 : 0,
            top: platform === 'ios' ? 1 : -1.5,
            paddingLeft:
              platform === 'ios' && platformStyle !== 'material' ? 2 : 5,
            paddingRight:
              platform === 'ios' && platformStyle !== 'material'
                ? undefined
                : 10
          },
          backgroundColor: 'transparent',
          borderColor: null,
          elevation: 0,
          shadowColor: null,
          shadowOffset: null,
          shadowRadius: null,
          shadowOpacity: null
        },
        'NativeBase.Icon': {
          color: variables.toolbarBtnColor
        },
        'NativeBase.IconNB': {
          color: variables.toolbarBtnColor
        },
        alignSelf: null,
        paddingRight: variables.buttonPadding,
        paddingLeft: platform === 'ios' && platformStyle !== 'material' ? 4 : 8
      },
      flex: platform === 'ios' && platformStyle !== 'material' ? 1 : 0.4,
      alignSelf: 'center',
      alignItems: 'flex-start'
    },
    'NativeBase.Body': {
      flex: 1,
      alignItems:
        platform === 'ios' && platformStyle !== 'material'
          ? 'center'
          : 'flex-start',
      alignSelf: 'center',
      'NativeBase.Segment': {
        borderWidth: 0,
        alignSelf: 'flex-end',
        marginRight: platform === 'ios' ? -40 : -55
      },
      'NativeBase.Button': {
        alignSelf: 'center',
        '.transparent': {
          backgroundColor: 'transparent'
        },
        'NativeBase.Icon': {
          color: variables.toolbarBtnColor
        },
        'NativeBase.IconNB': {
          color: variables.toolbarBtnColor
        },
        'NativeBase.Text': {
          color: variables.inverseTextColor,
          backgroundColor: 'transparent'
        }
      }
    },
    'NativeBase.Right': {
      'NativeBase.Button': {
        '.hasText': {
          height: 30,
          'NativeBase.Icon': {
            color: variables.toolbarBtnColor,
            fontSize: variables.iconHeaderSize - 2,
            marginTop: 2,
            marginRight: 2,
            marginLeft: 5
          },
          'NativeBase.Text': {
            color: variables.toolbarBtnTextColor,
            fontSize: platform === 'ios' ? 17 : 14,
            lineHeight: 19.5
          },
          'NativeBase.IconNB': {
            color: variables.toolbarBtnColor,
            fontSize: variables.iconHeaderSize - 2,
            marginTop: 2,
            marginRight: 2,
            marginLeft: 5
          }
        },
        '.transparent': {
          marginRight: platform === 'ios' ? -9 : -5,
          paddingLeft: 15,
          paddingRight: 12,
          paddingHorizontal: 15,
          borderRadius: 50,
          'NativeBase.Icon': {
            color: variables.toolbarBtnColor,
            fontSize:
              platform === 'ios' && variables.platformStyle !== 'material'
                ? variables.iconHeaderSize - 9
                : variables.iconHeaderSize - 2,
            marginTop: 0,
            marginLeft: 2,
            marginRight: 0
            // paddingTop: 0
          },
          'NativeBase.IconNB': {
            color: variables.toolbarBtnColor,
            fontSize:
              platform === 'ios' && variables.platformStyle !== 'material'
                ? variables.iconHeaderSize - 9
                : variables.iconHeaderSize - 2,
            marginTop: 0,
            marginLeft: 2,
            marginRight: 0
            // paddingTop: 0
          },
          'NativeBase.Text': {
            color: variables.toolbarBtnTextColor,
            fontSize: platform === 'ios' ? 17 : 14,
            top: platform === 'ios' ? 1 : -1.5,
            paddingRight:
              platform === 'ios' && variables.platformStyle !== 'material'
                ? 0
                : undefined
          },
          backgroundColor: 'transparent',
          borderColor: null,
          elevation: 0,
          shadowColor: null,
          shadowOffset: null,
          shadowRadius: null,
          shadowOpacity: null
        },
        'NativeBase.Icon': {
          color: variables.toolbarBtnColor
        },
        'NativeBase.IconNB': {
          color: variables.toolbarBtnColor
        },
        alignSelf: null,
        paddingHorizontal: variables.buttonPadding
      },
      flex: 1,
      alignSelf: 'center',
      alignItems: 'flex-end',
      flexDirection: 'row',
      justifyContent: 'flex-end'
    },
    backgroundColor: variables.toolbarDefaultBg,
    flexDirection: 'row',
    // paddingHorizontal: 10,
    paddingLeft:
      platform === 'ios' && variables.platformStyle !== 'material' ? 6 : 10,
    paddingRight: 10,
    justifyContent: 'center',
    paddingTop: platform === 'ios' ? 18 : 0,
    borderBottomWidth:
      platform === 'ios' ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
    borderBottomColor: variables.toolbarDefaultBorder,
    height:
      variables.platform === 'ios' && variables.platformStyle === 'material'
        ? variables.toolbarHeight + StatusBar.height
        : variables.toolbarHeight,
    elevation: 3,
    shadowColor: platformStyle === 'material' ? '#000' : undefined,
    shadowOffset:
      platformStyle === 'material' ? { width: 0, height: 2 } : undefined,
    shadowOpacity: platformStyle === 'material' ? 0.2 : undefined,
    shadowRadius: platformStyle === 'material' ? 1.2 : undefined,
    top: 0,
    left: 0,
    right: 0
  };
  return headerTheme;
};

[oxyii]

It's not a Header problem. It's Text tag problem.

+1 Same error on Text tag inside Button component on RNWeb

[SynerG]

There are also other props that are passed down and generate the same warning.
I have just met this two:

• note passed down to Text
• active passed down from Icon/index.js to IconNB

The props defined by native-base that are not used by children components should be removed (as proposed by @oxyii) instead of spreading the complete ...this.propson them

[clayrisser]

Sometimes I like to pass down all props except the ones that throw errors. You can do it the following way without corrupting the original component's props.

render() {
  const props = {...this.props};
  delete props.one;
  delete props.two;
  return (
    <div props={...props} />
  );
}

[TerrenceFong]

@codejamninja hey bro, how did you fix this warning?

[clayrisser]

@TerrenceFong I cloned the props and then removed the ones that gave errors. Look at my example.

#2176 (comment)

[hanykumar]

Hi @codejamninja , NativeBase v2.13.14 has been released. I did not find any such issue with Header. Closing this now due to inactivity. Please provide minimal code reproduction on snack for the same if the issue still persists.
Thanks