Dot.js

import React from 'react';
import { View, StyleSheet } from 'react-native';

export const Dot = (props) => (
    <View style={[ s.dot, (props.active && s.active) ]} />
);

const s = StyleSheet.create({
    dot: {
        width: 11,
        height: 11,
        borderRadius: 6,
        margin: 5,
        backgroundColor: 'rgba(246, 246, 246, .2)'
    },
    active: {
        backgroundColor: 'rgba(246, 246, 246, .7)'
    }
});

GuideItem.js

import React from 'react';
import { View, ScrollView, StyleSheet, Dimensions } from 'react-native';
import { Text } from 'atoms';

let { width, height } = Dimensions.get('window');

export const GuideItem = (props) => (
    <View style={[ s.container, props.style ]}>
        <ScrollView>
            <View style={s.children}>
                {props.children}
            </View>
            <Text style={s.text}>
                {props.text}
            </Text>
        </ScrollView>
    </View>
);

const s = StyleSheet.create({
    children: {
        padding: 20
    },
    text: {
        padding: 20
    }
});

index.js

import React, { Component } from 'react';
import { View, StyleSheet, Image, Dimensions, AsyncStorage } from 'react-native';
import { FadeInView, Gradient, InputContainer } from 'wrappers';
import { Button, Link, Text } from 'atoms';
import { GuideItem } from './GuideItem';
import { goTo } from 'utils';
import text from './text.json';
import { Dot } from './Dot';

import Swiper from 'react-native-swiper';


export class Guide extends Component {
    constructor() {
        super();
        this.state = {
            width: 0,
            height: 0,
            slides: [],
            lastSlide: false
        };
    }

    componentWillMount() {
        AsyncStorage.getItem('notFirstLogin', (err, res) => {
            if (res) {
                goTo(this.props, 'Login');
            }
        });
    }

    componentDidMount() {
        this.handleDimensions();
        const slides = [];
        text.forEach((it, ind) => {
            slides.push({
                active: (ind === 0) ? true : false
            });
        });
        this.setState({ slides });
    }

    handleDimensions = () => {
        this.setState({
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height
        });
    }

    handleScrollEnd = (e, sliderState) => {
        const { total, index } = sliderState;
        const currentDots = this.state.slides;
        const newDots = [];
        currentDots.forEach((it, ind) => {
            newDots.push({ active: index === ind });
        });

        this.setState({
            slides: newDots,
            lastSlide: (total - index - 1) === 0
        });
    }

    handleNextSlide = () => {
        if (!this.state.lastSlide) {
            this.swiper.scrollBy(1);
        } else {
            AsyncStorage.setItem('notFirstLogin', 'true');
            goTo(this.props, 'Login');
        }
    }

    handleSkip = () => {
        AsyncStorage.setItem('notFirstLogin', 'true');
        goTo(this.props, 'Login');
    }

    render() {
        return (
            <FadeInView style={s.container}>
                <Gradient style={{ height: this.state.height }}>
                    <InputContainer
                        outerStyle={[ s.outer, { width: this.state.width - 90 }]}
                        innerStyle={s.inner}
                        onLayout={this.handleDimensions}>
                        <Swiper
                            ref={(swiper) => {this.swiper = swiper;}}
                            style={s.wrapper}
                            width={this.state.width - 90}
                            height='100%'
                            loop={false}
                            showsPagination={false}
                            onMomentumScrollEnd={this.handleScrollEnd}
                            // onIndexChanged={(ind) => console.log(ind)}
                        >
                            {text.map((it, ind) => {
                                return (
                                    <GuideItem style={s.slide} key={ind} text={it.guide}>
                                        {it.title ? <Text style={s.title}>{it.title}</Text> : null}
                                        {it.imagesrc ? <Image style={s.image} source={{ uri: it.imagesrc  }} /> : null}
                                    </GuideItem>
                                );
                            })}
                        </Swiper>
                    </InputContainer>
                    <View style={s.dots}>
                        {this.state.slides.map((it, ind) => <Dot key={ind} active={it.active} /> )}
                    </View>
                    <View style={s.buttonsBlock}>
                        {!this.state.lastSlide ?
                            <Button title='Далее' onPress={this.handleNextSlide} />
                            :
                            <Button title='Завершить' onPress={this.handleNextSlide} />
                        }
                        {!this.state.lastSlide ?
                            <Link title='Пропустить' onPress={this.handleSkip} />
                            :
                            null
                        }
                    </View>
                </Gradient>
            </FadeInView>
        );
    }
}

const s = StyleSheet.create({
    container: {
        paddingVertical: 50
    },
    outer: {
        alignSelf: 'center',
        borderTopLeftRadius: 8,
        height: '55%'
    },
    inner: {
        backgroundColor: '#6F7598'
    },
    buttonsBlock: {
        height: '65%'
    },
    wrapper: {
        position: 'relative',
        borderRadius: 8,
        borderTopLeftRadius: 8,
        overflow: 'hidden'
    },
    title: {
        marginVertical: 10,
        fontSize: 26,
        fontWeight: '700'
    },
    image: {
        marginVertical: 10,
        width: 200,
        height: 200,
        alignSelf: 'center',
        resizeMode: 'contain'
    },
    dots: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row'
    }
});