osamaqarem / react-native-image-colors

Fetch prominent colors from an image.
MIT License
673 stars 37 forks source link

this package is not working #77

Closed gisawebdev closed 11 months ago

gisawebdev commented 1 year ago

Bug

i'm practicing in an expo app i follow all the instructions in the package and i get this error:

Possible Unhandled Promise Rejection (id: 0): Error: Cannot find native module 'ImageColors', js engine: hermes

Environment info

Library Version
expo ~49.0.6
react-native 0.72.3
react-native-image-colors ^2.3.0

Steps To Reproduce

import { View, ActivityIndicator, Dimensions, ScrollView } from 'react-native';
import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Carousel from 'react-native-snap-carousel';
import ImageColors from 'react-native-image-colors';
import { useMovies } from '../hooks/useMovies';
import { MoviePoster } from '../components/MoviePoster';
import HorizontalSlider from '../components/HorizontalSlider';
import GradientBackground from '../components/GradientBackground';

const windowWidth = Dimensions.get('window').width;

const HomeScreen = () => {
    const { top } = useSafeAreaInsets();

    const { nowPlaying, popular, topRated, upcoming, isLoading } = useMovies();

    const getPosterColors = (index: number) => {
        const movie = nowPlaying[index];
        const uri = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;

        const colors = await ImageColors.getColors(uri, {});
                console.log(colors)

    };

    if (isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator color='red' size={20} />
            </View>
        );
    }

    return (
        <GradientBackground>
            <ScrollView>
                <View style={{ marginTop: top + 20 }}>
                    {/* Main Carousel */}
                    <View style={{ height: 440 }}>
                        <Carousel
                            data={nowPlaying}
                            renderItem={({ item }) => <MoviePoster movie={item} />}
                            sliderWidth={windowWidth}
                            itemWidth={300}
                            inactiveSlideOpacity={0.9}
                            onSnapToItem={(index) => getPosterColors(index)}
                        />
                    </View>

                    {/* Popular Movie */}
                    <HorizontalSlider title='Popular' movies={popular} />
                    <HorizontalSlider title='Top Rated' movies={topRated} />
                    <HorizontalSlider title='Upcoming' movies={upcoming} />
                </View>
            </ScrollView>
        </GradientBackground>
    );
};

export default HomeScreen;
DevRequena commented 10 months ago

I have the same issue, do you resolve this problem?

khorark commented 8 months ago

Default import is deprecated in new version this lib. Use

import { getColors } from 'react-native-image-colors';

instead

import ImageColors from 'react-native-image-colors';