Hidden | NativeBase

Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).

Hidden

Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It does not mount the child components in the restricted values of props.

Import

Copy
import { Hidden } from 'native-base';

Example

Basic

Copy
<Hidden>
  <Box bg="red.400" p="2">
    <Text>This text will be always hidden.</Text>
  </Box>
</Hidden>

Hidden according to breakpoints

Copy
<>
  <Hidden from="sm" till="lg">
    <Box bg="red.400" p="2">
      <Text>This text will be hidden from sm to lg screens.</Text>
    </Box>
  </Hidden>
  <Hidden only={['sm', 'lg']}>
    <Box bg="red.400" p="2">
      <Text>This text will be hidden on sm and lg screens only.</Text>
    </Box>
  </Hidden>
</>

Hidden according to colorMode


Playground
function ColorModeExample() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <>
      <Button colorScheme={colorMode === "light" ? "blue" : "red"} onPress={() => {
      toggleColorMode();
    }}>
        Change mode
      </Button>
      <Hidden colorMode="light">
        <Box bg="yellow.400" p="2" mt="5">
          <Text>This text will be hidden on light mode</Text>
        </Box>
      </Hidden>
      <Hidden colorMode="dark">
        <Box bg="green.400" p="2" mt="5">
          <Text>This text will be hidden on dark mode</Text>
        </Box>
      </Hidden>
    </>;
}function ColorModeExample() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <>
      <Button colorScheme={colorMode === "light" ? "blue" : "red"} onPress={() => {
      toggleColorMode();
    }}>
        Change mode
      </Button>
      <Hidden colorMode="light">
        <Box bg="yellow.400" p="2" mt="5">
          <Text>This text will be hidden on light mode</Text>
        </Box>
      </Hidden>
      <Hidden colorMode="dark">
        <Box bg="green.400" p="2" mt="5">
          <Text>This text will be hidden on dark mode</Text>
        </Box>
      </Hidden>
    </>;
}

Hidden according to platform

Copy
<Hidden platform={['android', 'web']}>
  <Box bg="red.400" p="2">
    <Text>This text will be hidden on android and web.</Text>
  </Box>
</Hidden>

Props

from

The from prop takes breakpoint from which the wrapped component is hidden.

Type: LiteralUnion<"base" | "sm" | "md" | "lg" | "xl", string>

till

The till prop takes breakpoint till which the wrapped component is hidden.

Type: LiteralUnion<"base" | "sm" | "md" | "lg" | "xl", string>

only

The only prop takes array of breakpoints on which the wrapped component is hidden. It hides the component starting from that breakpoint to the next breakpoint.

Type: LiteralUnion<"base" | "sm" | "md" | "lg" | "xl", string> | LiteralUnion<"base" | "sm" | "md" | "lg" | "xl", string>[]

colorMode

The colormode takes the mode on which the wrapped component must be hidden.

Type: "light" | "dark"

platform

The platform takes the platform as string or array for the multiple on which the wrapped component must be hidden.

Fab

ScrollView

Quick Nav