PokedexListScreen

Animated scrollable list displaying all Generation 1 Pokémon with smooth parallax effects

Overview

The PokedexListScreen component provides a browsable list of all 151 Generation 1 Pokémon. It features smooth scroll-based animations, parallax effects, and seamless navigation to individual Pokémon details.

Location: ~/workspace/source/src/features/pokedex/PokedexListScreen.js

Props

navigation · object · required

React Navigation object for screen navigation

Show properties

navigate · function

Navigate to other screens (e.g., navigate('Details', { pokemonId: 25 }))

Purpose

This screen serves as a comprehensive Pokédex browser allowing users to:

• View all available Pokémon in a scrollable list
• See Pokémon sprites, names, and ID numbers
• Navigate to detailed views for any Pokémon
• Experience smooth scroll-based animations

State Management

pokemonList · array · default: "[]"

Array of Pokémon data objects

Show item properties

id · number

Pokémon ID (1-151)

name · string

Pokémon name in lowercase

image · string

URL to Pokémon sprite image

loading · boolean · default: "true"

Indicates whether data is being fetched from PokéAPI

scrollY · Animated.Value · default: "0"

Animated value tracking vertical scroll position for parallax effects

Data Fetching

Fetches the first 151 Pokémon from PokéAPI on component mount:

useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon?limit=151')
        .then(res => res.json())
        .then(data => {
            const formattedList = data.results.map((item, index) => ({
                name: item.name,
                id: index + 1,
                image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`
            }));
            setPokemonList(formattedList);
            setLoading(false);
        });
}, []);

The component uses the GitHub-hosted sprites directly rather than fetching individual Pokémon data for better performance

List Rendering

Animated FlatList

The component uses an Animated.FlatList for smooth scroll animations:

<Animated.FlatList
    data={pokemonList}
    keyExtractor={(item) => item.id.toString()}
    onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        { useNativeDriver: true }
    )}
    renderItem={renderItem}
    contentContainerStyle={styles.listPadding}
    snapToInterval={ITEM_SIZE}
    decelerationRate="fast"
/>

ITEM_SIZE · number · default: "120"

Height of each list item in pixels, used for snap-to behavior

Scroll Animations

Each list item features three coordinated animations:

1. Horizontal Translation (Parallax)

const translateX = scrollY.interpolate({
    inputRange,
    outputRange: [100, 0, 100],
    extrapolate: 'clamp',
});

2. Scale Effect

const scale = scrollY.interpolate({
    inputRange,
    outputRange: [0.8, 1.1, 0.8],
    extrapolate: 'clamp',
});

3. Opacity Fade

const opacity = scrollY.interpolate({
    inputRange,
    outputRange: [0.4, 1, 0.4],
    extrapolate: 'clamp',
});

Input Range Calculation

Animation input range is calculated relative to each item’s position:

const itemPosition = index * ITEM_SIZE;

const inputRange = [
    itemPosition - height,
    itemPosition - height / 2,
    itemPosition + height / 3,
];

List Item Rendering

Each Pokémon card displays ID, name, and sprite:

const renderItem = ({ item, index }) => {
    const itemPosition = index * ITEM_SIZE;
    
    const inputRange = [
        itemPosition - height,
        itemPosition - height / 2,
        itemPosition + height / 3,
    ];
    
    const translateX = scrollY.interpolate({
        inputRange,
        outputRange: [100, 0, 100],
        extrapolate: 'clamp',
    });
    
    const scale = scrollY.interpolate({
        inputRange,
        outputRange: [0.8, 1.1, 0.8],
        extrapolate: 'clamp',
    });
    
    const opacity = scrollY.interpolate({
        inputRange,
        outputRange: [0.4, 1, 0.4],
        extrapolate: 'clamp',
    });
    
    return (
        <Animated.View
            style={[
                styles.cardContainer,
                {
                    transform: [{ translateX }, { scale }],
                    opacity
                }
            ]}
        >
            <TouchableOpacity
                activeOpacity={0.8}
                style={styles.card}
                onPress={() => navigation.navigate('Details', { 
                    pokemonId: item.id 
                })}
            >
                <View style={styles.idContainer}>
                    <Text style={styles.idText}>
                        #{String(item.id).padStart(3, '0')}
                    </Text>
                </View>
                <Text style={styles.pokeName}>
                    {item.name.toUpperCase()}
                </Text>
                <Image 
                    source={{ uri: item.image }} 
                    style={styles.pokeImage} 
                />
            </TouchableOpacity>
        </Animated.View>
    );
};

Card Design

ID Number

Zero-padded three-digit format:

#{String(item.id).padStart(3, '0')}
// Examples: #001, #025, #151

Pokémon Name

Displayed in uppercase:

{item.name.toUpperCase()}
// Examples: BULBASAUR, PIKACHU, MEW

Sprite Image

70x70 pixel sprite from GitHub:

<Image 
    source={{ uri: item.image }} 
    style={styles.pokeImage} 
/>

Decorative Elements

Pokéball Background

Large semi-transparent Pokéball circle for visual depth:

<View style={styles.pokeballDecorator} />

Styling:

pokeballDecorator: {
    position: 'absolute',
    left: 250,
    top: height / 2 - 160,
    width: 320,
    height: 320,
    borderRadius: 160,
    borderWidth: 12,
    borderColor: 'rgba(244, 67, 54, 0.15)',
    zIndex: -1
}

Navigation Integration

Tapping any Pokémon card navigates to its detail view:

onPress={() => navigation.navigate('Details', { pokemonId: item.id })}

Loading State

Displays centered loading indicator during initial fetch:

if (loading) return (
    <View style={styles.loader}>
        <ActivityIndicator size="large" color={theme.colors.primary} />
    </View>
);

Performance Optimizations

Native Driver

All animations use the native driver for 60fps performance:

onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    { useNativeDriver: true }
)}

Snap Behavior

Smooth scroll-to-item behavior:

snapToInterval={ITEM_SIZE}
decelerationRate="fast"

Key Extractor

Efficient list rendering with unique keys:

keyExtractor={(item) => item.id.toString()}

Card Styling

Cards feature a distinctive design with left border accent:

card: {
    backgroundColor: theme.colors.surface,
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderRadius: 45,
    borderLeftWidth: 12,
    borderLeftColor: theme.colors.primary,
    width: '75%',
    elevation: 4,
    justifyContent: 'space-between',
}

Dependencies

• react-native - Core components (Animated, FlatList, Dimensions)
• react-native-safe-area-context - Safe area handling
• Theme configuration for colors and styling

Usage Example

import { PokedexListScreen } from './features/pokedex/PokedexListScreen';

// In your navigation stack
<Stack.Screen 
    name="PokedexList" 
    component={PokedexListScreen}
    options={{ 
        title: 'Pokédex',
        headerStyle: { backgroundColor: theme.colors.primary }
    }}
/>

Integration with Other Screens

The PokedexListScreen integrates with:

• DetailsScreen: Each list item navigates to detailed Pokémon information
• Navigation Stack: Typically accessed from the main menu or home screen

// Example navigation flow
Home → PokedexList → Details (pokemonId: 25)

The component is read-only and does not modify any data. All interactions result in navigation to detail views.