You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Environment

Library version: 1.0.0-rc.9 OS version: iPhone 13, iOS 12.5.1

Affected platforms

[X] Android
[X] iOS

Current behavior

Hi, i am using https://www.netguru.com/blog/implement-an-app-store-header-in-react-native-with-sticky-parallax-library for customising the header part. But i am getting an error like Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Screenshot:-

Simulator Screen Shot - iPhone 13 - 2022-10-18 at 13 13 24

Expected behavior

It works without an error.

Reproduction

https://www.netguru.com/blog/implement-an-app-store-header-in-react-native-with-sticky-parallax-library using this repo.

Code:-

import { View, Text, Animated, StyleSheet, Image, TouchableOpacity } from 'react-native'
import React from 'react'
import { StickyParallaxHeader } from "react-native-sticky-parallax-header"
const { event, ValueXY } = Animated
const scrollY = new ValueXY()
export default function StickyComponent() {
    const left = scrollY.y.interpolate({
        inputRange: [0, 110, 160],
        outputRange: [24, 24, -40],
        extrapolate: 'clamp',
    })

    const arrowOpacity = scrollY.y.interpolate({
        inputRange: [0, 110, 140],
        outputRange: [1, 1, 0],
        extrapolate: 'clamp',
    })
    const renderForeground = () => (
        <View>
            <Image source={{ uri: "https://thumbs.dreamstime.com/b/rainbow-love-heart-background-red-wood-60045149.jpg" }} style={styles.foregroundImage} />
            <View style={styles.foregroundContainer}>
                <Image source={{ uri: "https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg" }} style={styles.foregroundLogo} />
                <View style={styles.foregroundDetails}>
                    <Text style={styles.foregroundDetailsHeader}>The Sims™ Mobile</Text>
                    <Text style={styles.foregroundDetailsDesc}>Play with life.</Text>
                    <View style={styles.foregroundActionsContainer}>
                        <TouchableOpacity style={styles.foregroundActionsButton}>
                            <Text style={styles.headerDetailsButtonTitle}>GET</Text>
                        </TouchableOpacity>
                        <Text style={styles.foregroundActionsButtonTitle}>{`In-App\nPurchases`}</Text>
                        <Image source={{ uri: "https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg" }} style={styles.foregroundActionsShare} resizeMode="contain" />
                    </View>
                </View>
            </View>
        </View>
    )
    const renderBgHeader = () => {
        return (
            <TouchableOpacity style={[styles.headerButtonContainer, { left }]}>
                <Animated.View style={[styles.headerButton, { opacity: arrowOpacity }]}>
                    <Image
                        style={styles.headerImage}
                        resizeMode="contain"
                        source={{ uri: "https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg" }}
                    />
                </Animated.View>
            </TouchableOpacity>
        )
    }
    return (
        <View style={{ flex: 1 }}>
            <StickyParallaxHeader
                headerType="AvatarHeader"
                hasBorderRadius={false}
                backgroundColor="black"
                scrollEvent={event(
                    [{ nativeEvent: { contentOffset: { y: scrollY.y } } }],
                    { useNativeDriver: false }
                )}
                parallaxHeight={430}
                transparentHeader={true}
                foreground={renderForeground}
                header={renderBgHeader}
                snapStartThreshold={50}
                snapStopThreshold={250}
                snapValue={167}
            />
        </View>
    )
}

netguru / sticky-parallax-header