react-native-carousel-view

carousel.js

import React, { Component } from 'react';
import { StyleSheet, Image, TouchableOpacity, View } from 'react-native';
import Carousel from 'react-native-carousel-view';

import Colors from '../../config/Colors';

const image1 = require('../../assets/img/1.png'),
    image2 = require('../../assets/img/2.png'),
    image3 = require('../../assets/img/3.png'),
    image4 = require('../../assets/img/4.png');

export default class ImageSlider extends Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
            >
                <View style={styles.container}>
                    <Carousel
                        width={400}
                        height={350}
                        delay={3000}
                        loop={true}
                        indicatorAtBottom={true}
                        indicatorSize={18}
                        indicatorSpace={24}
                        indicatorColor={Colors.orange}
                    >
                        <TouchableOpacity
                            style={styles.contentContainer}
                            onPress={() => this.onHandler('kids')}
                            activeOpacity={0.8}
                        >
                            <Image
                                resizeMode="contain"
                                style={styles.image}
                                source={image1}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.contentContainer}
                            onPress={() => this.onHandler('cafe')}
                            activeOpacity={0.8}
                        >
                            <Image
                                resizeMode="contain"
                                style={styles.image}
                                source={image2}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.contentContainer}
                            onPress={() => this.onHandler('tabletes')}
                            activeOpacity={0.8}
                        >
                            <Image
                                resizeMode="contain"
                                style={styles.image}
                                source={image3}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.contentContainer}
                            onPress={() => this.onHandler('keepkop')}
                            activeOpacity={0.8}
                        >
                            <Image
                                resizeMode="contain"
                                style={styles.image}
                                source={image4}
                            />
                        </TouchableOpacity>
                    </Carousel>
                </View>
            </View>
        );
    }

    onHandler = (item) => {
        if (item === 'kids') {
            const selected = {
                ...{ idSecao: 23, dsSecao: 'KIDS' },
                title: 'KIDS'
            };

            this.props.navigation.navigate('ProdutoModal', {
                selected
            });
        } else if (item === 'cafe') {
            const searchText = 'Cafe';

            this.props.navigation.navigate('Search', {
                searchText
            });
        } else if (item === 'tabletes') {
            const selected = {
                ...{ idSecao: 20, dsSecao: 'TABLETES E TRUFAS' },
                title: 'TABLETES E TRUFAS'
            };

            this.props.navigation.navigate('ProdutoModal', {
                selected
            });
        } else if (item === 'keepkop') {
            const selected = {
                ...{ idSecao: 24, dsSecao: 'KEEP KOP' },
                title: 'KEEP KOP'
            };

            this.props.navigation.navigate('ProdutoModal', {
                selected
            });
        }
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 0.5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    contentContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    image: {
        width: 400,
        height: 400,
        justifyContent: 'flex-start'
    }
});