Hidden | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Hidden
Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't 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
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.
Type: LiteralUnion<"ios" | "android" | "web", string> | LiteralUnion<"ios" | "android" | "web", string>[]
Nativebase logo
MadeWithNativeBase