Jacse / react-native-app-intro-slider

Simple and configurable app introduction slider for react native
MIT License
1.65k stars 330 forks source link

Can't find variable: Image #194

Closed Arpanbhalla closed 3 years ago

Arpanbhalla commented 4 years ago

in _renderItem

import React, {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import Colors from "../../constants/Colors";

const slides = [
    {
        key: 's1',
        text: 'Best Recharge offers',
        title: 'Mobile Recharge',
        image: require('../../assets/snack-icon.png'),
        backgroundColor: '#20d2bb',
    },
    {
        key: 's2',
        title: 'Flight Booking',
        text: 'Upto 25% off on Domestic Flights',
        image: require('../../assets/snack-icon.png'),
        backgroundColor: '#febe29',
    },
    {
        key: 's3',
        title: 'Great Offers',
        text: 'Enjoy Great offers on our all services',
        image: require('../../assets/snack-icon.png'),
        backgroundColor: '#22bcb5',
    },
];

const IntroScreen1 = (props) => {

    const [showApp, setShowApp] = useState(false)

    _onDone = () => {
        setShowApp(true)
    };
    _onSkip = () => {
        setShowApp(true)
    };
    _renderNextButton = () => {
    };
    _renderDoneButton = () => {
    };
    _renderItem = ({ item }) => {
        return (
            <View style={styles.slide}>
                <Text style={styles.title}>{item.title}</Text>
                <Image source={item.image} />
                <Text style={styles.text}>{item.text}</Text>
            </View>
        );
    }

    return(
        <View style={styles.screen}>
            <AppIntroSlider
                data={slides}
                renderItem={_renderItem}
                onDone={_onDone}
                showSkipButton={true}
                onSkip={_onSkip}
                renderDoneButton={_renderDoneButton}
                renderNextButton={_renderNextButton}
            />

        </View>
    )
};

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonCircle: {
        width: 40,
        height: 40,
        backgroundColor: 'rgba(0, 0, 0, .2)',
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    image: {
        width: 200,
        height: 200,
    },

});

export default IntroScreen1
Jacse commented 4 years ago

You need to import the Image-component from react-native

brainygeek09 commented 3 years ago

Replace line 2 of you code with the following....

import {Button, StyleSheet, Text, View, Image} from 'react-native';

Jacse commented 3 years ago

Closing since it seems answered.