Hidden | NativeBase

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

Note: Here, the Image will mount and unmount on the basis of colormode.


Playground
const Example = () => {
  const {
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Button colorScheme="coolGray" _light={{
      _text: {
        color: "white"
      }
    }} onPress={() => {
      toggleColorMode();
    }}>
        Change mode
      </Button>
      <Hidden colorMode="dark">
        <Center mt="5">
          <Image w="150" h="150" source={{
          uri: "https://images.unsplash.com/photo-1561566482-5fa7e82d88b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80"
        }} alt="image" />
        </Center>
      </Hidden>
      <Hidden colorMode="light">
        <Center mt="5">
          <Image w="150" h="150" source={{
          uri: "https://images.unsplash.com/photo-1590083948603-b270aff24cc1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
        }} alt="image" />
        </Center>
      </Hidden>
    </Center>;
};const Example = () => {
  const {
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Button colorScheme="coolGray" _light={{
      _text: {
        color: "white"
      }
    }} onPress={() => {
      toggleColorMode();
    }}>
        Change mode
      </Button>
      <Hidden colorMode="dark">
        <Center mt="5">
          <Image w="150" h="150" source={{
          uri: "https://images.unsplash.com/photo-1561566482-5fa7e82d88b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80"
        }} alt="image" />
        </Center>
      </Hidden>
      <Hidden colorMode="light">
        <Center mt="5">
          <Image w="150" h="150" source={{
          uri: "https://images.unsplash.com/photo-1590083948603-b270aff24cc1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
        }} alt="image" />
        </Center>
      </Hidden>
    </Center>;
};

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.

Quick Nav