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
Nativebase logo
MadeWithNativeBase