Pushing this issue #665

react: 16.0.0-alpha.6 react-native: 0.44.0 native-base: 2.1.5

Expected Behavior: Tab bar should be under the tab that initialPage is set to

Actual Behavior: The content is displayed of the initial Page but the bar is in the 0 position always, scrolling horizontal slightly makes the bar update to the correct place.

Platform: Only have tried IOS, not sure if it doesn't work in android.

Note: I'm more than willing to fix this myself and submit a PR but I'm not sure where the bar on the active Tab is generated, I've attempted to trace the code but couldn't find it. If anyone can point out where that is created I can probably fix this myself and submit a PR. Thanks!

Hi Im in the phase of starting to learn react native and also use nativebase as its template. My main question here is the support of RTL layouts for multi culture apps. Does nativeBase support RTL and is there any guide regarding this matter?

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] 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

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

node: v12.14.1 npm: 6.14.4 react-native: 0.62.0 native-base: 2.13.12

Expected behaviour

Actual behaviour

Get some warning in react-native console since react-native 0.62.0. WARN Animated: "useNativeDriver" was not specified. This is a required option and must be explicitly set to "true" or "false".

Steps to reproduce

Just run a react-native app and use some components with animation without specify useNativeDriver, like <Toast>.

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

Both iOS and Android.

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

I am using NativeBase with my ReactNative App. It is running ok. However there is a warning that is bugging me a little bit.

How do I fix the warning below?

When server rendering, you must wrap your application in an to ensure consistent ids are generated between the client and server. [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.wenyang.DanceConnectyCube:162364:111 RCTView View

Hi This is really very nice UI library for react native.

Today I update native-base for tabs crashing in old version. Latest version has other issue and could not resolve through old issue.

Issue Description

Header component is very tall. I checked Header component has extra paddingTop.

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

node: 10.15.0 react-native: 0.59.10 native-base: 2.13.12 xcode: 11.3.1

Expected behaviour

Proper header height.

Actual behaviour

Header height is too tall

Steps to reproduce

Update to latest version.

Here I have a simple component:

import React, { Component } from 'react';
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Icon,
} from 'native-base';

export default class App extends Component {
  render() {
    return(
      <Container>
        <Header>
          <Button transparent>
              <Icon name="ios-arrow-back" />
          </Button>

          <Title>Header</Title>

          <Button transparent>
              <Icon name="ios-menu" />
          </Button>
        </Header>

        <Content>

        </Content>
      </Container>
    );
  }
}

I ran rnpm link like I was told to do in the Getting Started section of the docs. I am getting this error:

Any suggestions? Should I try to link native-base manually following the instructions in the docs?

RN v0.56 is going to introduce a breaking change in terms of upgrading to babel7. babel7 is NOT backwards-compatible with babel6 and hence all the plugins will need to be manually updated to import the new babel scoped packages. Read more here: https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#056 and https://babeljs.io/docs/en/next/v7-migration

Given that native-base's dependencies use babel 6 (native-base-shoutem-theme, react-native-vector-icons amongst the ones I've checked), what is the migration plan? I've tried monkey patching both the packages manually but ES6 imports still fail with my config.

Hi,

I'm using floating label on a simple input. When I pass value to this component, the label subscribe the value. If I enter the input and press something, label works nice. I tried autoFocus but when I just exit, label subscribe again.

"native-base": "^2.0.12", "react-native": "0.42.0", "react": "15.4.2"

Going through the documentation, most of the examples work except for the Input.

class nativeBase extends Component { render() { return ( <Container> <Content>​ <InputGroup borderType='underline' > <Icon name='ios-home' style={{color:'#384850'}}/> <Input placeholder='' /> </InputGroup> </Content> </Container> ); } }

Items with floatingLabels are not rendered correctly when building a release - only a single input is rendered and it looses all properties such as keyboardType, onChangeText, etc

The issue is not present in 2.7.2

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

node v10.9.0 npm 6.4.0 react-native 0.56.0 react 16.4.1 native-base 2.8.0

Expected behaviour

I would expect that the item would look and behave the same in dev and release mode

Actual behaviour

Only an input with no properties is rendered in release mode

Steps to reproduce should include code snippet and screenshot. Include code snippet in

minimal example including screenshots: https://github.com/jalpedersen/native_base_floating

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

Both iOS And Android

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

