Rangle.io: React Native Workshop
gitbook
gitbook
  • Introduction
  • Setup
    • Hello World
    • Debugging
  • Core Concepts
    • Components
    • Styles
    • Flexbox
    • APIs
  • Navigation
    • Navigation Experimental
    • Creating Some Helpers
    • The Navigator Component
  • ListView (Pokédex)
    • List View
    • List View: Render Row
    • Text Input
    • Keyboard Spacer
  • Selectors (Filtering)
  • Animation
    • LayoutAnimation
    • Animated
      • Animated.Value
      • Timing, Spring & Decay
      • Animated Components
      • More Animated
    • Resources
    • Exercise
  • ScrollView (Pokemon Details)
  • MapView
  • Testing
  • Gesture Responder System
    • PanResponder
Powered by GitBook
On this page

Was this helpful?

  1. Animation

Exercise

PreviousResourcesNextScrollView (Pokemon Details)

Last updated 6 years ago

Was this helpful?

Build a Loader component that accepts one property: show. If show is set to true then it displays a pulsing pikachu otherwise it displays whatever content is passed in as children.

Modify the Pokedex & PokemonDetails components to use the Loader.

<Loader show={ !pokemon.get('name') }>
  <ScrollView style={ styles.container }>
    <Sprites sprites={ pokemon.get('sprites') } />
    <BasicInfo { ...basicInfo } />
    <Header>STATS</Header>
    <Stats stats={ pokemon.get('stats') } />
    <Header>MOVES</Header>
    <Moves moves={ pokemon.get('moves') } />
  </ScrollView>
</Loader>