Version: 3.0.7

Transition

NativeBase exports four components: Fade, ScaleFade, Slide, and SlideFade to provide simple transitions.

Import#

NativeBase exports 4 modal-related components:

  • Fade: The wrapper that provides context and functionality for all children.
  • ScaleFade: The empty part of the slider that shows the track.
  • Slide: The filled part of the slider.
  • SlideFade: The handle that's used to change the slider value.
import {
Fade,
ScaleFade
Slide,
SlideFade
SliderTrack,
SliderFilledTrack,
SliderThumb,
} from "native-base";

Examples#

Fade#

ScaleFade#

Slide#

Slide wrapped inside parent#

Slide Composition#

SlideFade#

Props#

Fade#

NameTypeDescriptionDefault
inbooleanShow the component; triggers the enter or exit states.-
durationnumberDuration of animation in mili second.500

Scale Fade#

NameTypeDescriptionDefault
inbooleanShow the component; triggers the enter or exit states.-
durationnumberDuration of animation in mili second.500
initialScalenumberThe initial scale to animate from.0.9

Slide#

NameTypeDescriptionDefault
inbooleanShow the component; triggers the enter or exit states.-
durationnumberDuration of animation in mili second.500
placementtop ,bottomThe direction to slide drawer from.bottom

SlideFade#

NameTypeDescriptionDefault
inbooleanShow the component; triggers the enter or exit states.-
durationnumberDuration of animation in mili second.500
offsetXnumberThe initial offset to slide from.10
offsetYnumberThe initial offset to slide from.10