Browse Source

Fixed intro statusbar color on android

Arnaud Vergnet 2 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,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')}

Loading…
Cancel
Save