Skip to content

Instantly share code, notes, and snippets.

@qrobin qrobin/Dot.js
Created Nov 22, 2017

Embed
What would you like to do?
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)'
}
});
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
}
});
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'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.