|
@@ -2,12 +2,13 @@
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
4
|
import {LinearGradient} from "expo-linear-gradient";
|
5
|
|
-import {Image, StyleSheet, View} from "react-native";
|
|
5
|
+import {Image, Platform, StatusBar, StyleSheet, View} from "react-native";
|
6
|
6
|
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
7
|
7
|
import {Text} from "react-native-paper";
|
8
|
8
|
import i18n from 'i18n-js';
|
9
|
9
|
import AppIntroSlider from "react-native-app-intro-slider";
|
10
|
10
|
import Update from "../../constants/Update";
|
|
11
|
+import ThemeManager from "../../managers/ThemeManager";
|
11
|
12
|
|
12
|
13
|
type Props = {
|
13
|
14
|
onDone: Function,
|
|
@@ -20,15 +21,19 @@ type Props = {
|
20
|
21
|
*/
|
21
|
22
|
export default class CustomIntroSlider extends React.Component<Props> {
|
22
|
23
|
|
|
24
|
+ sliderRef: {current: null | AppIntroSlider};
|
|
25
|
+
|
23
|
26
|
introSlides: Array<Object>;
|
24
|
27
|
updateSlides: Array<Object>;
|
25
|
28
|
aprilFoolsSlides: Array<Object>;
|
|
29
|
+ currentSlides: Array<Object>;
|
26
|
30
|
|
27
|
31
|
/**
|
28
|
32
|
* Generates intro slides
|
29
|
33
|
*/
|
30
|
34
|
constructor() {
|
31
|
35
|
super();
|
|
36
|
+ this.sliderRef = React.createRef();
|
32
|
37
|
this.introSlides = [
|
33
|
38
|
{
|
34
|
39
|
key: '1',
|
|
@@ -108,7 +113,6 @@ export default class CustomIntroSlider extends React.Component<Props> {
|
108
|
113
|
* @param dimensions Dimensions of the item
|
109
|
114
|
*/
|
110
|
115
|
static getIntroRenderItem({item, dimensions}: Object) {
|
111
|
|
-
|
112
|
116
|
return (
|
113
|
117
|
<LinearGradient
|
114
|
118
|
style={[
|
|
@@ -139,19 +143,43 @@ export default class CustomIntroSlider extends React.Component<Props> {
|
139
|
143
|
);
|
140
|
144
|
}
|
141
|
145
|
|
|
146
|
+ setStatusBarColor(color: string) {
|
|
147
|
+ if (Platform.OS === 'android')
|
|
148
|
+ StatusBar.setBackgroundColor(color, true);
|
|
149
|
+ }
|
|
150
|
+
|
|
151
|
+ onSlideChange = (index: number, lastIndex: number) => {
|
|
152
|
+ this.setStatusBarColor(this.currentSlides[index].colors[0]);
|
|
153
|
+ };
|
|
154
|
+
|
|
155
|
+ onSkip = () => {
|
|
156
|
+ this.setStatusBarColor(this.currentSlides[this.currentSlides.length-1].colors[0]);
|
|
157
|
+ if (this.sliderRef.current != null)
|
|
158
|
+ this.sliderRef.current.goToSlide(this.currentSlides.length-1);
|
|
159
|
+ }
|
|
160
|
+
|
|
161
|
+ onDone = () => {
|
|
162
|
+ this.setStatusBarColor(ThemeManager.getCurrentTheme().colors.surface);
|
|
163
|
+ this.props.onDone();
|
|
164
|
+ }
|
|
165
|
+
|
142
|
166
|
render() {
|
143
|
|
- let slides = this.introSlides;
|
|
167
|
+ this.currentSlides = this.introSlides;
|
144
|
168
|
if (this.props.isUpdate)
|
145
|
|
- slides = this.updateSlides;
|
|
169
|
+ this.currentSlides = this.updateSlides;
|
146
|
170
|
else if (this.props.isAprilFools)
|
147
|
|
- slides = this.aprilFoolsSlides;
|
|
171
|
+ this.currentSlides = this.aprilFoolsSlides;
|
|
172
|
+ this.setStatusBarColor(this.currentSlides[0].colors[0]);
|
148
|
173
|
return (
|
149
|
174
|
<AppIntroSlider
|
|
175
|
+ ref={this.sliderRef}
|
150
|
176
|
renderItem={CustomIntroSlider.getIntroRenderItem}
|
151
|
|
- data={slides}
|
152
|
|
- onDone={this.props.onDone}
|
|
177
|
+ data={this.currentSlides}
|
|
178
|
+ onDone={this.onDone}
|
153
|
179
|
bottomButton
|
154
|
180
|
showSkipButton
|
|
181
|
+ onSlideChange={this.onSlideChange}
|
|
182
|
+ onSkip={this.onSkip}
|
155
|
183
|
skipLabel={i18n.t('intro.buttons.skip')}
|
156
|
184
|
doneLabel={i18n.t('intro.buttons.done')}
|
157
|
185
|
nextLabel={i18n.t('intro.buttons.next')}
|