Browse Source

Fixed intro statusbar color on android

Arnaud Vergnet 4 years ago
parent
commit
f1ed672824
1 changed files with 35 additions and 7 deletions
  1. 35
    7
      src/components/Overrides/CustomIntroSlider.js

+ 35
- 7
src/components/Overrides/CustomIntroSlider.js View File

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

Loading…
Cancel
Save