Version: Next

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#

import { Hidden } from 'native-base';

Example#

Basic#

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

Hidden according to breakpoints#

<>
<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#

Hidden according to platform#

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

Props#

Name Type Description Default
placement "top-right" | "top-left" | "bottom-right" | "bottom-left" Placement of the Fab bottom-right
label string | Element Text to be displayed in Fab -
icon Element Icon to be displayed in Fab -
renderInPortal boolean Determines whether the Fab should be rendered in a Portal. Refer this solution before using this prop https://github.com/GeekyAnts/NativeBase/issues/3817 true

Fab implements Button, Pressable