Unable to resolve "@expo/vector-icons/Fontisto" from "node_modules/native-base/dist/src/basic/IconNB.js"

EDIT Downgrading 2.13.8 is an alternative solution:

• npm i --save-exact [email protected]

Description

why different value get different result? if we give height value to {10} the real height will be set to 40 (given value multiply with 4). But some values has weird behaviour, ex: {13}, {14}, {15}. it will set the real height as same as the given value. it doesn't affect anything if we use HStack/Stack/Box

CodeSandbox/Snack link

https://snack.expo.dev/BYnoRcYTT

Steps to reproduce

<HStack height={14} bgColor="red.500">
  <Text>hahaha</Text>
</Stack>

NativeBase Version

3.4.25

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

Description

In version 3.4.25 the input props roundedRight, roundedLeft, borderLeftRadius, borderRightRadius are not working. But rounded={0} and borderRadius={0} are working.

NativeBase Version

3.4.25

Platform

• [x] Android
• [ ] CRA
• [x] Expo
• [x] iOS
• [ ] Next

Description

Cannot extend theme Input baseStyle in dark mode, in the example on snack link below, the input border should be red.500 in dark theme

CodeSandbox/Snack link

https://snack.expo.dev/@foxeyerinx/cannot-mofify-inputborder-darktheme

Steps to reproduce

2. Click on "Toggle" button
3. See error

NativeBase Version

3.4.23

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

Description

In tailwind you can do it like this:

module.exports = {
  theme: {
    colors: {
      'primary': {
        400: '#22d3ee',
        DEFAULT: '#06b6d4',
        600: '#0891b2'
      },
    },
  },
}

Then when you use primary for color the DEFAULT value will be used, you won't need to specify the suffix.

It would be great if native-base can support this in the color palette.

Thank you.

Problem Statement

In my project there are many places that use the same color, for example primary.400, it has become the default primary color for my project. If the DEFAULT key is supported it would reduce the .400 part at many places, and would speed up the development time in the future if I only need to type primary

Proposed Solution or API

If native-base would support this, it would look like this:

extendTheme({
  colors: {
    primary: {
      // ...other colors
      DEFAULT: '#06b6d4'
    }
  }
})

Usage:

<Text color="primary">Hello</Text>

You can add some code in the getColor function to check for the DEFAULT value like this:

// For example, the color value 'primary' is in 'theme.colors.primary' so this would be true
if  (colorValue in theme.colors) {
  return theme.colors[colorValue].DEFAULT
}

Alternatives

No response

Additional Information

No response

Description

I expect that using the startIcon prop, I can define a button variant that has a specific icon by default

CodeSandbox/Snack link

https://snack.expo.dev/@localjo/ec312b

Steps to reproduce

Try to create a custom button variant with an icon:

      Button: {
        variants: {
          mine: {
            bg: 'red.500',
            _icon: { // Not working
              as: Feather,
              name: 'check',
              color: 'white',
              size: 'sm',
            },
            startIcon: { // Not working
              as: Feather,
              name: 'check',
              color: 'white',
              size: 'sm',
            },
            _startIcon: { // Not working
              as: Feather,
              name: 'check',
              color: 'white',
              size: 'sm',
            },
          },
        },
      },

The button will render with no icon. (see Snack)

NativeBase Version

3.4.25

Platform

• [ ] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

Adding a custom _icon to an IconButton variant works fine, so I would expect it to work here too. May be related to #5369

Description

TypeScript for Input stops working after adding baseStyle to it in extendTheme.

CodeSandbox/Snack link

No need.

Steps to reproduce

1. Add baseStyle to Input in extendTheme and declare type according to the documentation For example:

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: props => {
        return {
          color: 'black'
        }
      }
    }
  }
})

type NativeBaseThemeType = typeof nativeBaseTheme

declare module 'native-base' {
  interface ICustomTheme extends NativeBaseThemeType {}
}

2. Use an Input component and try prop suggestions

3. See that there are no prop suggestions

4. If we go further into the TypeScript file of the Input component, we will see this error:

NativeBase Version

3.4.25

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

Visual Studio Code

Additional Information

No response

3. Use an Input component and try prop suggestions

4. See that there are no prop suggestions

5. If we go further into the typescript of the Input component, we can see this error:

Type alias 'IInputProps' circularly references itself.ts(2456)

NativeBase Version

3.4.25

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

Visual Studio Code

Additional Information

No response