Browse Source

Replaced native base with react native paper

keplyx 4 years ago
parent
commit
1f64c734aa
73 changed files with 825 additions and 5680 deletions
  1. 21
    17
      App.js
  2. 1
    1
      components/CustomIntroSlider.js
  3. 100
    105
      components/DashboardItem.js
  4. 22
    25
      components/Sidebar.js
  5. 10
    7
      components/WebSectionList.js
  6. 10
    46
      components/WebViewScreen.js
  7. 0
    39
      native-base-theme/components/Badge.js
  8. 0
    11
      native-base-theme/components/Body.js
  9. 0
    386
      native-base-theme/components/Button.js
  10. 0
    37
      native-base-theme/components/Card.js
  11. 0
    198
      native-base-theme/components/CardItem.js
  12. 0
    38
      native-base-theme/components/CheckBox.js
  13. 0
    17
      native-base-theme/components/Container.js
  14. 0
    14
      native-base-theme/components/Content.js
  15. 0
    25
      native-base-theme/components/Fab.js
  16. 0
    119
      native-base-theme/components/Footer.js
  17. 0
    79
      native-base-theme/components/FooterTab.js
  18. 0
    86
      native-base-theme/components/Form.js
  19. 0
    13
      native-base-theme/components/H1.js
  20. 0
    13
      native-base-theme/components/H2.js
  21. 0
    13
      native-base-theme/components/H3.js
  22. 0
    419
      native-base-theme/components/Header.js
  23. 0
    12
      native-base-theme/components/Icon.js
  24. 0
    19
      native-base-theme/components/Input.js
  25. 0
    132
      native-base-theme/components/InputGroup.js
  26. 0
    241
      native-base-theme/components/Item.js
  27. 0
    12
      native-base-theme/components/Label.js
  28. 0
    11
      native-base-theme/components/Left.js
  29. 0
    446
      native-base-theme/components/ListItem.js
  30. 0
    14
      native-base-theme/components/Picker.android.js
  31. 0
    7
      native-base-theme/components/Picker.ios.js
  32. 0
    14
      native-base-theme/components/Picker.js
  33. 0
    31
      native-base-theme/components/Radio.js
  34. 0
    14
      native-base-theme/components/Right.js
  35. 0
    57
      native-base-theme/components/Segment.js
  36. 0
    49
      native-base-theme/components/Separator.js
  37. 0
    9
      native-base-theme/components/Spinner.js
  38. 0
    19
      native-base-theme/components/Subtitle.js
  39. 0
    46
      native-base-theme/components/SwipeRow.js
  40. 0
    9
      native-base-theme/components/Switch.js
  41. 0
    10
      native-base-theme/components/Tab.js
  42. 0
    57
      native-base-theme/components/TabBar.js
  43. 0
    26
      native-base-theme/components/TabContainer.js
  44. 0
    40
      native-base-theme/components/TabHeading.js
  45. 0
    17
      native-base-theme/components/Text.js
  46. 0
    25
      native-base-theme/components/Textarea.js
  47. 0
    40
      native-base-theme/components/Thumbnail.js
  48. 0
    21
      native-base-theme/components/Title.js
  49. 0
    41
      native-base-theme/components/Toast.js
  50. 0
    13
      native-base-theme/components/View.js
  51. 0
    249
      native-base-theme/components/index.js
  52. 0
    311
      native-base-theme/variables/commonColor.js
  53. 0
    304
      native-base-theme/variables/material.js
  54. 0
    362
      native-base-theme/variables/platform.js
  55. 0
    362
      native-base-theme/variables/platformDark.js
  56. 7
    20
      navigation/DrawerNavigator.js
  57. 3
    14
      navigation/MainTabNavigator.js
  58. 1
    4
      package.json
  59. 5
    11
      screens/About/AboutDependenciesScreen.js
  60. 81
    99
      screens/About/AboutScreen.js
  61. 54
    79
      screens/DebugScreen.js
  62. 32
    55
      screens/HomeScreen.js
  63. 27
    33
      screens/PlanningDisplayScreen.js
  64. 40
    79
      screens/PlanningScreen.js
  65. 36
    48
      screens/Proximo/ProximoAboutScreen.js
  66. 51
    94
      screens/Proximo/ProximoListScreen.js
  67. 24
    47
      screens/Proximo/ProximoMainScreen.js
  68. 63
    127
      screens/Proxiwash/ProxiwashAboutScreen.js
  69. 51
    82
      screens/Proxiwash/ProxiwashScreen.js
  70. 12
    22
      screens/SelfMenuScreen.js
  71. 68
    101
      screens/SettingsScreen.js
  72. 97
    27
      utils/ThemeManager.js
  73. 9
    10
      utils/WebDataManager.js

+ 21
- 17
App.js View File

@@ -2,18 +2,17 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Platform, StatusBar} from 'react-native';
5
-import {Root, StyleProvider} from 'native-base';
6 5
 import LocaleManager from './utils/LocaleManager';
7 6
 import * as Font from 'expo-font';
8
-import {clearThemeCache} from 'native-base-shoutem-theme';
9 7
 import AsyncStorageManager from "./utils/AsyncStorageManager";
10 8
 import CustomIntroSlider from "./components/CustomIntroSlider";
11 9
 import {SplashScreen} from 'expo';
12 10
 import ThemeManager from './utils/ThemeManager';
13
-import { NavigationContainer } from '@react-navigation/native';
14
-import { createStackNavigator } from '@react-navigation/stack';
11
+import {NavigationContainer} from '@react-navigation/native';
12
+import {createStackNavigator} from '@react-navigation/stack';
15 13
 import DrawerNavigator from './navigation/DrawerNavigator';
16 14
 import NotificationsManager from "./utils/NotificationsManager";
15
+import {Provider as PaperProvider} from 'react-native-paper';
17 16
 
18 17
 type Props = {};
19 18
 
@@ -24,6 +23,17 @@ type State = {
24 23
     currentTheme: ?Object,
25 24
 };
26 25
 
26
+const MyTheme = {
27
+    dark: false,
28
+    colors: {
29
+        primary: 'rgb(255, 45, 85)',
30
+        background: 'rgb(242, 242, 242)',
31
+        card: 'rgb(255, 255, 255)',
32
+        text: 'rgb(28, 28, 30)',
33
+        border: 'rgb(199, 199, 204)',
34
+    },
35
+};
36
+
27 37
 const Stack = createStackNavigator();
28 38
 
29 39
 export default class App extends React.Component<Props, State> {
@@ -51,7 +61,6 @@ export default class App extends React.Component<Props, State> {
51 61
             currentTheme: ThemeManager.getCurrentTheme()
52 62
         });
53 63
         this.setupStatusBar();
54
-        clearThemeCache();
55 64
     }
56 65
 
57 66
     setupStatusBar() {
@@ -84,9 +93,6 @@ export default class App extends React.Component<Props, State> {
84 93
         // Wait for custom fonts to be loaded before showing the app
85 94
         // console.log("loading Fonts");
86 95
         SplashScreen.preventAutoHide();
87
-        await Font.loadAsync({
88
-            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
89
-        });
90 96
         // console.log("loading preferences");
91 97
         await AsyncStorageManager.getInstance().loadPreferences();
92 98
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
@@ -122,15 +128,13 @@ export default class App extends React.Component<Props, State> {
122 128
         } else {
123 129
 
124 130
             return (
125
-                <Root>
126
-                    <StyleProvider style={this.state.currentTheme}>
127
-                        <NavigationContainer>
128
-                            <Stack.Navigator headerMode="none">
129
-                                <Stack.Screen name="Root" component={DrawerNavigator} />
130
-                            </Stack.Navigator>
131
-                        </NavigationContainer>
132
-                    </StyleProvider>
133
-                </Root>
131
+                <PaperProvider theme={this.state.currentTheme}>
132
+                    <NavigationContainer theme={this.state.currentTheme}>
133
+                        <Stack.Navigator headerMode="none">
134
+                            <Stack.Screen name="Root" component={DrawerNavigator}/>
135
+                        </Stack.Navigator>
136
+                    </NavigationContainer>
137
+                </PaperProvider>
134 138
             );
135 139
         }
136 140
     }

+ 1
- 1
components/CustomIntroSlider.js View File

@@ -4,7 +4,7 @@ import * as React from 'react';
4 4
 import {LinearGradient} from "expo-linear-gradient";
5 5
 import {Image, StyleSheet, View} from "react-native";
6 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7
-import {Text} from "native-base";
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
 

+ 100
- 105
components/DashboardItem.js View File

@@ -1,16 +1,13 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base";
5 4
 import {MaterialCommunityIcons} from "@expo/vector-icons";
6 5
 import {View} from "react-native";
7 6
 import ThemeManager from "../utils/ThemeManager";
8 7
 import HTML from "react-native-render-html";
9 8
 import {LinearGradient} from "expo-linear-gradient";
10
-import PlatformTouchable from "react-native-platform-touchable";
11 9
 import i18n from "i18n-js";
12
-
13
-const CARD_BORDER_RADIUS = 10;
10
+import {Avatar, Card, Text, Title} from 'react-native-paper';
14 11
 
15 12
 type Props = {
16 13
     isAvailable: boolean,
@@ -72,74 +69,73 @@ export default class DashboardItem extends React.Component<Props> {
72 69
 
73 70
     getEventPreviewContainer() {
74 71
         if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) {
72
+            const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null;
75 73
             return (
76
-                <View>
77
-                    <CardItem style={{
78
-                        paddingTop: 0,
79
-                        paddingBottom: 0,
80
-                        backgroundColor: 'transparent',
81
-                    }}>
82
-                        <Left>
83
-                            {this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ?
84
-                                <Thumbnail source={{uri: this.props.displayEvent['logo']}} square/> :
85
-                                <View/>}
86
-                            <Body>
87
-                                <Text>{this.props.displayEvent['title']}</Text>
88
-                                <Text note>{this.getFormattedEventTime(this.props.displayEvent)}</Text>
89
-                            </Body>
90
-                        </Left>
91
-                    </CardItem>
92
-                    <CardItem style={{
93
-                        borderRadius: CARD_BORDER_RADIUS,
94
-                        backgroundColor: 'transparent',
95
-                    }}>
96
-                        <Body style={{
97
-                            height: this.props.displayEvent['description'].length > 50 ? 70 : 20,
74
+                <Card style={{marginBottom: 10}}>
75
+                    {hasImage ?
76
+                        <Card.Title
77
+                            title={this.props.displayEvent['title']}
78
+                            subtitle={this.getFormattedEventTime(this.props.displayEvent)}
79
+                            left={() =>
80
+                                <Avatar.Image
81
+                                    source={{uri: this.props.displayEvent['logo']}}
82
+                                    size={60}
83
+                                    style={{backgroundColor: 'transparent'}}/>
84
+                            }
85
+                        /> :
86
+                        <Card.Title
87
+                            title={this.props.displayEvent['title']}
88
+                            subtitle={this.getFormattedEventTime(this.props.displayEvent)}
89
+                        />}
90
+                    <View>
91
+                        <Card.Content style={{
92
+                            height: this.props.displayEvent['description'].length > 70 ? 100 : 50,
98 93
                             overflow: 'hidden',
99 94
                         }}>
100 95
                             <HTML html={"<div>" + this.props.displayEvent['description'] + "</div>"}
101 96
                                   tagsStyles={{
102 97
                                       p: {
103
-                                          color: ThemeManager.getCurrentThemeVariables().textColor,
104
-                                          fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
98
+                                          color: ThemeManager.getCurrentThemeVariables().text,
105 99
                                       },
106
-                                      div: {color: ThemeManager.getCurrentThemeVariables().textColor},
100
+                                      div: {color: ThemeManager.getCurrentThemeVariables().text},
107 101
                                   }}/>
108
-                            <LinearGradient
109
-                                colors={[
110
-                                    // Fix for ios gradient: transparent color must match final color
111
-                                    ThemeManager.getNightMode() ? 'rgba(42,42,42,0)' : 'rgba(255,255,255,0)',
112
-                                    ThemeManager.getCurrentThemeVariables().cardDefaultBg
113
-                                ]}
114
-                                start={{x: 0, y: 0}}
115
-                                end={{x: 0, y: 0.6}}
116
-                                // end={[0, 0.6]}
117
-                                style={{
118
-                                    position: 'absolute',
119
-                                    width: '100%',
120
-                                    height: 65,
121
-                                    bottom: -5,
122
-                                }}>
123
-                                <View style={{
124
-                                    marginLeft: 'auto',
102
+
103
+                        </Card.Content>
104
+                        <LinearGradient
105
+                            colors={[
106
+                                // Fix for ios gradient: transparent color must match final color
107
+                                ThemeManager.getNightMode() ? 'rgba(42,42,42,0)' : 'rgba(255,255,255,0)',
108
+                                ThemeManager.getCurrentThemeVariables().card
109
+                            ]}
110
+                            start={{x: 0, y: 0}}
111
+                            end={{x: 0, y: 0.6}}
112
+                            // end={[0, 0.6]}
113
+                            style={{
114
+                                position: 'absolute',
115
+                                width: '100%',
116
+                                height: 65,
117
+                                bottom: -5,
118
+                            }}>
119
+                            <View style={{
120
+                                marginLeft: 'auto',
121
+                                marginTop: 'auto',
122
+                                flexDirection: 'row'
123
+                            }}>
124
+                                <Text style={{
125 125
                                     marginTop: 'auto',
126
-                                    flexDirection: 'row'
126
+                                    marginBottom: 'auto',
127
+                                    padding: 0,
127 128
                                 }}>
128
-                                    <Text style={{
129
-                                        marginTop: 'auto',
130
-                                        marginBottom: 'auto',
131
-                                        padding: 0,
132
-                                    }}>
133
-                                        {i18n.t("homeScreen.dashboard.seeMore")}
134
-                                    </Text>
135
-                                    <MaterialCommunityIcons
136
-                                        name={'chevron-right'}
137
-                                        size={26}/>
138
-                                </View>
139
-                            </LinearGradient>
140
-                        </Body>
141
-                    </CardItem>
142
-                </View>
129
+                                    {i18n.t("homeScreen.dashboard.seeMore")}
130
+                                </Text>
131
+                                <MaterialCommunityIcons
132
+                                    name={'chevron-right'}
133
+                                    size={26}
134
+                                    color={ThemeManager.getCurrentThemeVariables().text}/>
135
+                            </View>
136
+                        </LinearGradient>
137
+                    </View>
138
+                </Card>
143 139
             );
144 140
         } else
145 141
             return <View/>
@@ -152,7 +148,7 @@ export default class DashboardItem extends React.Component<Props> {
152 148
                 color={
153 149
                     this.props.isAvailable ?
154 150
                         this.props.color :
155
-                        ThemeManager.getCurrentThemeVariables().textDisabledColor
151
+                        ThemeManager.getCurrentThemeVariables().textDisabled
156 152
                 }
157 153
                 size={this.props.isSquare ? 50 : 40}/>
158 154
         );
@@ -163,19 +159,19 @@ export default class DashboardItem extends React.Component<Props> {
163 159
             <View style={{
164 160
                 width: this.props.isSquare ? '100%' : 'auto',
165 161
             }}>
166
-                <H3 style={{
162
+                <Title style={{
167 163
                     color: this.props.isAvailable ?
168
-                        ThemeManager.getCurrentThemeVariables().textColor :
169
-                        ThemeManager.getCurrentThemeVariables().listNoteColor,
164
+                        ThemeManager.getCurrentThemeVariables().text :
165
+                        ThemeManager.getCurrentThemeVariables().textDisabled,
170 166
                     textAlign: this.props.isSquare ? 'center' : 'left',
171 167
                     width: this.props.isSquare ? '100%' : 'auto',
172 168
                 }}>
173 169
                     {this.props.title}
174
-                </H3>
170
+                </Title>
175 171
                 <Text style={{
176 172
                     color: this.props.isAvailable ?
177
-                        ThemeManager.getCurrentThemeVariables().listNoteColor :
178
-                        ThemeManager.getCurrentThemeVariables().textDisabledColor,
173
+                        ThemeManager.getCurrentThemeVariables().text :
174
+                        ThemeManager.getCurrentThemeVariables().textDisabled,
179 175
                     textAlign: this.props.isSquare ? 'center' : 'left',
180 176
                     width: this.props.isSquare ? '100%' : 'auto',
181 177
                 }}>
@@ -188,21 +184,12 @@ export default class DashboardItem extends React.Component<Props> {
188 184
     getContent() {
189 185
         if (this.props.isSquare) {
190 186
             return (
191
-                <Body>
187
+                <View>
192 188
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
193 189
                         {this.getIcon()}
194 190
                     </View>
195 191
                     {this.getText()}
196
-                </Body>
197
-            );
198
-        } else {
199
-            return (
200
-                <Left>
201
-                    {this.getIcon()}
202
-                    <Body>
203
-                        {this.getText()}
204
-                    </Body>
205
-                </Left>
192
+                </View>
206 193
             );
207 194
         }
208 195
     }
@@ -217,33 +204,41 @@ export default class DashboardItem extends React.Component<Props> {
217 204
             else
218 205
                 marginRight = 0
219 206
         }
207
+        const color = this.props.isAvailable ?
208
+            ThemeManager.getCurrentThemeVariables().text :
209
+            ThemeManager.getCurrentThemeVariables().textDisabled;
220 210
         return (
221
-            <Card style={{
222
-                flex: 0,
223
-                width: this.props.isSquare ? '48%' : 'auto',
224
-                marginLeft: this.props.isSquare ? 0 : 10,
225
-                marginRight: marginRight,
226
-                marginTop: 10,
227
-                borderRadius: CARD_BORDER_RADIUS,
228
-                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg,
229
-                overflow: 'hidden',
230
-            }}>
231
-                <PlatformTouchable
232
-                    onPress={this.props.clickAction}
233
-                    style={{
234
-                        zIndex: 100,
235
-                        minHeight: this.props.isSquare ? 150 : 'auto',
236
-                    }}
237
-                >
211
+            <Card
212
+                style={{
213
+                    width: this.props.isSquare ? '48%' : 'auto',
214
+                    marginLeft: this.props.isSquare ? 0 : 10,
215
+                    marginRight: marginRight,
216
+                    marginTop: 10,
217
+                    overflow: 'hidden',
218
+                }}
219
+                onPress={this.props.clickAction}>
220
+                {this.props.isSquare ?
221
+                    <Card.Content>
222
+                        {this.getContent()}
223
+                    </Card.Content>
224
+                    :
238 225
                     <View>
239
-                        <CardItem style={{
240
-                            backgroundColor: 'transparent',
241
-                        }}>
242
-                            {this.getContent()}
243
-                        </CardItem>
244
-                        {this.getEventPreviewContainer()}
245
-                    </View>
246
-                </PlatformTouchable>
226
+                        <Card.Title
227
+                            title={this.props.title}
228
+                            titleStyle={{color: color}}
229
+                            subtitle={this.props.subtitle}
230
+                            subtitleStyle={{color: color}}
231
+                            left={(props) => <Avatar.Icon
232
+                                {...props}
233
+                                icon={this.props.icon}
234
+                                color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
235
+                                size={60}
236
+                                style={{backgroundColor: 'transparent'}}/>}
237
+                        />
238
+                        <Card.Content>
239
+                            {this.getEventPreviewContainer()}
240
+                        </Card.Content>
241
+                    </View>}
247 242
             </Card>
248 243
         );
249 244
     }

+ 22
- 25
components/Sidebar.js View File

@@ -1,17 +1,19 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native';
5
-import {Container, Left, ListItem, Text} from "native-base";
4
+import {Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native';
6 5
 import i18n from "i18n-js";
7 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8 7
 import ThemeManager from "../utils/ThemeManager";
9 8
 import * as WebBrowser from 'expo-web-browser';
9
+import {List} from 'react-native-paper';
10
+import {DrawerItem} from '@react-navigation/drawer';
10 11
 
11 12
 const deviceWidth = Dimensions.get("window").width;
12 13
 
13 14
 type Props = {
14 15
     navigation: Object,
16
+    state: Object,
15 17
 };
16 18
 
17 19
 type State = {
@@ -142,32 +144,29 @@ export default class SideBar extends React.Component<Props, State> {
142 144
 
143 145
     getRenderItem({item}: Object) {
144 146
         const onListItemPress = this.onListItemPress.bind(this, item);
145
-        // return <View/>;
146 147
         if (item.icon !== undefined) {
147 148
             return (
148
-                <ListItem
149
-                    button
150
-                    noBorder
149
+                <DrawerItem
150
+                    label={item.name}
151
+                    focused={false}
152
+                    icon={({color, size}) =>
153
+                        <MaterialCommunityIcons color={color} size={size} name={item.icon}/>}
151 154
                     selected={this.state.active === item.route}
152 155
                     onPress={onListItemPress}
153
-                >
154
-                    <Left>
155
-                        <MaterialCommunityIcons
156
-                            name={item.icon}
157
-                            size={26}
158
-                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
159
-                        />
160
-                        <Text style={styles.text}>
161
-                            {item.name}
162
-                        </Text>
163
-                    </Left>
164
-                </ListItem>
156
+                    style={{
157
+                        marginLeft: 0,
158
+                        marginRight: 0,
159
+                        padding: 0,
160
+                        borderRadius: 0
161
+                    }}
162
+                />
165 163
             );
166 164
         } else {
167 165
             return (
168
-                <ListItem itemDivider>
169
-                    <Text>{item.name}</Text>
170
-                </ListItem>
166
+                <List.Item
167
+                    title={item.name}
168
+                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().dividerBackground}}
169
+                />
171 170
             );
172 171
         }
173 172
 
@@ -176,9 +175,7 @@ export default class SideBar extends React.Component<Props, State> {
176 175
     render() {
177 176
         console.log("rendering SideBar");
178 177
         return (
179
-            <Container style={{
180
-                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
181
-            }}>
178
+            <View style={{height: '100%'}}>
182 179
                 <Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
183 180
                 <FlatList
184 181
                     data={this.dataSet}
@@ -186,7 +183,7 @@ export default class SideBar extends React.Component<Props, State> {
186 183
                     keyExtractor={this.listKeyExtractor}
187 184
                     renderItem={this.getRenderItem}
188 185
                 />
189
-            </Container>
186
+            </View>
190 187
         );
191 188
     }
192 189
 }

+ 10
- 7
components/WebSectionList.js View File

@@ -1,12 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {H3, Spinner, View} from "native-base";
5 4
 import ThemeManager from '../utils/ThemeManager';
6 5
 import WebDataManager from "../utils/WebDataManager";
7 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8 7
 import i18n from "i18n-js";
9
-import {RefreshControl, SectionList} from "react-native";
8
+import {ActivityIndicator, Subheading} from 'react-native-paper';
9
+import {RefreshControl, SectionList, View} from "react-native";
10 10
 
11 11
 type Props = {
12 12
     navigation: Object,
@@ -148,22 +148,25 @@ export default class WebSectionList extends React.Component<Props, State> {
148 148
                     marginBottom: 20
149 149
                 }}>
150 150
                     {this.state.refreshing ?
151
-                        <Spinner/>
151
+                        <ActivityIndicator
152
+                            animating={true}
153
+                            size={'large'}
154
+                            color={ThemeManager.getCurrentThemeVariables().primary}/>
152 155
                         :
153 156
                         <MaterialCommunityIcons
154 157
                             name={item.icon}
155 158
                             size={100}
156
-                            color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
159
+                            color={ThemeManager.getCurrentThemeVariables().textDisabled}/>}
157 160
                 </View>
158 161
 
159
-                <H3 style={{
162
+                <Subheading style={{
160 163
                     textAlign: 'center',
161 164
                     marginRight: 20,
162 165
                     marginLeft: 20,
163
-                    color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
166
+                    color: ThemeManager.getCurrentThemeVariables().textDisabled
164 167
                 }}>
165 168
                     {item.text}
166
-                </H3>
169
+                </Subheading>
167 170
             </View>);
168 171
     }
169 172
 

+ 10
- 46
components/WebViewScreen.js View File

@@ -1,12 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Platform, View} from 'react-native';
5
-import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
4
+import {View} from 'react-native';
6 5
 import WebView from "react-native-webview";
7 6
 import Touchable from "react-native-platform-touchable";
8 7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9 8
 import ThemeManager from "../utils/ThemeManager";
9
+import {ActivityIndicator} from 'react-native-paper';
10 10
 
11 11
 type Props = {
12 12
     navigation: Object,
@@ -62,9 +62,9 @@ export default class WebViewScreen extends React.Component<Props> {
62 62
                 style={{padding: 6}}
63 63
                 onPress={clickAction}>
64 64
                 <MaterialCommunityIcons
65
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
66 65
                     name={icon}
67
-                    size={26}/>
66
+                    size={26}
67
+                    color={ThemeManager.getCurrentThemeVariables().text}/>
68 68
             </Touchable>
69 69
         );
70 70
     }
@@ -112,7 +112,7 @@ export default class WebViewScreen extends React.Component<Props> {
112 112
     getRenderLoading() {
113 113
         return (
114 114
             <View style={{
115
-                backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
115
+                backgroundColor: ThemeManager.getCurrentThemeVariables().background,
116 116
                 position: 'absolute',
117 117
                 top: 0,
118 118
                 right: 0,
@@ -122,7 +122,10 @@ export default class WebViewScreen extends React.Component<Props> {
122 122
                 alignItems: 'center',
123 123
                 justifyContent: 'center'
124 124
             }}>
125
-                <Spinner/>
125
+                <ActivityIndicator
126
+                    animating={true}
127
+                    size={'large'}
128
+                    color={ThemeManager.getCurrentThemeVariables().primary}/>
126 129
             </View>
127 130
         );
128 131
     }
@@ -144,50 +147,11 @@ export default class WebViewScreen extends React.Component<Props> {
144 147
         );
145 148
     }
146 149
 
147
-    getTabbedWebview() {
148
-        let tabbedView = [];
149
-        for (let i = 0; i < this.props.data.length; i++) {
150
-            tabbedView.push(
151
-                <Tab heading={
152
-                    <TabHeading>
153
-                        <MaterialCommunityIcons
154
-                            name={this.props.data[i]['icon']}
155
-                            color={ThemeManager.getCurrentThemeVariables().tabIconColor}
156
-                            size={20}
157
-                        />
158
-                        <Text>{this.props.data[i]['name']}</Text>
159
-                    </TabHeading>}
160
-                     key={this.props.data[i]['url']}
161
-                     style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
162
-                    {this.getWebview(this.props.data[i])}
163
-                </Tab>);
164
-        }
165
-        return tabbedView;
166
-    }
167
-
168 150
     render() {
169 151
         // console.log("rendering WebViewScreen");
170
-        const nav = this.props.navigation;
171 152
         this.webviewArray = [];
172 153
         return (
173
-            <Container>
174
-                {this.props.data.length === 1 ?
175
-                    this.getWebview(this.props.data[0]) :
176
-                    <Tabs
177
-                        tabContainerStyle={{
178
-                            elevation: 0, // Fix for android shadow
179
-                        }}
180
-                        locked={true}
181
-                        style={{
182
-                            backgroundColor: Platform.OS === 'ios' ?
183
-                                ThemeManager.getCurrentThemeVariables().tabDefaultBg :
184
-                                ThemeManager.getCurrentThemeVariables().brandPrimary
185
-                        }}
186
-
187
-                    >
188
-                        {this.getTabbedWebview()}
189
-                    </Tabs>}
190
-            </Container>
154
+            this.getWebview(this.props.data[0])
191 155
         );
192 156
     }
193 157
 }

+ 0
- 39
native-base-theme/components/Badge.js View File

@@ -1,39 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-import { PLATFORM } from './../variables/commonColor';
5
-
6
-export default (variables /* : * */ = variable) => {
7
-  const badgeTheme = {
8
-    '.primary': {
9
-      backgroundColor: variables.buttonPrimaryBg
10
-    },
11
-    '.warning': {
12
-      backgroundColor: variables.buttonWarningBg
13
-    },
14
-    '.info': {
15
-      backgroundColor: variables.buttonInfoBg
16
-    },
17
-    '.success': {
18
-      backgroundColor: variables.buttonSuccessBg
19
-    },
20
-    '.danger': {
21
-      backgroundColor: variables.buttonDangerBg
22
-    },
23
-    'NativeBase.Text': {
24
-      color: variables.badgeColor,
25
-      fontSize: variables.fontSizeBase,
26
-      lineHeight: variables.lineHeight - 1,
27
-      textAlign: 'center',
28
-      paddingHorizontal: 3
29
-    },
30
-    backgroundColor: variables.badgeBg,
31
-    padding: variables.badgePadding,
32
-    paddingHorizontal: 6,
33
-    alignSelf: 'flex-start',
34
-    justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
35
-    borderRadius: 13.5,
36
-    height: 27
37
-  };
38
-  return badgeTheme;
39
-};

+ 0
- 11
native-base-theme/components/Body.js View File

@@ -1,11 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const bodyTheme = {
5
-    flex: 1,
6
-    alignItems: 'center',
7
-    alignSelf: 'center'
8
-  };
9
-
10
-  return bodyTheme;
11
-};

+ 0
- 386
native-base-theme/components/Button.js View File

@@ -1,386 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-import { PLATFORM } from './../variables/commonColor';
5
-
6
-export default (variables /* : * */ = variable) => {
7
-  const platformStyle = variables.platformStyle;
8
-  const platform = variables.platform;
9
-  const darkCommon = {
10
-    'NativeBase.Text': {
11
-      color: variables.brandDark
12
-    },
13
-    'NativeBase.Icon': {
14
-      color: variables.brandDark
15
-    },
16
-    'NativeBase.IconNB': {
17
-      color: variables.brandDark
18
-    }
19
-  };
20
-  const lightCommon = {
21
-    'NativeBase.Text': {
22
-      color: variables.brandLight
23
-    },
24
-    'NativeBase.Icon': {
25
-      color: variables.brandLight
26
-    },
27
-    'NativeBase.IconNB': {
28
-      color: variables.brandLight
29
-    }
30
-  };
31
-  const primaryCommon = {
32
-    'NativeBase.Text': {
33
-      color: variables.buttonPrimaryBg
34
-    },
35
-    'NativeBase.Icon': {
36
-      color: variables.buttonPrimaryBg
37
-    },
38
-    'NativeBase.IconNB': {
39
-      color: variables.buttonPrimaryBg
40
-    }
41
-  };
42
-  const successCommon = {
43
-    'NativeBase.Text': {
44
-      color: variables.buttonSuccessBg
45
-    },
46
-    'NativeBase.Icon': {
47
-      color: variables.buttonSuccessBg
48
-    },
49
-    'NativeBase.IconNB': {
50
-      color: variables.buttonSuccessBg
51
-    }
52
-  };
53
-  const infoCommon = {
54
-    'NativeBase.Text': {
55
-      color: variables.buttonInfoBg
56
-    },
57
-    'NativeBase.Icon': {
58
-      color: variables.buttonInfoBg
59
-    },
60
-    'NativeBase.IconNB': {
61
-      color: variables.buttonInfoBg
62
-    }
63
-  };
64
-  const warningCommon = {
65
-    'NativeBase.Text': {
66
-      color: variables.buttonWarningBg
67
-    },
68
-    'NativeBase.Icon': {
69
-      color: variables.buttonWarningBg
70
-    },
71
-    'NativeBase.IconNB': {
72
-      color: variables.buttonWarningBg
73
-    }
74
-  };
75
-  const dangerCommon = {
76
-    'NativeBase.Text': {
77
-      color: variables.buttonDangerBg
78
-    },
79
-    'NativeBase.Icon': {
80
-      color: variables.buttonDangerBg
81
-    },
82
-    'NativeBase.IconNB': {
83
-      color: variables.buttonDangerBg
84
-    }
85
-  };
86
-  const buttonTheme = {
87
-    '.disabled': {
88
-      '.transparent': {
89
-        backgroundColor: 'transparent',
90
-        'NativeBase.Text': {
91
-          color: variables.buttonDisabledBg
92
-        },
93
-        'NativeBase.Icon': {
94
-          color: variables.buttonDisabledBg
95
-        },
96
-        'NativeBase.IconNB': {
97
-          color: variables.buttonDisabledBg
98
-        }
99
-      },
100
-      'NativeBase.Icon': {
101
-        color: variables.brandLight
102
-      },
103
-      'NativeBase.IconNB': {
104
-        color: variables.brandLight
105
-      },
106
-      backgroundColor: variables.buttonDisabledBg
107
-    },
108
-    '.bordered': {
109
-      '.dark': {
110
-        ...darkCommon,
111
-        backgroundColor: 'transparent',
112
-        borderColor: variables.brandDark,
113
-        borderWidth: variables.borderWidth * 2
114
-      },
115
-      '.light': {
116
-        ...lightCommon,
117
-        backgroundColor: 'transparent',
118
-        borderColor: variables.brandLight,
119
-        borderWidth: variables.borderWidth * 2
120
-      },
121
-      '.primary': {
122
-        ...primaryCommon,
123
-        backgroundColor: 'transparent',
124
-        borderColor: variables.buttonPrimaryBg,
125
-        borderWidth: variables.borderWidth * 2
126
-      },
127
-      '.success': {
128
-        ...successCommon,
129
-        backgroundColor: 'transparent',
130
-        borderColor: variables.buttonSuccessBg,
131
-        borderWidth: variables.borderWidth * 2
132
-      },
133
-      '.info': {
134
-        ...infoCommon,
135
-        backgroundColor: 'transparent',
136
-        borderColor: variables.buttonInfoBg,
137
-        borderWidth: variables.borderWidth * 2
138
-      },
139
-      '.warning': {
140
-        ...warningCommon,
141
-        backgroundColor: 'transparent',
142
-        borderColor: variables.buttonWarningBg,
143
-        borderWidth: variables.borderWidth * 2
144
-      },
145
-      '.danger': {
146
-        ...dangerCommon,
147
-        backgroundColor: 'transparent',
148
-        borderColor: variables.buttonDangerBg,
149
-        borderWidth: variables.borderWidth * 2
150
-      },
151
-      '.disabled': {
152
-        backgroundColor: 'transparent',
153
-        borderColor: variables.buttonDisabledBg,
154
-        borderWidth: variables.borderWidth * 2,
155
-        'NativeBase.Text': {
156
-          color: variables.buttonDisabledBg
157
-        }
158
-      },
159
-      ...primaryCommon,
160
-      borderWidth: variables.borderWidth * 2,
161
-      elevation: null,
162
-      shadowColor: null,
163
-      shadowOffset: null,
164
-      shadowOpacity: null,
165
-      shadowRadius: null,
166
-      backgroundColor: 'transparent'
167
-    },
168
-
169
-    '.dark': {
170
-      '.bordered': {
171
-        ...darkCommon
172
-      },
173
-      backgroundColor: variables.brandDark
174
-    },
175
-    '.light': {
176
-      '.transparent': {
177
-        ...lightCommon,
178
-        backgroundColor: 'transparent'
179
-      },
180
-      '.bordered': {
181
-        ...lightCommon
182
-      },
183
-      ...darkCommon,
184
-      backgroundColor: variables.brandLight
185
-    },
186
-
187
-    '.primary': {
188
-      '.bordered': {
189
-        ...primaryCommon
190
-      },
191
-      backgroundColor: variables.buttonPrimaryBg
192
-    },
193
-
194
-    '.success': {
195
-      '.bordered': {
196
-        ...successCommon
197
-      },
198
-      backgroundColor: variables.buttonSuccessBg
199
-    },
200
-
201
-    '.info': {
202
-      '.bordered': {
203
-        ...infoCommon
204
-      },
205
-      backgroundColor: variables.buttonInfoBg
206
-    },
207
-
208
-    '.warning': {
209
-      '.bordered': {
210
-        ...warningCommon
211
-      },
212
-      backgroundColor: variables.buttonWarningBg
213
-    },
214
-
215
-    '.danger': {
216
-      '.bordered': {
217
-        ...dangerCommon
218
-      },
219
-      backgroundColor: variables.buttonDangerBg
220
-    },
221
-
222
-    '.block': {
223
-      justifyContent: 'center',
224
-      alignSelf: 'stretch'
225
-    },
226
-
227
-    '.full': {
228
-      justifyContent: 'center',
229
-      alignSelf: 'stretch',
230
-      borderRadius: 0
231
-    },
232
-
233
-    '.rounded': {
234
-      borderRadius: variables.borderRadiusLarge
235
-    },
236
-
237
-    '.transparent': {
238
-      backgroundColor: 'transparent',
239
-      elevation: 0,
240
-      shadowColor: null,
241
-      shadowOffset: null,
242
-      shadowRadius: null,
243
-      shadowOpacity: null,
244
-      ...primaryCommon,
245
-      '.dark': {
246
-        ...darkCommon,
247
-      },
248
-      '.danger': {
249
-        ...dangerCommon,
250
-      },
251
-      '.warning': {
252
-        ...warningCommon,
253
-      },
254
-      '.info': {
255
-        ...infoCommon,
256
-      },
257
-      '.primary': {
258
-        ...primaryCommon,
259
-      },
260
-      '.success': {
261
-        ...successCommon,
262
-      },
263
-      '.light': {
264
-        ...lightCommon,
265
-      },
266
-      '.disabled': {
267
-        backgroundColor: 'transparent',
268
-        borderColor: variables.buttonDisabledBg,
269
-        borderWidth: variables.borderWidth * 2,
270
-        'NativeBase.Text': {
271
-          color: variables.buttonDisabledBg
272
-        },
273
-        'NativeBase.Icon': {
274
-          color: variables.buttonDisabledBg
275
-        },
276
-        'NativeBase.IconNB': {
277
-          color: variables.buttonDisabledBg
278
-        }
279
-      }
280
-    },
281
-
282
-    '.small': {
283
-      height: 30,
284
-      'NativeBase.Text': {
285
-        fontSize: 14
286
-      },
287
-      'NativeBase.Icon': {
288
-        fontSize: 20,
289
-        paddingTop: 0
290
-      },
291
-      'NativeBase.IconNB': {
292
-        fontSize: 20,
293
-        paddingTop: 0
294
-      }
295
-    },
296
-
297
-    '.large': {
298
-      height: 60,
299
-      'NativeBase.Text': {
300
-        fontSize: 22
301
-      }
302
-    },
303
-
304
-    '.capitalize': {},
305
-
306
-    '.vertical': {
307
-      flexDirection: 'column',
308
-      height: null
309
-    },
310
-
311
-    'NativeBase.Text': {
312
-      fontFamily: variables.buttonFontFamily,
313
-      marginLeft: 0,
314
-      marginRight: 0,
315
-      color: variables.buttonTextColor,
316
-      fontSize: variables.buttonTextSize,
317
-      paddingHorizontal: 16,
318
-      backgroundColor: 'transparent'
319
-    },
320
-
321
-    'NativeBase.Icon': {
322
-      color: variables.buttonTextColor,
323
-      fontSize: 24,
324
-      marginHorizontal: 16,
325
-      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
326
-    },
327
-    'NativeBase.IconNB': {
328
-      color: variables.buttonTextColor,
329
-      fontSize: 24,
330
-      marginHorizontal: 16,
331
-      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
332
-    },
333
-
334
-    '.iconLeft': {
335
-      'NativeBase.Text': {
336
-        marginLeft: 0
337
-      },
338
-      'NativeBase.IconNB': {
339
-        marginRight: 0,
340
-        marginLeft: 16
341
-      },
342
-      'NativeBase.Icon': {
343
-        marginRight: 0,
344
-        marginLeft: 16
345
-      }
346
-    },
347
-    '.iconRight': {
348
-      'NativeBase.Text': {
349
-        marginRight: 0
350
-      },
351
-      'NativeBase.IconNB': {
352
-        marginLeft: 0,
353
-        marginRight: 16
354
-      },
355
-      'NativeBase.Icon': {
356
-        marginLeft: 0,
357
-        marginRight: 16
358
-      }
359
-    },
360
-    '.picker': {
361
-      'NativeBase.Text': {
362
-        '.note': {
363
-          fontSize: 16,
364
-          lineHeight: null
365
-        }
366
-      }
367
-    },
368
-    paddingVertical: variables.buttonPadding,
369
-    backgroundColor: variables.buttonPrimaryBg,
370
-    borderRadius: variables.borderRadiusBase,
371
-    borderColor: variables.buttonPrimaryBg,
372
-    borderWidth: null,
373
-    height: 45,
374
-    flexDirection: 'row',
375
-    elevation: 2,
376
-    shadowColor:
377
-      platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
378
-    shadowOffset:
379
-      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
380
-    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
381
-    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
382
-    alignItems: 'center',
383
-    justifyContent: 'space-between'
384
-  };
385
-  return buttonTheme;
386
-};

+ 0
- 37
native-base-theme/components/Card.js View File

@@ -1,37 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const cardTheme = {
7
-    '.transparent': {
8
-      shadowColor: null,
9
-      shadowOffset: null,
10
-      shadowOpacity: null,
11
-      shadowRadius: null,
12
-      elevation: null,
13
-      backgroundColor: 'transparent',
14
-      borderWidth: 0
15
-    },
16
-    '.noShadow': {
17
-      shadowColor: null,
18
-      shadowOffset: null,
19
-      shadowOpacity: null,
20
-      elevation: null
21
-    },
22
-    marginVertical: 5,
23
-    marginHorizontal: 2,
24
-    borderWidth: variables.borderWidth,
25
-    borderRadius: variables.cardBorderRadius,
26
-    borderColor: variables.cardBorderColor,
27
-    flexWrap: 'nowrap',
28
-    backgroundColor: variables.cardDefaultBg,
29
-    shadowColor: '#000',
30
-    shadowOffset: { width: 0, height: 2 },
31
-    shadowOpacity: 0.1,
32
-    shadowRadius: 1.5,
33
-    elevation: 3
34
-  };
35
-
36
-  return cardTheme;
37
-};

+ 0
- 198
native-base-theme/components/CardItem.js View File

@@ -1,198 +0,0 @@
1
-// @flow
2
-
3
-import { StyleSheet } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const platform = variables.platform;
10
-  const transparentBtnCommon = {
11
-    'NativeBase.Text': {
12
-      fontSize: variables.DefaultFontSize - 3,
13
-      color: variables.sTabBarActiveTextColor
14
-    },
15
-    'NativeBase.Icon': {
16
-      fontSize: variables.iconFontSize - 10,
17
-      color: variables.sTabBarActiveTextColor,
18
-      marginHorizontal: null
19
-    },
20
-    'NativeBase.IconNB': {
21
-      fontSize: variables.iconFontSize - 10,
22
-      color: variables.sTabBarActiveTextColor
23
-    },
24
-    paddingVertical: null,
25
-    paddingHorizontal: null
26
-  };
27
-
28
-  const cardItemTheme = {
29
-    'NativeBase.Left': {
30
-      'NativeBase.Body': {
31
-        'NativeBase.Text': {
32
-          '.note': {
33
-            color: variables.listNoteColor,
34
-            fontWeight: '400',
35
-            marginRight: 20
36
-          }
37
-        },
38
-        flex: 1,
39
-        marginLeft: 10,
40
-        alignItems: null
41
-      },
42
-      'NativeBase.Icon': {
43
-        fontSize: variables.iconFontSize
44
-      },
45
-      'NativeBase.IconNB': {
46
-        fontSize: variables.iconFontSize
47
-      },
48
-      'NativeBase.Text': {
49
-        marginLeft: 10,
50
-        alignSelf: 'center'
51
-      },
52
-      'NativeBase.Button': {
53
-        '.transparent': {
54
-          ...transparentBtnCommon,
55
-          paddingRight: variables.cardItemPadding + 5
56
-        }
57
-      },
58
-      flex: 1,
59
-      flexDirection: 'row',
60
-      alignItems: 'center'
61
-    },
62
-    '.content': {
63
-      'NativeBase.Text': {
64
-        color: platform === PLATFORM.IOS ? '#555' : '#222',
65
-        fontSize: variables.DefaultFontSize - 2
66
-      }
67
-    },
68
-    '.cardBody': {
69
-      padding: -5,
70
-      'NativeBase.Text': {
71
-        marginTop: 5
72
-      }
73
-    },
74
-    'NativeBase.Body': {
75
-      'NativeBase.Text': {
76
-        '.note': {
77
-          color: variables.listNoteColor,
78
-          fontWeight: '200',
79
-          marginRight: 20
80
-        }
81
-      },
82
-      'NativeBase.Button': {
83
-        '.transparent': {
84
-          ...transparentBtnCommon,
85
-          paddingRight: variables.cardItemPadding + 5,
86
-          alignSelf: 'stretch'
87
-        }
88
-      },
89
-      flex: 1,
90
-      alignSelf: 'stretch',
91
-      alignItems: 'flex-start'
92
-    },
93
-    'NativeBase.Right': {
94
-      'NativeBase.Badge': {
95
-        alignSelf: null
96
-      },
97
-      'NativeBase.Button': {
98
-        '.transparent': {
99
-          ...transparentBtnCommon
100
-        },
101
-        alignSelf: null
102
-      },
103
-      'NativeBase.Icon': {
104
-        alignSelf: null,
105
-        fontSize: variables.iconFontSize - 8,
106
-        color: variables.cardBorderColor
107
-      },
108
-      'NativeBase.IconNB': {
109
-        alignSelf: null,
110
-        fontSize: variables.iconFontSize - 8,
111
-        color: variables.cardBorderColor
112
-      },
113
-      'NativeBase.Text': {
114
-        fontSize: variables.DefaultFontSize - 1,
115
-        alignSelf: null
116
-      },
117
-      'NativeBase.Thumbnail': {
118
-        alignSelf: null
119
-      },
120
-      'NativeBase.Image': {
121
-        alignSelf: null
122
-      },
123
-      'NativeBase.Radio': {
124
-        alignSelf: null
125
-      },
126
-      'NativeBase.Checkbox': {
127
-        alignSelf: null
128
-      },
129
-      'NativeBase.Switch': {
130
-        alignSelf: null
131
-      },
132
-      flex: 0.8
133
-    },
134
-    '.header': {
135
-      'NativeBase.Text': {
136
-        fontSize: 16,
137
-        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
138
-      },
139
-      '.bordered': {
140
-        'NativeBase.Text': {
141
-          color: variables.brandPrimary,
142
-          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
143
-        },
144
-        borderBottomWidth: variables.borderWidth
145
-      },
146
-      borderBottomWidth: null,
147
-      paddingVertical: variables.cardItemPadding + 5
148
-    },
149
-    '.footer': {
150
-      'NativeBase.Text': {
151
-        fontSize: 16,
152
-        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
153
-      },
154
-      '.bordered': {
155
-        'NativeBase.Text': {
156
-          color: variables.brandPrimary,
157
-          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
158
-        },
159
-        borderTopWidth: variables.borderWidth
160
-      },
161
-      borderBottomWidth: null
162
-    },
163
-    'NativeBase.Text': {
164
-      '.note': {
165
-        color: variables.listNoteColor,
166
-        fontWeight: '200'
167
-      }
168
-    },
169
-    'NativeBase.Icon': {
170
-      width: variables.iconFontSize + 5,
171
-      fontSize: variables.iconFontSize - 2
172
-    },
173
-    'NativeBase.IconNB': {
174
-      width: variables.iconFontSize + 5,
175
-      fontSize: variables.iconFontSize - 2
176
-    },
177
-    '.bordered': {
178
-      borderBottomWidth: StyleSheet.hairlineWidth,
179
-      borderColor: variables.cardBorderColor
180
-    },
181
-    '.first': {
182
-      borderTopLeftRadius: variables.cardBorderRadius,
183
-      borderTopRightRadius: variables.cardBorderRadius
184
-    },
185
-    '.last': {
186
-      borderBottomLeftRadius: variables.cardBorderRadius,
187
-      borderBottomRightRadius: variables.cardBorderRadius
188
-    },
189
-    flexDirection: 'row',
190
-    alignItems: 'center',
191
-    borderRadius: variables.cardBorderRadius,
192
-    padding: variables.cardItemPadding + 5,
193
-    paddingVertical: variables.cardItemPadding,
194
-    backgroundColor: variables.cardDefaultBg
195
-  };
196
-
197
-  return cardItemTheme;
198
-};

+ 0
- 38
native-base-theme/components/CheckBox.js View File

@@ -1,38 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const checkBoxTheme = {
7
-    '.checked': {
8
-      'NativeBase.Icon': {
9
-        color: variables.checkboxTickColor
10
-      },
11
-      'NativeBase.IconNB': {
12
-        color: variables.checkboxTickColor
13
-      }
14
-    },
15
-    'NativeBase.Icon': {
16
-      color: 'transparent',
17
-      lineHeight: variables.CheckboxIconSize,
18
-      marginTop: variables.CheckboxIconMarginTop,
19
-      fontSize: variables.CheckboxFontSize
20
-    },
21
-    'NativeBase.IconNB': {
22
-      color: 'transparent',
23
-      lineHeight: variables.CheckboxIconSize,
24
-      marginTop: variables.CheckboxIconMarginTop,
25
-      fontSize: variables.CheckboxFontSize
26
-    },
27
-    borderRadius: variables.CheckboxRadius,
28
-    overflow: 'hidden',
29
-    width: variables.checkboxSize,
30
-    height: variables.checkboxSize,
31
-    borderWidth: variables.CheckboxBorderWidth,
32
-    paddingLeft: variables.CheckboxPaddingLeft - 1,
33
-    paddingBottom: variables.CheckboxPaddingBottom,
34
-    left: 10
35
-  };
36
-
37
-  return checkBoxTheme;
38
-};

+ 0
- 17
native-base-theme/components/Container.js View File

@@ -1,17 +0,0 @@
1
-// @flow
2
-
3
-import { Platform, Dimensions } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-const deviceHeight = Dimensions.get('window').height;
9
-export default (variables /* : * */ = variable) => {
10
-  const theme = {
11
-    flex: 1,
12
-    height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
13
-    backgroundColor: variables.containerBgColor
14
-  };
15
-
16
-  return theme;
17
-};

+ 0
- 14
native-base-theme/components/Content.js View File

@@ -1,14 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const contentTheme = {
5
-    flex: 1,
6
-    backgroundColor: 'transparent',
7
-    'NativeBase.Segment': {
8
-      borderWidth: 0,
9
-      backgroundColor: 'transparent'
10
-    }
11
-  };
12
-
13
-  return contentTheme;
14
-};

+ 0
- 25
native-base-theme/components/Fab.js View File

@@ -1,25 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const fabTheme = {
5
-    'NativeBase.Button': {
6
-      alignItems: 'center',
7
-      padding: null,
8
-      justifyContent: 'center',
9
-      'NativeBase.Icon': {
10
-        alignSelf: 'center',
11
-        fontSize: 20,
12
-        marginLeft: 0,
13
-        marginRight: 0
14
-      },
15
-      'NativeBase.IconNB': {
16
-        alignSelf: 'center',
17
-        fontSize: 20,
18
-        marginLeft: 0,
19
-        marginRight: 0
20
-      }
21
-    }
22
-  };
23
-
24
-  return fabTheme;
25
-};

+ 0
- 119
native-base-theme/components/Footer.js View File

@@ -1,119 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-import { PLATFORM } from './../variables/commonColor';
5
-
6
-export default (variables /* : * */ = variable) => {
7
-  const platformStyle = variables.platformStyle;
8
-  const platform = variables.platform;
9
-
10
-  const iconCommon = {
11
-    'NativeBase.Icon': {
12
-      color: variables.tabBarActiveTextColor
13
-    }
14
-  };
15
-  const iconNBCommon = {
16
-    'NativeBase.IconNB': {
17
-      color: variables.tabBarActiveTextColor
18
-    }
19
-  };
20
-  const textCommon = {
21
-    'NativeBase.Text': {
22
-      color: variables.tabBarActiveTextColor
23
-    }
24
-  };
25
-  const footerTheme = {
26
-    'NativeBase.Left': {
27
-      'NativeBase.Button': {
28
-        '.transparent': {
29
-          backgroundColor: 'transparent',
30
-          borderColor: null,
31
-          elevation: 0,
32
-          shadowColor: null,
33
-          shadowOffset: null,
34
-          shadowRadius: null,
35
-          shadowOpacity: null,
36
-          ...iconCommon,
37
-          ...iconNBCommon,
38
-          ...textCommon
39
-        },
40
-        alignSelf: null,
41
-        ...iconCommon,
42
-        ...iconNBCommon
43
-        // ...textCommon
44
-      },
45
-      flex: 1,
46
-      alignSelf: 'center',
47
-      alignItems: 'flex-start'
48
-    },
49
-    'NativeBase.Body': {
50
-      flex: 1,
51
-      alignItems: 'center',
52
-      alignSelf: 'center',
53
-      flexDirection: 'row',
54
-      'NativeBase.Button': {
55
-        alignSelf: 'center',
56
-        '.transparent': {
57
-          backgroundColor: 'transparent',
58
-          borderColor: null,
59
-          elevation: 0,
60
-          shadowColor: null,
61
-          shadowOffset: null,
62
-          shadowRadius: null,
63
-          shadowOpacity: null,
64
-          ...iconCommon,
65
-          ...iconNBCommon,
66
-          ...textCommon
67
-        },
68
-        '.full': {
69
-          height: variables.footerHeight,
70
-          paddingBottom: variables.footerPaddingBottom,
71
-          flex: 1
72
-        },
73
-        ...iconCommon,
74
-        ...iconNBCommon
75
-        // ...textCommon
76
-      }
77
-    },
78
-    'NativeBase.Right': {
79
-      'NativeBase.Button': {
80
-        '.transparent': {
81
-          backgroundColor: 'transparent',
82
-          borderColor: null,
83
-          elevation: 0,
84
-          shadowColor: null,
85
-          shadowOffset: null,
86
-          shadowRadius: null,
87
-          shadowOpacity: null,
88
-          ...iconCommon,
89
-          ...iconNBCommon,
90
-          ...textCommon
91
-        },
92
-        alignSelf: null,
93
-        ...iconCommon,
94
-        ...iconNBCommon
95
-        // ...textCommon
96
-      },
97
-      flex: 1,
98
-      alignSelf: 'center',
99
-      alignItems: 'flex-end'
100
-    },
101
-    backgroundColor: variables.footerDefaultBg,
102
-    flexDirection: 'row',
103
-    justifyContent: 'center',
104
-    borderTopWidth:
105
-      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
106
-        ? variables.borderWidth
107
-        : undefined,
108
-    borderColor:
109
-      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
110
-        ? '#cbcbcb'
111
-        : undefined,
112
-    height: variables.footerHeight,
113
-    paddingBottom: variables.footerPaddingBottom,
114
-    elevation: 3,
115
-    left: 0,
116
-    right: 0
117
-  };
118
-  return footerTheme;
119
-};

+ 0
- 79
native-base-theme/components/FooterTab.js View File

@@ -1,79 +0,0 @@
1
-// @flow
2
-
3
-import { Platform } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const platform = variables.platform;
10
-
11
-  const footerTabTheme = {
12
-    'NativeBase.Button': {
13
-      '.active': {
14
-        'NativeBase.Text': {
15
-          color: variables.tabBarActiveTextColor,
16
-          fontSize: variables.tabBarTextSize,
17
-          lineHeight: 16
18
-        },
19
-        'NativeBase.Icon': {
20
-          color: variables.tabBarActiveTextColor
21
-        },
22
-        'NativeBase.IconNB': {
23
-          color: variables.tabBarActiveTextColor
24
-        },
25
-        backgroundColor: variables.tabActiveBgColor
26
-      },
27
-      flexDirection: null,
28
-      backgroundColor: 'transparent',
29
-      borderColor: null,
30
-      elevation: 0,
31
-      shadowColor: null,
32
-      shadowOffset: null,
33
-      shadowRadius: null,
34
-      shadowOpacity: null,
35
-      alignSelf: 'center',
36
-      flex: 1,
37
-      height: variables.footerHeight,
38
-      justifyContent: 'center',
39
-      '.badge': {
40
-        'NativeBase.Badge': {
41
-          'NativeBase.Text': {
42
-            fontSize: 11,
43
-            fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
44
-            lineHeight: 14
45
-          },
46
-          top: -3,
47
-          alignSelf: 'center',
48
-          left: 10,
49
-          zIndex: 99,
50
-          height: 18,
51
-          padding: 1.7,
52
-          paddingHorizontal: 3
53
-        },
54
-        'NativeBase.Icon': {
55
-          marginTop: -18
56
-        }
57
-      },
58
-      'NativeBase.Icon': {
59
-        color: variables.tabBarTextColor
60
-      },
61
-      'NativeBase.IconNB': {
62
-        color: variables.tabBarTextColor
63
-      },
64
-      'NativeBase.Text': {
65
-        color: variables.tabBarTextColor,
66
-        fontSize: variables.tabBarTextSize,
67
-        lineHeight: 16
68
-      }
69
-    },
70
-    backgroundColor:
71
-      Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
72
-    flexDirection: 'row',
73
-    justifyContent: 'space-between',
74
-    flex: 1,
75
-    alignSelf: 'stretch'
76
-  };
77
-
78
-  return footerTabTheme;
79
-};

+ 0
- 86
native-base-theme/components/Form.js View File

@@ -1,86 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const theme = {
5
-    'NativeBase.Item': {
6
-      '.fixedLabel': {
7
-        'NativeBase.Label': {
8
-          paddingLeft: null
9
-        },
10
-        marginLeft: 15
11
-      },
12
-      '.inlineLabel': {
13
-        'NativeBase.Label': {
14
-          paddingLeft: null
15
-        },
16
-        marginLeft: 15
17
-      },
18
-      '.placeholderLabel': {
19
-        'NativeBase.Input': {}
20
-      },
21
-      '.stackedLabel': {
22
-        'NativeBase.Label': {
23
-          top: 5,
24
-          paddingLeft: null
25
-        },
26
-        'NativeBase.Input': {
27
-          paddingLeft: null,
28
-          marginLeft: null
29
-        },
30
-        'NativeBase.Icon': {
31
-          marginTop: 36
32
-        },
33
-        marginLeft: 15
34
-      },
35
-      '.floatingLabel': {
36
-        'NativeBase.Input': {
37
-          paddingLeft: null,
38
-          top: 10,
39
-          marginLeft: null
40
-        },
41
-        'NativeBase.Label': {
42
-          left: 0,
43
-          top: 6
44
-        },
45
-        'NativeBase.Icon': {
46
-          top: 6
47
-        },
48
-        marginTop: 15,
49
-        marginLeft: 15
50
-      },
51
-      '.regular': {
52
-        'NativeBase.Label': {
53
-          left: 0
54
-        },
55
-        marginLeft: 0
56
-      },
57
-      '.rounded': {
58
-        'NativeBase.Label': {
59
-          left: 0
60
-        },
61
-        marginLeft: 0
62
-      },
63
-      '.underline': {
64
-        'NativeBase.Label': {
65
-          left: 0,
66
-          top: 0,
67
-          position: 'relative'
68
-        },
69
-        'NativeBase.Input': {
70
-          left: -15
71
-        },
72
-        marginLeft: 15
73
-      },
74
-      '.last': {
75
-        marginLeft: 0,
76
-        paddingLeft: 15
77
-      },
78
-      'NativeBase.Label': {
79
-        paddingRight: 5
80
-      },
81
-      marginLeft: 15
82
-    }
83
-  };
84
-
85
-  return theme;
86
-};

+ 0
- 13
native-base-theme/components/H1.js View File

@@ -1,13 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const h1Theme = {
7
-    color: variables.textColor,
8
-    fontSize: variables.fontSizeH1,
9
-    lineHeight: variables.lineHeightH1
10
-  };
11
-
12
-  return h1Theme;
13
-};

+ 0
- 13
native-base-theme/components/H2.js View File

@@ -1,13 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const h2Theme = {
7
-    color: variables.textColor,
8
-    fontSize: variables.fontSizeH2,
9
-    lineHeight: variables.lineHeightH2
10
-  };
11
-
12
-  return h2Theme;
13
-};

+ 0
- 13
native-base-theme/components/H3.js View File

@@ -1,13 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const h3Theme = {
7
-    color: variables.textColor,
8
-    fontSize: variables.fontSizeH3,
9
-    lineHeight: variables.lineHeightH3
10
-  };
11
-
12
-  return h3Theme;
13
-};

+ 0
- 419
native-base-theme/components/Header.js View File

@@ -1,419 +0,0 @@
1
-// @flow
2
-
3
-import { PixelRatio, StatusBar } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const platformStyle = variables.platformStyle;
10
-  const platform = variables.platform;
11
-
12
-  const headerTheme = {
13
-    '.span': {
14
-      height: 128,
15
-      'NativeBase.Left': {
16
-        alignSelf: 'flex-start'
17
-      },
18
-      'NativeBase.Body': {
19
-        alignSelf: 'flex-end',
20
-        alignItems: 'flex-start',
21
-        justifyContent: 'center',
22
-        paddingBottom: 26
23
-      },
24
-      'NativeBase.Right': {
25
-        alignSelf: 'flex-start'
26
-      }
27
-    },
28
-    '.hasSubtitle': {
29
-      'NativeBase.Body': {
30
-        'NativeBase.Title': {
31
-          fontSize: variables.titleFontSize - 2,
32
-          fontFamily: variables.titleFontfamily,
33
-          textAlign: 'center',
34
-          fontWeight: '500',
35
-          paddingBottom: 3
36
-        },
37
-        'NativeBase.Subtitle': {
38
-          fontSize: variables.subTitleFontSize,
39
-          fontFamily: variables.titleFontfamily,
40
-          color: variables.subtitleColor,
41
-          textAlign: 'center'
42
-        }
43
-      }
44
-    },
45
-    '.transparent': {
46
-      backgroundColor: 'transparent',
47
-      borderBottomColor: 'transparent',
48
-      elevation: 0,
49
-      shadowColor: null,
50
-      shadowOffset: null,
51
-      shadowRadius: null,
52
-      shadowOpacity: null,
53
-      paddingTop:
54
-        platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
55
-      height:
56
-        platform === PLATFORM.ANDROID
57
-          ? variables.toolbarHeight + StatusBar.currentHeight
58
-          : variables.toolbarHeight
59
-    },
60
-    '.noShadow': {
61
-      elevation: 0,
62
-      shadowColor: null,
63
-      shadowOffset: null,
64
-      shadowRadius: null,
65
-      shadowOpacity: null
66
-    },
67
-    '.hasTabs': {
68
-      elevation: 0,
69
-      shadowColor: null,
70
-      shadowOffset: null,
71
-      shadowRadius: null,
72
-      shadowOpacity: null,
73
-      borderBottomWidth: null
74
-    },
75
-    '.hasSegment': {
76
-      elevation: 0,
77
-      shadowColor: null,
78
-      shadowOffset: null,
79
-      shadowRadius: null,
80
-      shadowOpacity: null,
81
-      borderBottomWidth: null,
82
-      'NativeBase.Left': {
83
-        flex: 0.3
84
-      },
85
-      'NativeBase.Right': {
86
-        flex: 0.3
87
-      },
88
-      'NativeBase.Body': {
89
-        flex: 1,
90
-        'NativeBase.Segment': {
91
-          marginRight: 0,
92
-          alignSelf: 'center',
93
-          'NativeBase.Button': {
94
-            paddingLeft: 0,
95
-            paddingRight: 0
96
-          }
97
-        }
98
-      }
99
-    },
100
-    '.noLeft': {
101
-      'NativeBase.Left': {
102
-        width: platform === PLATFORM.IOS ? undefined : 0,
103
-        flex: platform === PLATFORM.IOS ? 1 : 0
104
-      },
105
-      'NativeBase.Body': {
106
-        'NativeBase.Title': {
107
-          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
108
-        },
109
-        'NativeBase.Subtitle': {
110
-          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
111
-        }
112
-      }
113
-    },
114
-    'NativeBase.Button': {
115
-      justifyContent: 'center',
116
-      alignSelf: 'center',
117
-      alignItems: 'center',
118
-      '.transparent': {
119
-        'NativeBase.Text': {
120
-          color: variables.toolbarBtnTextColor,
121
-          fontWeight: '600'
122
-        },
123
-        'NativeBase.Icon': {
124
-          color: variables.toolbarBtnColor
125
-        },
126
-        'NativeBase.IconNB': {
127
-          color: variables.toolbarBtnColor
128
-        },
129
-        paddingHorizontal: variables.buttonPadding
130
-      },
131
-      paddingHorizontal: 15
132
-    },
133
-    '.searchBar': {
134
-      'NativeBase.Item': {
135
-        'NativeBase.Icon': {
136
-          backgroundColor: 'transparent',
137
-          color: variables.dropdownLinkColor,
138
-          fontSize: variables.toolbarSearchIconSize,
139
-          alignItems: 'center',
140
-          marginTop: 2,
141
-          paddingRight: 10,
142
-          paddingLeft: 10
143
-        },
144
-        'NativeBase.IconNB': {
145
-          backgroundColor: 'transparent',
146
-          color: null,
147
-          alignSelf: 'center'
148
-        },
149
-        'NativeBase.Input': {
150
-          alignSelf: 'center',
151
-          lineHeight: null,
152
-          height: variables.searchBarInputHeight
153
-        },
154
-        alignSelf: 'center',
155
-        alignItems: 'center',
156
-        justifyContent: 'flex-start',
157
-        flex: 1,
158
-        height: variables.searchBarHeight,
159
-        borderColor: 'transparent',
160
-        backgroundColor: variables.toolbarInputColor
161
-      },
162
-      'NativeBase.Button': {
163
-        '.transparent': {
164
-          'NativeBase.Text': {
165
-            fontWeight: '500'
166
-          },
167
-          paddingHorizontal: null,
168
-          paddingLeft: platform === PLATFORM.IOS ? 10 : null
169
-        },
170
-        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
171
-        width: platform === PLATFORM.IOS ? undefined : 0,
172
-        height: platform === PLATFORM.IOS ? undefined : 0
173
-      }
174
-    },
175
-    '.rounded': {
176
-      'NativeBase.Item': {
177
-        borderRadius:
178
-          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
179
-            ? 25
180
-            : 3
181
-      }
182
-    },
183
-    'NativeBase.Left': {
184
-      'NativeBase.Button': {
185
-        '.hasText': {
186
-          marginLeft: -10,
187
-          height: 30,
188
-          'NativeBase.Icon': {
189
-            color: variables.toolbarBtnColor,
190
-            fontSize: variables.iconHeaderSize,
191
-            marginTop: 2,
192
-            marginRight: 5,
193
-            marginLeft: 2
194
-          },
195
-          'NativeBase.Text': {
196
-            color: variables.toolbarBtnTextColor,
197
-            fontSize: platform === PLATFORM.IOS ? 17 : 0,
198
-            marginLeft: 7,
199
-            lineHeight: 19.5
200
-          },
201
-          'NativeBase.IconNB': {
202
-            color: variables.toolbarBtnColor,
203
-            fontSize: variables.iconHeaderSize,
204
-            marginTop: 2,
205
-            marginRight: 5,
206
-            marginLeft: 2
207
-          }
208
-        },
209
-        '.transparent': {
210
-          marginLeft:
211
-            platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
212
-              ? -3
213
-              : 0,
214
-          'NativeBase.Icon': {
215
-            color: variables.toolbarBtnColor,
216
-            fontSize:
217
-              platform === PLATFORM.IOS &&
218
-              variables.platformStyle !== PLATFORM.MATERIAL
219
-                ? variables.iconHeaderSize + 1
220
-                : variables.iconHeaderSize,
221
-            marginTop: 0,
222
-            marginRight: 2,
223
-            marginLeft: 1,
224
-            paddingTop: 1
225
-          },
226
-          'NativeBase.IconNB': {
227
-            color: variables.toolbarBtnColor,
228
-            fontSize:
229
-              platform === PLATFORM.IOS &&
230
-              variables.platformStyle !== PLATFORM.MATERIAL
231
-                ? variables.iconHeaderSize + 1
232
-                : variables.iconHeaderSize - 2,
233
-            marginTop: 0,
234
-            marginRight: 2,
235
-            marginLeft: 1,
236
-            paddingTop: 1
237
-          },
238
-          'NativeBase.Text': {
239
-            color: variables.toolbarBtnTextColor,
240
-            fontSize: platform === PLATFORM.IOS ? 17 : 0,
241
-            top: platform === PLATFORM.IOS ? 1 : -1.5,
242
-            paddingLeft:
243
-              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
244
-                ? 2
245
-                : 5,
246
-            paddingRight:
247
-              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
248
-                ? undefined
249
-                : 10
250
-          },
251
-          backgroundColor: 'transparent',
252
-          borderColor: null,
253
-          elevation: 0,
254
-          shadowColor: null,
255
-          shadowOffset: null,
256
-          shadowRadius: null,
257
-          shadowOpacity: null
258
-        },
259
-        'NativeBase.Icon': {
260
-          color: variables.toolbarBtnColor
261
-        },
262
-        'NativeBase.IconNB': {
263
-          color: variables.toolbarBtnColor
264
-        },
265
-        alignSelf: null,
266
-        paddingRight: variables.buttonPadding,
267
-        paddingLeft:
268
-          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
269
-            ? 4
270
-            : 8
271
-      },
272
-      flex:
273
-        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
274
-          ? 1
275
-          : 0.4,
276
-      alignSelf: 'center',
277
-      alignItems: 'flex-start'
278
-    },
279
-    'NativeBase.Body': {
280
-      flex: 1,
281
-      alignItems:
282
-        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
283
-          ? 'center'
284
-          : 'flex-start',
285
-      alignSelf: 'center',
286
-      'NativeBase.Segment': {
287
-        borderWidth: 0,
288
-        alignSelf: 'flex-end',
289
-        marginRight: platform === PLATFORM.IOS ? -40 : -55
290
-      },
291
-      'NativeBase.Button': {
292
-        alignSelf: 'center',
293
-        '.transparent': {
294
-          backgroundColor: 'transparent'
295
-        },
296
-        'NativeBase.Icon': {
297
-          color: variables.toolbarBtnColor
298
-        },
299
-        'NativeBase.IconNB': {
300
-          color: variables.toolbarBtnColor
301
-        },
302
-        'NativeBase.Text': {
303
-          color: variables.inverseTextColor,
304
-          backgroundColor: 'transparent'
305
-        }
306
-      }
307
-    },
308
-    'NativeBase.Right': {
309
-      'NativeBase.Button': {
310
-        '.hasText': {
311
-          height: 30,
312
-          'NativeBase.Icon': {
313
-            color: variables.toolbarBtnColor,
314
-            fontSize: variables.iconHeaderSize - 2,
315
-            marginTop: 2,
316
-            marginRight: 2,
317
-            marginLeft: 5
318
-          },
319
-          'NativeBase.Text': {
320
-            color: variables.toolbarBtnTextColor,
321
-            fontSize: platform === PLATFORM.IOS ? 17 : 14,
322
-            lineHeight: 19.5
323
-          },
324
-          'NativeBase.IconNB': {
325
-            color: variables.toolbarBtnColor,
326
-            fontSize: variables.iconHeaderSize - 2,
327
-            marginTop: 2,
328
-            marginRight: 2,
329
-            marginLeft: 5
330
-          }
331
-        },
332
-        '.transparent': {
333
-          marginRight: platform === PLATFORM.IOS ? -9 : -5,
334
-          paddingLeft: 15,
335
-          paddingRight: 12,
336
-          paddingHorizontal: 15,
337
-          borderRadius: 50,
338
-          'NativeBase.Icon': {
339
-            color: variables.toolbarBtnColor,
340
-            fontSize: variables.iconHeaderSize - 2,
341
-            marginTop: 0,
342
-            marginLeft: 2,
343
-            marginRight: 0
344
-            // paddingTop: 0
345
-          },
346
-          'NativeBase.IconNB': {
347
-            color: variables.toolbarBtnColor,
348
-            fontSize: variables.iconHeaderSize - 2,
349
-            marginTop: 0,
350
-            marginLeft: 2,
351
-            marginRight: 0
352
-            // paddingTop: 0
353
-          },
354
-          'NativeBase.Text': {
355
-            color: variables.toolbarBtnTextColor,
356
-            fontSize: platform === PLATFORM.IOS ? 17 : 14,
357
-            top: platform === PLATFORM.IOS ? 1 : -1.5,
358
-            paddingRight:
359
-              platform === PLATFORM.IOS &&
360
-              variables.platformStyle !== PLATFORM.MATERIAL
361
-                ? 0
362
-                : undefined
363
-          },
364
-          backgroundColor: 'transparent',
365
-          borderColor: null,
366
-          elevation: 0,
367
-          shadowColor: null,
368
-          shadowOffset: null,
369
-          shadowRadius: null,
370
-          shadowOpacity: null
371
-        },
372
-        'NativeBase.Icon': {
373
-          color: variables.toolbarBtnColor
374
-        },
375
-        'NativeBase.IconNB': {
376
-          color: variables.toolbarBtnColor
377
-        },
378
-        alignSelf: null,
379
-        paddingHorizontal: variables.buttonPadding
380
-      },
381
-      flex: 1,
382
-      alignSelf: 'center',
383
-      alignItems: 'flex-end',
384
-      flexDirection: 'row',
385
-      justifyContent: 'flex-end'
386
-    },
387
-    backgroundColor: variables.toolbarDefaultBg,
388
-    flexDirection: 'row',
389
-    // paddingHorizontal: 10,
390
-    paddingLeft:
391
-      platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
392
-        ? 6
393
-        : 10,
394
-    paddingRight: 10,
395
-    justifyContent: 'center',
396
-    paddingTop: platform === PLATFORM.IOS ? 18 : 0,
397
-    borderBottomWidth:
398
-      platform === PLATFORM.IOS
399
-        ? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
400
-        : 0,
401
-    borderBottomColor: variables.toolbarDefaultBorder,
402
-    height:
403
-      variables.platform === PLATFORM.IOS &&
404
-      variables.platformStyle === PLATFORM.MATERIAL
405
-        ? variables.toolbarHeight + 10
406
-        : variables.toolbarHeight,
407
-    elevation: 3,
408
-    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
409
-    shadowOffset:
410
-      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
411
-    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
412
-    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
413
-    top: 0,
414
-    left: 0,
415
-    right: 0
416
-  };
417
-
418
-  return headerTheme;
419
-};

+ 0
- 12
native-base-theme/components/Icon.js View File

@@ -1,12 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const iconTheme = {
7
-    fontSize: variables.iconFontSize,
8
-    color: variable.textColor
9
-  };
10
-
11
-  return iconTheme;
12
-};

+ 0
- 19
native-base-theme/components/Input.js View File

@@ -1,19 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const inputTheme = {
7
-    '.multiline': {
8
-      height: null
9
-    },
10
-    height: variables.inputHeightBase,
11
-    color: variables.inputColor,
12
-    paddingLeft: 5,
13
-    paddingRight: 5,
14
-    flex: 1,
15
-    fontSize: variables.inputFontSize
16
-  };
17
-
18
-  return inputTheme;
19
-};

+ 0
- 132
native-base-theme/components/InputGroup.js View File

@@ -1,132 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const inputGroupTheme = {
7
-    'NativeBase.Icon': {
8
-      fontSize: 24,
9
-      color: variables.sTabBarActiveTextColor,
10
-      paddingHorizontal: 5
11
-    },
12
-    'NativeBase.IconNB': {
13
-      fontSize: 24,
14
-      color: variables.sTabBarActiveTextColor,
15
-      paddingHorizontal: 5
16
-    },
17
-    'NativeBase.Input': {
18
-      height: variables.inputHeightBase,
19
-      color: variables.inputColor,
20
-      paddingLeft: 5,
21
-      paddingRight: 5,
22
-      flex: 1,
23
-      fontSize: variables.inputFontSize,
24
-      lineHeight: variables.inputLineHeight
25
-    },
26
-    '.underline': {
27
-      '.success': {
28
-        borderColor: variables.inputSuccessBorderColor
29
-      },
30
-      '.error': {
31
-        borderColor: variables.inputErrorBorderColor
32
-      },
33
-      paddingLeft: 5,
34
-      borderWidth: variables.borderWidth,
35
-      borderTopWidth: 0,
36
-      borderRightWidth: 0,
37
-      borderLeftWidth: 0,
38
-      borderColor: variables.inputBorderColor
39
-    },
40
-    '.regular': {
41
-      '.success': {
42
-        borderColor: variables.inputSuccessBorderColor
43
-      },
44
-      '.error': {
45
-        borderColor: variables.inputErrorBorderColor
46
-      },
47
-      paddingLeft: 5,
48
-      borderWidth: variables.borderWidth,
49
-      borderColor: variables.inputBorderColor
50
-    },
51
-    '.rounded': {
52
-      '.success': {
53
-        borderColor: variables.inputSuccessBorderColor
54
-      },
55
-      '.error': {
56
-        borderColor: variables.inputErrorBorderColor
57
-      },
58
-      paddingLeft: 5,
59
-      borderWidth: variables.borderWidth,
60
-      borderRadius: variables.inputGroupRoundedBorderRadius,
61
-      borderColor: variables.inputBorderColor
62
-    },
63
-
64
-    '.success': {
65
-      'NativeBase.Icon': {
66
-        color: variables.inputSuccessBorderColor
67
-      },
68
-      'NativeBase.IconNB': {
69
-        color: variables.inputSuccessBorderColor
70
-      },
71
-      '.rounded': {
72
-        borderRadius: 30,
73
-        borderColor: variables.inputSuccessBorderColor
74
-      },
75
-      '.regular': {
76
-        borderColor: variables.inputSuccessBorderColor
77
-      },
78
-      '.underline': {
79
-        borderWidth: variables.borderWidth,
80
-        borderTopWidth: 0,
81
-        borderRightWidth: 0,
82
-        borderLeftWidth: 0,
83
-        borderColor: variables.inputSuccessBorderColor
84
-      },
85
-      borderColor: variables.inputSuccessBorderColor
86
-    },
87
-
88
-    '.error': {
89
-      'NativeBase.Icon': {
90
-        color: variables.inputErrorBorderColor
91
-      },
92
-      'NativeBase.IconNB': {
93
-        color: variables.inputErrorBorderColor
94
-      },
95
-      '.rounded': {
96
-        borderRadius: 30,
97
-        borderColor: variables.inputErrorBorderColor
98
-      },
99
-      '.regular': {
100
-        borderColor: variables.inputErrorBorderColor
101
-      },
102
-      '.underline': {
103
-        borderWidth: variables.borderWidth,
104
-        borderTopWidth: 0,
105
-        borderRightWidth: 0,
106
-        borderLeftWidth: 0,
107
-        borderColor: variables.inputErrorBorderColor
108
-      },
109
-      borderColor: variables.inputErrorBorderColor
110
-    },
111
-    '.disabled': {
112
-      'NativeBase.Icon': {
113
-        color: '#384850'
114
-      },
115
-      'NativeBase.IconNB': {
116
-        color: '#384850'
117
-      }
118
-    },
119
-
120
-    paddingLeft: 5,
121
-    borderWidth: variables.borderWidth,
122
-    borderTopWidth: 0,
123
-    borderRightWidth: 0,
124
-    borderLeftWidth: 0,
125
-    borderColor: variables.inputBorderColor,
126
-    backgroundColor: 'transparent',
127
-    flexDirection: 'row',
128
-    alignItems: 'center'
129
-  };
130
-
131
-  return inputGroupTheme;
132
-};

+ 0
- 241
native-base-theme/components/Item.js View File

@@ -1,241 +0,0 @@
1
-// @flow
2
-
3
-import { Platform } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const itemTheme = {
10
-    '.floatingLabel': {
11
-      'NativeBase.Input': {
12
-        height: 50,
13
-        top: 8,
14
-        paddingTop: 3,
15
-        paddingBottom: 7,
16
-        '.multiline': {
17
-          minHeight: variables.inputHeightBase,
18
-          paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
19
-          paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
20
-        }
21
-      },
22
-      'NativeBase.Label': {
23
-        paddingTop: 5
24
-      },
25
-      'NativeBase.Icon': {
26
-        top: 6,
27
-        paddingTop: 8
28
-      },
29
-      'NativeBase.IconNB': {
30
-        top: 6,
31
-        paddingTop: 8
32
-      }
33
-    },
34
-    '.fixedLabel': {
35
-      'NativeBase.Label': {
36
-        position: null,
37
-        top: null,
38
-        left: null,
39
-        right: null,
40
-        flex: 1,
41
-        height: null,
42
-        width: null,
43
-        fontSize: variables.inputFontSize
44
-      },
45
-      'NativeBase.Input': {
46
-        flex: 2,
47
-        fontSize: variables.inputFontSize
48
-      }
49
-    },
50
-    '.stackedLabel': {
51
-      'NativeBase.Label': {
52
-        position: null,
53
-        top: null,
54
-        left: null,
55
-        right: null,
56
-        paddingTop: 5,
57
-        alignSelf: 'flex-start',
58
-        fontSize: variables.inputFontSize - 2
59
-      },
60
-      'NativeBase.Icon': {
61
-        marginTop: 36
62
-      },
63
-      'NativeBase.Input': {
64
-        alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
65
-        flex: 1,
66
-        width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
67
-        fontSize: variables.inputFontSize,
68
-        lineHeight: variables.inputLineHeight - 6,
69
-        '.secureTextEntry': {
70
-          fontSize: variables.inputFontSize
71
-        },
72
-        '.multiline': {
73
-          paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
74
-          paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
75
-        }
76
-      },
77
-      flexDirection: null,
78
-      minHeight: variables.inputHeightBase + 15
79
-    },
80
-    '.inlineLabel': {
81
-      'NativeBase.Label': {
82
-        position: null,
83
-        top: null,
84
-        left: null,
85
-        right: null,
86
-        paddingRight: 20,
87
-        height: null,
88
-        width: null,
89
-        fontSize: variables.inputFontSize
90
-      },
91
-      'NativeBase.Input': {
92
-        paddingLeft: 5,
93
-        fontSize: variables.inputFontSize
94
-      },
95
-      flexDirection: 'row'
96
-    },
97
-    'NativeBase.Label': {
98
-      fontSize: variables.inputFontSize,
99
-      color: variables.inputColorPlaceholder,
100
-      paddingRight: 5
101
-    },
102
-    'NativeBase.Icon': {
103
-      fontSize: 24,
104
-      paddingRight: 8
105
-    },
106
-    'NativeBase.IconNB': {
107
-      fontSize: 24,
108
-      paddingRight: 8
109
-    },
110
-    'NativeBase.Input': {
111
-      '.multiline': {
112
-        height: null
113
-      },
114
-      height: variables.inputHeightBase,
115
-      color: variables.inputColor,
116
-      flex: 1,
117
-      top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
118
-      fontSize: variables.inputFontSize
119
-    },
120
-    '.underline': {
121
-      'NativeBase.Input': {
122
-        paddingLeft: 15
123
-      },
124
-      '.success': {
125
-        borderColor: variables.inputSuccessBorderColor
126
-      },
127
-      '.error': {
128
-        borderColor: variables.inputErrorBorderColor
129
-      },
130
-      borderWidth: variables.borderWidth * 2,
131
-      borderTopWidth: 0,
132
-      borderRightWidth: 0,
133
-      borderLeftWidth: 0,
134
-      borderColor: variables.inputBorderColor
135
-    },
136
-    '.regular': {
137
-      'NativeBase.Input': {
138
-        paddingLeft: 8
139
-      },
140
-      'NativeBase.Icon': {
141
-        paddingLeft: 10
142
-      },
143
-      '.success': {
144
-        borderColor: variables.inputSuccessBorderColor
145
-      },
146
-      '.error': {
147
-        borderColor: variables.inputErrorBorderColor
148
-      },
149
-      borderWidth: variables.borderWidth * 2,
150
-      borderColor: variables.inputBorderColor
151
-    },
152
-    '.rounded': {
153
-      'NativeBase.Input': {
154
-        paddingLeft: 8
155
-      },
156
-      'NativeBase.Icon': {
157
-        paddingLeft: 10
158
-      },
159
-      '.success': {
160
-        borderColor: variables.inputSuccessBorderColor
161
-      },
162
-      '.error': {
163
-        borderColor: variables.inputErrorBorderColor
164
-      },
165
-      borderWidth: variables.borderWidth * 2,
166
-      borderRadius: 30,
167
-      borderColor: variables.inputBorderColor
168
-    },
169
-
170
-    '.success': {
171
-      'NativeBase.Icon': {
172
-        color: variables.inputSuccessBorderColor
173
-      },
174
-      'NativeBase.IconNB': {
175
-        color: variables.inputSuccessBorderColor
176
-      },
177
-      '.rounded': {
178
-        borderRadius: 30,
179
-        borderColor: variables.inputSuccessBorderColor
180
-      },
181
-      '.regular': {
182
-        borderColor: variables.inputSuccessBorderColor
183
-      },
184
-      '.underline': {
185
-        borderWidth: variables.borderWidth * 2,
186
-        borderTopWidth: 0,
187
-        borderRightWidth: 0,
188
-        borderLeftWidth: 0,
189
-        borderColor: variables.inputSuccessBorderColor
190
-      },
191
-      borderColor: variables.inputSuccessBorderColor
192
-    },
193
-
194
-    '.error': {
195
-      'NativeBase.Icon': {
196
-        color: variables.inputErrorBorderColor
197
-      },
198
-      'NativeBase.IconNB': {
199
-        color: variables.inputErrorBorderColor
200
-      },
201
-      '.rounded': {
202
-        borderRadius: 30,
203
-        borderColor: variables.inputErrorBorderColor
204
-      },
205
-      '.regular': {
206
-        borderColor: variables.inputErrorBorderColor
207
-      },
208
-      '.underline': {
209
-        borderWidth: variables.borderWidth * 2,
210
-        borderTopWidth: 0,
211
-        borderRightWidth: 0,
212
-        borderLeftWidth: 0,
213
-        borderColor: variables.inputErrorBorderColor
214
-      },
215
-      borderColor: variables.inputErrorBorderColor
216
-    },
217
-    '.disabled': {
218
-      'NativeBase.Icon': {
219
-        color: '#384850'
220
-      },
221
-      'NativeBase.IconNB': {
222
-        color: '#384850'
223
-      }
224
-    },
225
-    '.picker': {
226
-      marginLeft: 0
227
-    },
228
-
229
-    borderWidth: variables.borderWidth * 2,
230
-    borderTopWidth: 0,
231
-    borderRightWidth: 0,
232
-    borderLeftWidth: 0,
233
-    borderColor: variables.inputBorderColor,
234
-    backgroundColor: 'transparent',
235
-    flexDirection: 'row',
236
-    alignItems: 'center',
237
-    marginLeft: 2
238
-  };
239
-
240
-  return itemTheme;
241
-};

+ 0
- 12
native-base-theme/components/Label.js View File

@@ -1,12 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const labelTheme = {
5
-    '.focused': {
6
-      width: 0
7
-    },
8
-    fontSize: 17
9
-  };
10
-
11
-  return labelTheme;
12
-};

+ 0
- 11
native-base-theme/components/Left.js View File

@@ -1,11 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const leftTheme = {
5
-    flex: 1,
6
-    alignSelf: 'center',
7
-    alignItems: 'flex-start'
8
-  };
9
-
10
-  return leftTheme;
11
-};

+ 0
- 446
native-base-theme/components/ListItem.js View File

@@ -1,446 +0,0 @@
1
-// @flow
2
-
3
-import { Platform, PixelRatio } from 'react-native';
4
-
5
-import pickerTheme from './Picker';
6
-import variable from './../variables/platform';
7
-import { PLATFORM } from './../variables/commonColor';
8
-
9
-export default (variables /* : * */ = variable) => {
10
-  const platform = variables.platform;
11
-  const selectedStyle = {
12
-    'NativeBase.Text': {
13
-      color: variables.listItemSelected
14
-    },
15
-    'NativeBase.Icon': {
16
-      color: variables.listItemSelected
17
-    }
18
-  };
19
-
20
-  const listItemTheme = {
21
-    'NativeBase.InputGroup': {
22
-      'NativeBase.Icon': {
23
-        paddingRight: 5
24
-      },
25
-      'NativeBase.IconNB': {
26
-        paddingRight: 5
27
-      },
28
-      'NativeBase.Input': {
29
-        paddingHorizontal: 5
30
-      },
31
-      flex: 1,
32
-      borderWidth: null,
33
-      margin: -10,
34
-      borderBottomColor: 'transparent'
35
-    },
36
-    '.searchBar': {
37
-      'NativeBase.Item': {
38
-        'NativeBase.Icon': {
39
-          backgroundColor: 'transparent',
40
-          color: variables.dropdownLinkColor,
41
-          fontSize:
42
-            platform === PLATFORM.IOS
43
-              ? variables.iconFontSize - 10
44
-              : variables.iconFontSize - 5,
45
-          alignItems: 'center',
46
-          marginTop: 2,
47
-          paddingRight: 8
48
-        },
49
-        'NativeBase.IconNB': {
50
-          backgroundColor: 'transparent',
51
-          color: null,
52
-          alignSelf: 'center'
53
-        },
54
-        'NativeBase.Input': {
55
-          alignSelf: 'center'
56
-        },
57
-        alignSelf: 'center',
58
-        alignItems: 'center',
59
-        justifyContent: 'flex-start',
60
-        flex: 1,
61
-        height: platform === PLATFORM.IOS ? 30 : 40,
62
-        borderColor: 'transparent',
63
-        backgroundColor: '#fff',
64
-        borderRadius: 5
65
-      },
66
-      'NativeBase.Button': {
67
-        '.transparent': {
68
-          'NativeBase.Text': {
69
-            fontWeight: '500'
70
-          },
71
-          paddingHorizontal: null,
72
-          paddingLeft: platform === PLATFORM.IOS ? 10 : null
73
-        },
74
-        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
75
-        width: platform === PLATFORM.IOS ? undefined : 0,
76
-        height: platform === PLATFORM.IOS ? undefined : 0
77
-      },
78
-      backgroundColor: variables.toolbarInputColor,
79
-      padding: 10,
80
-      marginLeft: null
81
-    },
82
-    'NativeBase.CheckBox': {
83
-      marginLeft: -10,
84
-      marginRight: 10
85
-    },
86
-    '.first': {
87
-      '.itemHeader': {
88
-        paddingTop: variables.listItemPadding + 3
89
-      }
90
-    },
91
-    '.itemHeader': {
92
-      '.first': {
93
-        paddingTop: variables.listItemPadding + 3
94
-      },
95
-      borderBottomWidth:
96
-        platform === PLATFORM.IOS ? variables.borderWidth : null,
97
-      marginLeft: null,
98
-      padding: variables.listItemPadding,
99
-      paddingLeft: variables.listItemPadding + 5,
100
-      paddingTop:
101
-        platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
102
-      paddingBottom:
103
-        platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
104
-      flexDirection: 'row',
105
-      borderColor: variables.listBorderColor,
106
-      'NativeBase.Text': {
107
-        fontSize: 14,
108
-        color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
109
-      }
110
-    },
111
-    '.itemDivider': {
112
-      borderBottomWidth: null,
113
-      marginLeft: null,
114
-      padding: variables.listItemPadding,
115
-      paddingLeft: variables.listItemPadding + 5,
116
-      backgroundColor: variables.listDividerBg,
117
-      flexDirection: 'row',
118
-      borderColor: variables.listBorderColor
119
-    },
120
-    '.selected': {
121
-      'NativeBase.Left': {
122
-        ...selectedStyle
123
-      },
124
-      'NativeBase.Body': {
125
-        ...selectedStyle
126
-      },
127
-      'NativeBase.Right': {
128
-        ...selectedStyle
129
-      },
130
-      ...selectedStyle
131
-    },
132
-    'NativeBase.Left': {
133
-      'NativeBase.Body': {
134
-        'NativeBase.Text': {
135
-          '.note': {
136
-            color: variables.listNoteColor,
137
-            fontWeight: '200'
138
-          },
139
-          fontWeight: '600'
140
-        },
141
-        marginLeft: 10,
142
-        alignItems: null,
143
-        alignSelf: null
144
-      },
145
-      'NativeBase.Icon': {
146
-        width: variables.iconFontSize - 10,
147
-        fontSize: variables.iconFontSize - 10
148
-      },
149
-      'NativeBase.IconNB': {
150
-        width: variables.iconFontSize - 10,
151
-        fontSize: variables.iconFontSize - 10
152
-      },
153
-      'NativeBase.Text': {
154
-        alignSelf: 'center'
155
-      },
156
-      flexDirection: 'row'
157
-    },
158
-    'NativeBase.Body': {
159
-      'NativeBase.Text': {
160
-        marginHorizontal: variables.listItemPadding,
161
-        '.note': {
162
-          color: variables.listNoteColor,
163
-          fontWeight: '200'
164
-        }
165
-      },
166
-      alignSelf: null,
167
-      alignItems: null
168
-    },
169
-    'NativeBase.Right': {
170
-      'NativeBase.Badge': {
171
-        alignSelf: null
172
-      },
173
-      'NativeBase.PickerNB': {
174
-        'NativeBase.Button': {
175
-          marginRight: -15,
176
-          'NativeBase.Text': {
177
-            color: variables.topTabBarActiveTextColor
178
-          }
179
-        }
180
-      },
181
-      'NativeBase.Button': {
182
-        alignSelf: null,
183
-        '.transparent': {
184
-          'NativeBase.Text': {
185
-            color: variables.topTabBarActiveTextColor
186
-          }
187
-        }
188
-      },
189
-      'NativeBase.Icon': {
190
-        alignSelf: null,
191
-        fontSize: variables.iconFontSize - 8,
192
-        color: '#c9c8cd'
193
-      },
194
-      'NativeBase.IconNB': {
195
-        alignSelf: null,
196
-        fontSize: variables.iconFontSize - 8,
197
-        color: '#c9c8cd'
198
-      },
199
-      'NativeBase.Text': {
200
-        '.note': {
201
-          color: variables.listNoteColor,
202
-          fontWeight: '200'
203
-        },
204
-        alignSelf: null
205
-      },
206
-      'NativeBase.Thumbnail': {
207
-        alignSelf: null
208
-      },
209
-      'NativeBase.Image': {
210
-        alignSelf: null
211
-      },
212
-      'NativeBase.Radio': {
213
-        alignSelf: null
214
-      },
215
-      'NativeBase.Checkbox': {
216
-        alignSelf: null
217
-      },
218
-      'NativeBase.Switch': {
219
-        alignSelf: null
220
-      },
221
-      padding: null,
222
-      flex: 0.28
223
-    },
224
-    'NativeBase.Text': {
225
-      '.note': {
226
-        color: variables.listNoteColor,
227
-        fontWeight: '200'
228
-      },
229
-      alignSelf: 'center'
230
-    },
231
-    '.last': {
232
-      marginLeft: -(variables.listItemPadding + 5),
233
-      paddingLeft: (variables.listItemPadding + 5) * 2,
234
-      top: 1
235
-    },
236
-    '.avatar': {
237
-      'NativeBase.Left': {
238
-        flex: 0,
239
-        alignSelf: 'flex-start',
240
-        paddingTop: 14
241
-      },
242
-      'NativeBase.Body': {
243
-        'NativeBase.Text': {
244
-          marginLeft: null
245
-        },
246
-        flex: 1,
247
-        paddingVertical: variables.listItemPadding,
248
-        borderBottomWidth: variables.borderWidth,
249
-        borderColor: variables.listBorderColor,
250
-        marginLeft: variables.listItemPadding + 5
251
-      },
252
-      'NativeBase.Right': {
253
-        'NativeBase.Text': {
254
-          '.note': {
255
-            fontSize: variables.noteFontSize - 2
256
-          }
257
-        },
258
-        flex: 0,
259
-        paddingRight: variables.listItemPadding + 5,
260
-        alignSelf: 'stretch',
261
-        paddingVertical: variables.listItemPadding,
262
-        borderBottomWidth: variables.borderWidth,
263
-        borderColor: variables.listBorderColor
264
-      },
265
-      '.noBorder': {
266
-        'NativeBase.Body': {
267
-          borderBottomWidth: null
268
-        },
269
-        'NativeBase.Right': {
270
-          borderBottomWidth: null
271
-        }
272
-      },
273
-      borderBottomWidth: null,
274
-      paddingVertical: null,
275
-      paddingRight: null
276
-    },
277
-    '.thumbnail': {
278
-      'NativeBase.Left': {
279
-        flex: 0
280
-      },
281
-      'NativeBase.Body': {
282
-        'NativeBase.Text': {
283
-          marginLeft: null
284
-        },
285
-        flex: 1,
286
-        paddingVertical: variables.listItemPadding + 8,
287
-        borderBottomWidth: variables.borderWidth,
288
-        borderColor: variables.listBorderColor,
289
-        marginLeft: variables.listItemPadding + 5
290
-      },
291
-      'NativeBase.Right': {
292
-        'NativeBase.Button': {
293
-          '.transparent': {
294
-            'NativeBase.Text': {
295
-              fontSize: variables.listNoteSize,
296
-              color: variables.sTabBarActiveTextColor
297
-            }
298
-          },
299
-          height: null
300
-        },
301
-        flex: 0,
302
-        justifyContent: 'center',
303
-        alignSelf: 'stretch',
304
-        paddingRight: variables.listItemPadding + 5,
305
-        paddingVertical: variables.listItemPadding + 5,
306
-        borderBottomWidth: variables.borderWidth,
307
-        borderColor: variables.listBorderColor
308
-      },
309
-      '.noBorder': {
310
-        'NativeBase.Body': {
311
-          borderBottomWidth: null
312
-        },
313
-        'NativeBase.Right': {
314
-          borderBottomWidth: null
315
-        }
316
-      },
317
-      borderBottomWidth: null,
318
-      paddingVertical: null,
319
-      paddingRight: null
320
-    },
321
-    '.icon': {
322
-      '.last': {
323
-        'NativeBase.Body': {
324
-          borderBottomWidth: null
325
-        },
326
-        'NativeBase.Right': {
327
-          borderBottomWidth: null
328
-        },
329
-        borderBottomWidth: variables.borderWidth,
330
-        borderColor: variables.listBorderColor
331
-      },
332
-      'NativeBase.Left': {
333
-        'NativeBase.Button': {
334
-          'NativeBase.IconNB': {
335
-            marginHorizontal: null,
336
-            fontSize: variables.iconFontSize - 5
337
-          },
338
-          'NativeBase.Icon': {
339
-            marginHorizontal: null,
340
-            fontSize: variables.iconFontSize - 8
341
-          },
342
-          alignSelf: 'center',
343
-          height: 29,
344
-          width: 29,
345
-          borderRadius: 6,
346
-          paddingVertical: null,
347
-          paddingHorizontal: null,
348
-          alignItems: 'center',
349
-          justifyContent: 'center'
350
-        },
351
-        'NativeBase.Icon': {
352
-          width: variables.iconFontSize - 5,
353
-          fontSize: variables.iconFontSize - 2
354
-        },
355
-        'NativeBase.IconNB': {
356
-          width: variables.iconFontSize - 5,
357
-          fontSize: variables.iconFontSize - 2
358
-        },
359
-        paddingRight: variables.listItemPadding + 5,
360
-        flex: 0,
361
-        height: 44,
362
-        justifyContent: 'center',
363
-        alignItems: 'center'
364
-      },
365
-      'NativeBase.Body': {
366
-        'NativeBase.Text': {
367
-          marginLeft: null,
368
-          fontSize: 17
369
-        },
370
-        flex: 1,
371
-        height: 44,
372
-        justifyContent: 'center',
373
-        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
374
-        borderColor: variables.listBorderColor
375
-      },
376
-      'NativeBase.Right': {
377
-        'NativeBase.Text': {
378
-          textAlign: 'center',
379
-          color: '#8F8E95',
380
-          fontSize: 17
381
-        },
382
-        'NativeBase.IconNB': {
383
-          color: '#C8C7CC',
384
-          fontSize: variables.iconFontSize - 10,
385
-          alignSelf: 'center',
386
-          paddingLeft: 10,
387
-          paddingTop: 3
388
-        },
389
-        'NativeBase.Icon': {
390
-          color: '#C8C7CC',
391
-          fontSize: variables.iconFontSize - 10,
392
-          alignSelf: 'center',
393
-          paddingLeft: 10,
394
-          paddingTop: 3
395
-        },
396
-        'NativeBase.Switch': {
397
-          marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
398
-          alignSelf: null
399
-        },
400
-        'NativeBase.PickerNB': {
401
-          ...pickerTheme()
402
-        },
403
-        flexDirection: 'row',
404
-        alignItems: 'center',
405
-        flex: 0,
406
-        alignSelf: 'stretch',
407
-        height: 44,
408
-        justifyContent: 'flex-end',
409
-        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
410
-        borderColor: variables.listBorderColor,
411
-        paddingRight: variables.listItemPadding + 5
412
-      },
413
-      '.noBorder': {
414
-        'NativeBase.Body': {
415
-          borderBottomWidth: null
416
-        },
417
-        'NativeBase.Right': {
418
-          borderBottomWidth: null
419
-        }
420
-      },
421
-      borderBottomWidth: null,
422
-      paddingVertical: null,
423
-      paddingRight: null,
424
-      height: 44,
425
-      justifyContent: 'center'
426
-    },
427
-    '.noBorder': {
428
-      borderBottomWidth: null
429
-    },
430
-    '.noIndent': {
431
-      marginLeft: null,
432
-      padding: variables.listItemPadding,
433
-      paddingLeft: variables.listItemPadding + 6
434
-    },
435
-    alignItems: 'center',
436
-    flexDirection: 'row',
437
-    paddingRight: variables.listItemPadding + 6,
438
-    paddingVertical: variables.listItemPadding + 3,
439
-    marginLeft: variables.listItemPadding + 6,
440
-    borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
441
-    backgroundColor: variables.listBg,
442
-    borderColor: variables.listBorderColor
443
-  };
444
-
445
-  return listItemTheme;
446
-};

+ 0
- 14
native-base-theme/components/Picker.android.js View File

@@ -1,14 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const pickerTheme = {
5
-    '.note': {
6
-      color: '#8F8E95'
7
-    },
8
-    // width: 90,
9
-    marginRight: -4,
10
-    flexGrow: 1
11
-  };
12
-
13
-  return pickerTheme;
14
-};

+ 0
- 7
native-base-theme/components/Picker.ios.js View File

@@ -1,7 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const pickerTheme = {};
5
-
6
-  return pickerTheme;
7
-};

+ 0
- 14
native-base-theme/components/Picker.js View File

@@ -1,14 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const pickerTheme = {
5
-    '.note': {
6
-      color: '#8F8E95'
7
-    },
8
-    // width: 90,
9
-    marginRight: -4,
10
-    flexGrow: 1
11
-  };
12
-
13
-  return pickerTheme;
14
-};

+ 0
- 31
native-base-theme/components/Radio.js View File

@@ -1,31 +0,0 @@
1
-// @flow
2
-
3
-import { Platform } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const radioTheme = {
10
-    '.selected': {
11
-      'NativeBase.IconNB': {
12
-        color:
13
-          Platform.OS === PLATFORM.IOS
14
-            ? variables.radioColor
15
-            : variables.radioSelectedColorAndroid,
16
-        lineHeight:
17
-          Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
18
-        height: Platform.OS === PLATFORM.IOS ? 20 : undefined
19
-      }
20
-    },
21
-    'NativeBase.IconNB': {
22
-      color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
23
-      lineHeight:
24
-        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
25
-      fontSize:
26
-        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
27
-    }
28
-  };
29
-
30
-  return radioTheme;
31
-};

+ 0
- 14
native-base-theme/components/Right.js View File

@@ -1,14 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const rightTheme = {
5
-    'NativeBase.Button': {
6
-      alignSelf: null
7
-    },
8
-    flex: 1,
9
-    alignSelf: 'center',
10
-    alignItems: 'flex-end'
11
-  };
12
-
13
-  return rightTheme;
14
-};

+ 0
- 57
native-base-theme/components/Segment.js View File

@@ -1,57 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-import { PLATFORM } from './../variables/commonColor';
5
-
6
-export default (variables /* : * */ = variable) => {
7
-  const platform = variables.platform;
8
-
9
-  const segmentTheme = {
10
-    height: 45,
11
-    borderColor: variables.segmentBorderColorMain,
12
-    flexDirection: 'row',
13
-    justifyContent: 'center',
14
-    backgroundColor: variables.segmentBackgroundColor,
15
-    'NativeBase.Button': {
16
-      alignSelf: 'center',
17
-      borderRadius: 0,
18
-      paddingTop: 3,
19
-      paddingBottom: 3,
20
-      height: 30,
21
-      backgroundColor: 'transparent',
22
-      borderWidth: 1,
23
-      borderLeftWidth: 0,
24
-      borderColor: variables.segmentBorderColor,
25
-      elevation: 0,
26
-      '.active': {
27
-        backgroundColor: variables.segmentActiveBackgroundColor,
28
-        'NativeBase.Text': {
29
-          color: variables.segmentActiveTextColor
30
-        },
31
-        'NativeBase.Icon': {
32
-          color: variables.segmentActiveTextColor
33
-        }
34
-      },
35
-      '.first': {
36
-        borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
37
-        borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
38
-        borderLeftWidth: 1
39
-      },
40
-      '.last': {
41
-        borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
42
-        borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
43
-      },
44
-      'NativeBase.Text': {
45
-        color: variables.segmentTextColor,
46
-        fontSize: 14
47
-      },
48
-      'NativeBase.Icon': {
49
-        fontSize: 22,
50
-        paddingTop: 0,
51
-        color: variables.segmentTextColor
52
-      }
53
-    }
54
-  };
55
-
56
-  return segmentTheme;
57
-};

+ 0
- 49
native-base-theme/components/Separator.js View File

@@ -1,49 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const theme = {
7
-    '.group': {
8
-      height: 50,
9
-      paddingVertical: variables.listItemPadding - 8,
10
-      paddingTop: variables.listItemPadding + 12,
11
-      '.bordered': {
12
-        height: 50,
13
-        paddingVertical: variables.listItemPadding - 8,
14
-        paddingTop: variables.listItemPadding + 12
15
-      }
16
-    },
17
-    '.bordered': {
18
-      '.noTopBorder': {
19
-        borderTopWidth: 0
20
-      },
21
-      '.noBottomBorder': {
22
-        borderBottomWidth: 0
23
-      },
24
-      height: 35,
25
-      paddingTop: variables.listItemPadding + 2,
26
-      paddingBottom: variables.listItemPadding,
27
-      borderBottomWidth: variables.borderWidth,
28
-      borderTopWidth: variables.borderWidth,
29
-      borderColor: variables.listBorderColor
30
-    },
31
-    'NativeBase.Text': {
32
-      fontSize: variables.tabBarTextSize - 2,
33
-      color: '#777'
34
-    },
35
-    '.noTopBorder': {
36
-      borderTopWidth: 0
37
-    },
38
-    '.noBottomBorder': {
39
-      borderBottomWidth: 0
40
-    },
41
-    height: 38,
42
-    backgroundColor: '#F0EFF5',
43
-    flex: 1,
44
-    justifyContent: 'center',
45
-    paddingLeft: variables.listItemPadding + 5
46
-  };
47
-
48
-  return theme;
49
-};

+ 0
- 9
native-base-theme/components/Spinner.js View File

@@ -1,9 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const spinnerTheme = {
5
-    height: 80
6
-  };
7
-
8
-  return spinnerTheme;
9
-};

+ 0
- 19
native-base-theme/components/Subtitle.js View File

@@ -1,19 +0,0 @@
1
-// @flow
2
-
3
-import { Platform } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const subtitleTheme = {
10
-    fontSize: variables.subTitleFontSize,
11
-    fontFamily: variables.titleFontfamily,
12
-    color: variables.subtitleColor,
13
-    textAlign: 'center',
14
-    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
15
-    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
16
-  };
17
-
18
-  return subtitleTheme;
19
-};

+ 0
- 46
native-base-theme/components/SwipeRow.js View File

@@ -1,46 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const swipeRowTheme = {
5
-    'NativeBase.ListItem': {
6
-      '.list': {
7
-        backgroundColor: '#FFF'
8
-      },
9
-      marginLeft: 0
10
-    },
11
-    'NativeBase.Left': {
12
-      flex: 0,
13
-      alignSelf: null,
14
-      alignItems: null,
15
-      'NativeBase.Button': {
16
-        flex: 1,
17
-        alignItems: 'center',
18
-        justifyContent: 'center',
19
-        alignSelf: 'stretch',
20
-        borderRadius: 0
21
-      }
22
-    },
23
-    'NativeBase.Right': {
24
-      flex: 0,
25
-      alignSelf: null,
26
-      alignItems: null,
27
-      'NativeBase.Button': {
28
-        flex: 1,
29
-        alignItems: 'center',
30
-        justifyContent: 'center',
31
-        alignSelf: 'stretch',
32
-        borderRadius: 0
33
-      }
34
-    },
35
-    'NativeBase.Button': {
36
-      flex: 1,
37
-      height: null,
38
-      alignItems: 'center',
39
-      justifyContent: 'center',
40
-      alignSelf: 'stretch',
41
-      borderRadius: 0
42
-    }
43
-  };
44
-
45
-  return swipeRowTheme;
46
-};

+ 0
- 9
native-base-theme/components/Switch.js View File

@@ -1,9 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const switchTheme = {
5
-    marginVertical: -5
6
-  };
7
-
8
-  return switchTheme;
9
-};

+ 0
- 10
native-base-theme/components/Tab.js View File

@@ -1,10 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const tabTheme = {
5
-    flex: 1,
6
-    backgroundColor: '#FFF'
7
-  };
8
-
9
-  return tabTheme;
10
-};

+ 0
- 57
native-base-theme/components/TabBar.js View File

@@ -1,57 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const tabBarTheme = {
7
-    '.tabIcon': {
8
-      height: undefined
9
-    },
10
-    '.vertical': {
11
-      height: 60
12
-    },
13
-    'NativeBase.Button': {
14
-      '.transparent': {
15
-        'NativeBase.Text': {
16
-          fontSize: variables.tabFontSize,
17
-          color: variables.sTabBarActiveTextColor,
18
-          fontWeight: '400'
19
-        },
20
-        'NativeBase.IconNB': {
21
-          color: variables.sTabBarActiveTextColor
22
-        }
23
-      },
24
-      'NativeBase.IconNB': {
25
-        color: variables.sTabBarActiveTextColor
26
-      },
27
-      'NativeBase.Text': {
28
-        fontSize: variables.tabFontSize,
29
-        color: variables.sTabBarActiveTextColor,
30
-        fontWeight: '400'
31
-      },
32
-      '.isTabActive': {
33
-        'NativeBase.Text': {
34
-          fontWeight: '900'
35
-        }
36
-      },
37
-      flex: 1,
38
-      alignSelf: 'stretch',
39
-      alignItems: 'center',
40
-      justifyContent: 'center',
41
-      borderRadius: null,
42
-      borderBottomColor: 'transparent',
43
-      backgroundColor: variables.tabBgColor
44
-    },
45
-    height: 45,
46
-    flexDirection: 'row',
47
-    justifyContent: 'space-around',
48
-    borderWidth: 1,
49
-    borderTopWidth: 0,
50
-    borderLeftWidth: 0,
51
-    borderRightWidth: 0,
52
-    borderBottomColor: '#ccc',
53
-    backgroundColor: variables.tabBgColor
54
-  };
55
-
56
-  return tabBarTheme;
57
-};

+ 0
- 26
native-base-theme/components/TabContainer.js View File

@@ -1,26 +0,0 @@
1
-// @flow
2
-
3
-import { Platform } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const platformStyle = variables.platformStyle;
10
-
11
-  const tabContainerTheme = {
12
-    elevation: 3,
13
-    height: 50,
14
-    flexDirection: 'row',
15
-    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
16
-    shadowOffset:
17
-      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
18
-    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
19
-    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
20
-    justifyContent: 'space-around',
21
-    borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
22
-    borderColor: variables.topTabBarBorderColor
23
-  };
24
-
25
-  return tabContainerTheme;
26
-};

+ 0
- 40
native-base-theme/components/TabHeading.js View File

@@ -1,40 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-import { PLATFORM } from './../variables/commonColor';
5
-
6
-export default (variables /* : * */ = variable) => {
7
-  const platform = variables.platform;
8
-
9
-  const tabHeadingTheme = {
10
-    flexDirection: 'row',
11
-    backgroundColor: variables.tabDefaultBg,
12
-    flex: 1,
13
-    alignItems: 'center',
14
-    justifyContent: 'center',
15
-    '.scrollable': {
16
-      paddingHorizontal: 20,
17
-      flex: platform === PLATFORM.ANDROID ? 0 : 1,
18
-      minWidth: platform === PLATFORM.ANDROID ? undefined : 60
19
-    },
20
-    'NativeBase.Text': {
21
-      color: variables.topTabBarTextColor,
22
-      marginHorizontal: 7
23
-    },
24
-    'NativeBase.Icon': {
25
-      color: variables.topTabBarTextColor,
26
-      fontSize: platform === PLATFORM.IOS ? 26 : undefined
27
-    },
28
-    '.active': {
29
-      'NativeBase.Text': {
30
-        color: variables.topTabBarActiveTextColor,
31
-        fontWeight: '600'
32
-      },
33
-      'NativeBase.Icon': {
34
-        color: variables.topTabBarActiveTextColor
35
-      }
36
-    }
37
-  };
38
-
39
-  return tabHeadingTheme;
40
-};

+ 0
- 17
native-base-theme/components/Text.js View File

@@ -1,17 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const textTheme = {
7
-    fontSize: variables.DefaultFontSize,
8
-    fontFamily: variables.fontFamily,
9
-    color: variables.textColor,
10
-    '.note': {
11
-      color: '#a7a7a7',
12
-      fontSize: variables.noteFontSize
13
-    }
14
-  };
15
-
16
-  return textTheme;
17
-};

+ 0
- 25
native-base-theme/components/Textarea.js View File

@@ -1,25 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const textAreaTheme = {
7
-    '.underline': {
8
-      borderBottomWidth: variables.borderWidth,
9
-      marginTop: 5,
10
-      borderColor: variables.inputBorderColor
11
-    },
12
-    '.bordered': {
13
-      borderWidth: 1,
14
-      marginTop: 5,
15
-      borderColor: variables.inputBorderColor
16
-    },
17
-    color: variables.textColor,
18
-    paddingLeft: 10,
19
-    paddingRight: 5,
20
-    fontSize: 15,
21
-    textAlignVertical: 'top'
22
-  };
23
-
24
-  return textAreaTheme;
25
-};

+ 0
- 40
native-base-theme/components/Thumbnail.js View File

@@ -1,40 +0,0 @@
1
-// @flow
2
-
3
-export default () => {
4
-  const thumbnailTheme = {
5
-    '.square': {
6
-      borderRadius: 0,
7
-      '.small': {
8
-        width: 36,
9
-        height: 36,
10
-        borderRadius: 0
11
-      },
12
-      '.large': {
13
-        width: 80,
14
-        height: 80,
15
-        borderRadius: 0
16
-      }
17
-    },
18
-    '.small': {
19
-      width: 36,
20
-      height: 36,
21
-      borderRadius: 18,
22
-      '.square': {
23
-        borderRadius: 0
24
-      }
25
-    },
26
-    '.large': {
27
-      width: 80,
28
-      height: 80,
29
-      borderRadius: 40,
30
-      '.square': {
31
-        borderRadius: 0
32
-      }
33
-    },
34
-    width: 56,
35
-    height: 56,
36
-    borderRadius: 28
37
-  };
38
-
39
-  return thumbnailTheme;
40
-};

+ 0
- 21
native-base-theme/components/Title.js View File

@@ -1,21 +0,0 @@
1
-// @flow
2
-
3
-import { Platform } from 'react-native';
4
-
5
-import variable from './../variables/platform';
6
-import { PLATFORM } from './../variables/commonColor';
7
-
8
-export default (variables /* : * */ = variable) => {
9
-  const titleTheme = {
10
-    fontSize: variables.titleFontSize,
11
-    fontFamily: variables.titleFontfamily,
12
-    color: variables.titleFontColor,
13
-    fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
14
-    textAlign: 'center',
15
-    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
16
-    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
17
-    paddingTop: 1
18
-  };
19
-
20
-  return titleTheme;
21
-};

+ 0
- 41
native-base-theme/components/Toast.js View File

@@ -1,41 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-import { PLATFORM } from './../variables/commonColor';
5
-
6
-export default (variables /* : * */ = variable) => {
7
-  const platform = variables.platform;
8
-
9
-  const toastTheme = {
10
-    '.danger': {
11
-      backgroundColor: variables.brandDanger
12
-    },
13
-    '.warning': {
14
-      backgroundColor: variables.brandWarning
15
-    },
16
-    '.success': {
17
-      backgroundColor: variables.brandSuccess
18
-    },
19
-    backgroundColor: 'rgba(0,0,0,0.8)',
20
-    borderRadius: platform === PLATFORM.IOS ? 5 : 0,
21
-    flexDirection: 'row',
22
-    justifyContent: 'space-between',
23
-    alignItems: 'center',
24
-    padding: 10,
25
-    minHeight: 50,
26
-    'NativeBase.Text': {
27
-      color: '#fff',
28
-      flex: 1
29
-    },
30
-    'NativeBase.Button': {
31
-      backgroundColor: 'transparent',
32
-      height: 30,
33
-      elevation: 0,
34
-      'NativeBase.Text': {
35
-        fontSize: 14
36
-      }
37
-    }
38
-  };
39
-
40
-  return toastTheme;
41
-};

+ 0
- 13
native-base-theme/components/View.js View File

@@ -1,13 +0,0 @@
1
-// @flow
2
-
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /* : * */ = variable) => {
6
-  const viewTheme = {
7
-    '.padder': {
8
-      padding: variables.contentPadding
9
-    }
10
-  };
11
-
12
-  return viewTheme;
13
-};

+ 0
- 249
native-base-theme/components/index.js View File

@@ -1,249 +0,0 @@
1
-/* eslint-disable no-param-reassign */
2
-// @flow
3
-
4
-import _ from 'lodash';
5
-
6
-import bodyTheme from './Body';
7
-import leftTheme from './Left';
8
-import rightTheme from './Right';
9
-import headerTheme from './Header';
10
-import switchTheme from './Switch';
11
-import thumbnailTheme from './Thumbnail';
12
-import containerTheme from './Container';
13
-import contentTheme from './Content';
14
-import buttonTheme from './Button';
15
-import titleTheme from './Title';
16
-import subtitleTheme from './Subtitle';
17
-import inputGroupTheme from './InputGroup';
18
-import badgeTheme from './Badge';
19
-import checkBoxTheme from './CheckBox';
20
-import cardTheme from './Card';
21
-import radioTheme from './Radio';
22
-import h3Theme from './H3';
23
-import h2Theme from './H2';
24
-import h1Theme from './H1';
25
-import footerTheme from './Footer';
26
-import footerTabTheme from './FooterTab';
27
-import fabTheme from './Fab';
28
-import itemTheme from './Item';
29
-import labelTheme from './Label';
30
-import textAreaTheme from './Textarea';
31
-import textTheme from './Text';
32
-import toastTheme from './Toast';
33
-import tabTheme from './Tab';
34
-import tabBarTheme from './TabBar';
35
-import tabContainerTheme from './TabContainer';
36
-import viewTheme from './View';
37
-import tabHeadingTheme from './TabHeading';
38
-import iconTheme from './Icon';
39
-import inputTheme from './Input';
40
-import swipeRowTheme from './SwipeRow';
41
-import segmentTheme from './Segment';
42
-import spinnerTheme from './Spinner';
43
-import cardItemTheme from './CardItem';
44
-import listItemTheme from './ListItem';
45
-import formTheme from './Form';
46
-import separatorTheme from './Separator';
47
-import pickerTheme from './Picker';
48
-import variable from './../variables/platform';
49
-
50
-export default (variables /* : * */ = variable) => {
51
-  const theme = {
52
-    variables,
53
-    'NativeBase.Left': {
54
-      ...leftTheme(variables)
55
-    },
56
-    'NativeBase.Right': {
57
-      ...rightTheme(variables)
58
-    },
59
-    'NativeBase.Body': {
60
-      ...bodyTheme(variables)
61
-    },
62
-
63
-    'NativeBase.Header': {
64
-      ...headerTheme(variables)
65
-    },
66
-
67
-    'NativeBase.Button': {
68
-      ...buttonTheme(variables)
69
-    },
70
-
71
-    'NativeBase.Title': {
72
-      ...titleTheme(variables)
73
-    },
74
-    'NativeBase.Subtitle': {
75
-      ...subtitleTheme(variables)
76
-    },
77
-
78
-    'NativeBase.InputGroup': {
79
-      ...inputGroupTheme(variables)
80
-    },
81
-
82
-    'NativeBase.Input': {
83
-      ...inputTheme(variables)
84
-    },
85
-
86
-    'NativeBase.Badge': {
87
-      ...badgeTheme(variables)
88
-    },
89
-
90
-    'NativeBase.CheckBox': {
91
-      ...checkBoxTheme(variables)
92
-    },
93
-
94
-    'NativeBase.Radio': {
95
-      ...radioTheme(variables)
96
-    },
97
-
98
-    'NativeBase.Card': {
99
-      ...cardTheme(variables)
100
-    },
101
-
102
-    'NativeBase.CardItem': {
103
-      ...cardItemTheme(variables)
104
-    },
105
-
106
-    'NativeBase.Toast': {
107
-      ...toastTheme(variables)
108
-    },
109
-
110
-    'NativeBase.H1': {
111
-      ...h1Theme(variables)
112
-    },
113
-    'NativeBase.H2': {
114
-      ...h2Theme(variables)
115
-    },
116
-    'NativeBase.H3': {
117
-      ...h3Theme(variables)
118
-    },
119
-    'NativeBase.Form': {
120
-      ...formTheme(variables)
121
-    },
122
-
123
-    'NativeBase.Container': {
124
-      ...containerTheme(variables)
125
-    },
126
-    'NativeBase.Content': {
127
-      ...contentTheme(variables)
128
-    },
129
-
130
-    'NativeBase.Footer': {
131
-      ...footerTheme(variables)
132
-    },
133
-
134
-    'NativeBase.Tabs': {
135
-      flex: 1
136
-    },
137
-
138
-    'NativeBase.FooterTab': {
139
-      ...footerTabTheme(variables)
140
-    },
141
-
142
-    'NativeBase.ListItem': {
143
-      ...listItemTheme(variables)
144
-    },
145
-
146
-    'NativeBase.ListItem1': {
147
-      ...listItemTheme(variables)
148
-    },
149
-
150
-    'NativeBase.Icon': {
151
-      ...iconTheme(variables)
152
-    },
153
-    'NativeBase.IconNB': {
154
-      ...iconTheme(variables)
155
-    },
156
-    'NativeBase.Text': {
157
-      ...textTheme(variables)
158
-    },
159
-    'NativeBase.Spinner': {
160
-      ...spinnerTheme(variables)
161
-    },
162
-
163
-    'NativeBase.Fab': {
164
-      ...fabTheme(variables)
165
-    },
166
-
167
-    'NativeBase.Item': {
168
-      ...itemTheme(variables)
169
-    },
170
-
171
-    'NativeBase.Label': {
172
-      ...labelTheme(variables)
173
-    },
174
-
175
-    'NativeBase.Textarea': {
176
-      ...textAreaTheme(variables)
177
-    },
178
-
179
-    'NativeBase.PickerNB': {
180
-      ...pickerTheme(variables),
181
-      'NativeBase.Button': {
182
-        'NativeBase.Text': {}
183
-      }
184
-    },
185
-
186
-    'NativeBase.Tab': {
187
-      ...tabTheme(variables)
188
-    },
189
-
190
-    'NativeBase.Segment': {
191
-      ...segmentTheme(variables)
192
-    },
193
-
194
-    'NativeBase.TabBar': {
195
-      ...tabBarTheme(variables)
196
-    },
197
-    'NativeBase.ViewNB': {
198
-      ...viewTheme(variables)
199
-    },
200
-    'NativeBase.TabHeading': {
201
-      ...tabHeadingTheme(variables)
202
-    },
203
-    'NativeBase.TabContainer': {
204
-      ...tabContainerTheme(variables)
205
-    },
206
-    'NativeBase.Switch': {
207
-      ...switchTheme(variables)
208
-    },
209
-    'NativeBase.Separator': {
210
-      ...separatorTheme(variables)
211
-    },
212
-    'NativeBase.SwipeRow': {
213
-      ...swipeRowTheme(variables)
214
-    },
215
-    'NativeBase.Thumbnail': {
216
-      ...thumbnailTheme(variables)
217
-    }
218
-  };
219
-
220
-  const cssifyTheme = (grandparent, parent, parentKey) => {
221
-    _.forEach(parent, (style, styleName) => {
222
-      if (
223
-        styleName.indexOf('.') === 0 &&
224
-        parentKey &&
225
-        parentKey.indexOf('.') === 0
226
-      ) {
227
-        if (grandparent) {
228
-          if (!grandparent[styleName]) {
229
-            grandparent[styleName] = {};
230
-          } else {
231
-            grandparent[styleName][parentKey] = style;
232
-          }
233
-        }
234
-      }
235
-      if (
236
-        style &&
237
-        typeof style === 'object' &&
238
-        styleName !== 'fontVariant' &&
239
-        styleName !== 'transform'
240
-      ) {
241
-        cssifyTheme(parent, style, styleName);
242
-      }
243
-    });
244
-  };
245
-
246
-  cssifyTheme(null, theme, null);
247
-
248
-  return theme;
249
-};

+ 0
- 311
native-base-theme/variables/commonColor.js View File

@@ -1,311 +0,0 @@
1
-// @flow
2
-
3
-import color from 'color';
4
-import { Platform, Dimensions, PixelRatio } from 'react-native';
5
-
6
-export const PLATFORM = {
7
-  ANDROID: 'android',
8
-  IOS: 'ios',
9
-  MATERIAL: 'material',
10
-  WEB: 'web'
11
-};
12
-
13
-const deviceHeight = Dimensions.get('window').height;
14
-const deviceWidth = Dimensions.get('window').width;
15
-const platform = Platform.OS;
16
-const platformStyle = undefined;
17
-const isIphoneX =
18
-  platform === PLATFORM.IOS &&
19
-  (deviceHeight === 812 ||
20
-    deviceWidth === 812 ||
21
-    deviceHeight === 896 ||
22
-    deviceWidth === 896);
23
-
24
-export default {
25
-  platformStyle,
26
-  platform,
27
-
28
-  // Accordion
29
-  headerStyle: '#edebed',
30
-  iconStyle: '#000',
31
-  contentStyle: '#f5f4f5',
32
-  expandedIconStyle: '#000',
33
-  accordionBorderColor: '#d3d3d3',
34
-
35
-  // ActionSheet
36
-  elevation: 4,
37
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
38
-  innerTouchableBackgroundColor: '#fff',
39
-  listItemHeight: 50,
40
-  listItemBorderColor: 'transparent',
41
-  marginHorizontal: -15,
42
-  marginLeft: 14,
43
-  marginTop: 15,
44
-  minHeight: 56,
45
-  padding: 15,
46
-  touchableTextColor: '#757575',
47
-
48
-  // Android
49
-  androidRipple: true,
50
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
51
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
52
-  buttonUppercaseAndroidText: true,
53
-
54
-  // Badge
55
-  badgeBg: '#ED1727',
56
-  badgeColor: '#fff',
57
-  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
58
-
59
-  // Button
60
-  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
61
-  buttonDisabledBg: '#b5b5b5',
62
-  buttonPadding: 6,
63
-  get buttonPrimaryBg() {
64
-    return this.brandPrimary;
65
-  },
66
-  get buttonPrimaryColor() {
67
-    return this.inverseTextColor;
68
-  },
69
-  get buttonInfoBg() {
70
-    return this.brandInfo;
71
-  },
72
-  get buttonInfoColor() {
73
-    return this.inverseTextColor;
74
-  },
75
-  get buttonSuccessBg() {
76
-    return this.brandSuccess;
77
-  },
78
-  get buttonSuccessColor() {
79
-    return this.inverseTextColor;
80
-  },
81
-  get buttonDangerBg() {
82
-    return this.brandDanger;
83
-  },
84
-  get buttonDangerColor() {
85
-    return this.inverseTextColor;
86
-  },
87
-  get buttonWarningBg() {
88
-    return this.brandWarning;
89
-  },
90
-  get buttonWarningColor() {
91
-    return this.inverseTextColor;
92
-  },
93
-  get buttonTextSize() {
94
-    return platform === PLATFORM.IOS
95
-      ? this.fontSizeBase * 1.1
96
-      : this.fontSizeBase - 1;
97
-  },
98
-  get buttonTextSizeLarge() {
99
-    return this.fontSizeBase * 1.5;
100
-  },
101
-  get buttonTextSizeSmall() {
102
-    return this.fontSizeBase * 0.8;
103
-  },
104
-  get borderRadiusLarge() {
105
-    return this.fontSizeBase * 3.8;
106
-  },
107
-  get iconSizeLarge() {
108
-    return this.iconFontSize * 1.5;
109
-  },
110
-  get iconSizeSmall() {
111
-    return this.iconFontSize * 0.6;
112
-  },
113
-
114
-  // Card
115
-  cardDefaultBg: '#fff',
116
-  cardBorderColor: '#ccc',
117
-  cardBorderRadius: 2,
118
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
119
-
120
-  // CheckBox
121
-  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
122
-  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
123
-  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
124
-  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
125
-  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
126
-  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
127
-  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
128
-  checkboxBgColor: '#039BE5',
129
-  checkboxSize: 20,
130
-  checkboxTickColor: '#fff',
131
-
132
-  // Color
133
-  brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
134
-  brandInfo: '#62B1F6',
135
-  brandSuccess: '#5cb85c',
136
-  brandDanger: '#d9534f',
137
-  brandWarning: '#f0ad4e',
138
-  brandDark: '#000',
139
-  brandLight: '#f4f4f4',
140
-
141
-  // Container
142
-  containerBgColor: '#fff',
143
-
144
-  // Date Picker
145
-  datePickerTextColor: '#000',
146
-  datePickerBg: 'transparent',
147
-
148
-  // FAB
149
-  fabWidth: 56,
150
-
151
-  // Font
152
-  DefaultFontSize: 16,
153
-  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
154
-  fontSizeBase: 15,
155
-  get fontSizeH1() {
156
-    return this.fontSizeBase * 1.8;
157
-  },
158
-  get fontSizeH2() {
159
-    return this.fontSizeBase * 1.6;
160
-  },
161
-  get fontSizeH3() {
162
-    return this.fontSizeBase * 1.4;
163
-  },
164
-
165
-  // Footer
166
-  footerHeight: 55,
167
-  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
168
-  footerPaddingBottom: 0,
169
-
170
-  // FooterTab
171
-  tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
172
-  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
173
-  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
174
-  sTabBarActiveTextColor: '#007aff',
175
-  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
176
-  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
177
-
178
-  // Header
179
-  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
180
-  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
181
-  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
182
-  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
183
-  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
184
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
185
-  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
186
-  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
187
-  iosStatusbar: 'dark-content',
188
-  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
189
-  get statusBarColor() {
190
-    return color(this.toolbarDefaultBg)
191
-      .darken(0.2)
192
-      .hex();
193
-  },
194
-  get darkenHeader() {
195
-    return color(this.tabBgColor)
196
-      .darken(0.03)
197
-      .hex();
198
-  },
199
-
200
-  // Icon
201
-  iconFamily: 'Ionicons',
202
-  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
203
-  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
204
-
205
-  // InputGroup
206
-  inputFontSize: 17,
207
-  inputBorderColor: '#D9D5DC',
208
-  inputSuccessBorderColor: '#2b8339',
209
-  inputErrorBorderColor: '#ed2f2f',
210
-  inputHeightBase: 50,
211
-  get inputColor() {
212
-    return this.textColor;
213
-  },
214
-  get inputColorPlaceholder() {
215
-    return '#575757';
216
-  },
217
-
218
-  // Line Height
219
-  buttonLineHeight: 19,
220
-  lineHeightH1: 32,
221
-  lineHeightH2: 27,
222
-  lineHeightH3: 22,
223
-  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
224
-
225
-  // List
226
-  listBg: 'transparent',
227
-  listBorderColor: '#c9c9c9',
228
-  listDividerBg: '#f4f4f4',
229
-  listBtnUnderlayColor: '#DDD',
230
-  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
231
-  listNoteColor: '#808080',
232
-  listNoteSize: 13,
233
-  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
234
-
235
-  // Progress Bar
236
-  defaultProgressColor: '#E4202D',
237
-  inverseProgressColor: '#1A191B',
238
-
239
-  // Radio Button
240
-  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
241
-  radioSelectedColorAndroid: '#3F51B5',
242
-  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
243
-  get radioColor() {
244
-    return this.brandPrimary;
245
-  },
246
-
247
-  // Segment
248
-  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
249
-  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
250
-  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
251
-  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
252
-  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
253
-  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
254
-
255
-  // Spinner
256
-  defaultSpinnerColor: '#45D56E',
257
-  inverseSpinnerColor: '#1A191B',
258
-
259
-  // Tab
260
-  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
261
-  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
262
-  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
263
-  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
264
-  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
265
-
266
-  // Tabs
267
-  tabBgColor: '#F8F8F8',
268
-  tabFontSize: 15,
269
-
270
-  // Text
271
-  textColor: '#000',
272
-  inverseTextColor: '#fff',
273
-  noteFontSize: 14,
274
-  get defaultTextColor() {
275
-    return this.textColor;
276
-  },
277
-
278
-  // Title
279
-  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
280
-  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
281
-  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
282
-  subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
283
-  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
284
-
285
-  // Other
286
-  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
287
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
288
-  contentPadding: 10,
289
-  dropdownLinkColor: '#414142',
290
-  inputLineHeight: 24,
291
-  deviceWidth,
292
-  deviceHeight,
293
-  isIphoneX,
294
-  inputGroupRoundedBorderRadius: 30,
295
-
296
-  // iPhoneX SafeArea
297
-  Inset: {
298
-    portrait: {
299
-      topInset: 24,
300
-      leftInset: 0,
301
-      rightInset: 0,
302
-      bottomInset: 34
303
-    },
304
-    landscape: {
305
-      topInset: 0,
306
-      leftInset: 44,
307
-      rightInset: 44,
308
-      bottomInset: 21
309
-    }
310
-  }
311
-};

+ 0
- 304
native-base-theme/variables/material.js View File

@@ -1,304 +0,0 @@
1
-// @flow
2
-
3
-import color from 'color';
4
-import { Platform, Dimensions, PixelRatio } from 'react-native';
5
-
6
-import { PLATFORM } from './commonColor';
7
-
8
-const deviceHeight = Dimensions.get('window').height;
9
-const deviceWidth = Dimensions.get('window').width;
10
-const platform = Platform.OS;
11
-const platformStyle = PLATFORM.MATERIAL;
12
-const isIphoneX =
13
-  platform === PLATFORM.IOS &&
14
-  (deviceHeight === 812 ||
15
-    deviceWidth === 812 ||
16
-    deviceHeight === 896 ||
17
-    deviceWidth === 896);
18
-
19
-export default {
20
-  platformStyle,
21
-  platform,
22
-
23
-  // Accordion
24
-  headerStyle: '#edebed',
25
-  iconStyle: '#000',
26
-  contentStyle: '#f5f4f5',
27
-  expandedIconStyle: '#000',
28
-  accordionBorderColor: '#d3d3d3',
29
-
30
-  // ActionSheet
31
-  elevation: 4,
32
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
33
-  innerTouchableBackgroundColor: '#fff',
34
-  listItemHeight: 50,
35
-  listItemBorderColor: 'transparent',
36
-  marginHorizontal: -15,
37
-  marginLeft: 14,
38
-  marginTop: 15,
39
-  minHeight: 56,
40
-  padding: 15,
41
-  touchableTextColor: '#757575',
42
-
43
-  // Android
44
-  androidRipple: true,
45
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
46
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
47
-  buttonUppercaseAndroidText: true,
48
-
49
-  // Badge
50
-  badgeBg: '#ED1727',
51
-  badgeColor: '#fff',
52
-  badgePadding: 0,
53
-
54
-  // Button
55
-  buttonFontFamily: 'Roboto',
56
-  buttonDisabledBg: '#b5b5b5',
57
-  buttonPadding: 6,
58
-  get buttonPrimaryBg() {
59
-    return this.brandPrimary;
60
-  },
61
-  get buttonPrimaryColor() {
62
-    return this.inverseTextColor;
63
-  },
64
-  get buttonInfoBg() {
65
-    return this.brandInfo;
66
-  },
67
-  get buttonInfoColor() {
68
-    return this.inverseTextColor;
69
-  },
70
-  get buttonSuccessBg() {
71
-    return this.brandSuccess;
72
-  },
73
-  get buttonSuccessColor() {
74
-    return this.inverseTextColor;
75
-  },
76
-  get buttonDangerBg() {
77
-    return this.brandDanger;
78
-  },
79
-  get buttonDangerColor() {
80
-    return this.inverseTextColor;
81
-  },
82
-  get buttonWarningBg() {
83
-    return this.brandWarning;
84
-  },
85
-  get buttonWarningColor() {
86
-    return this.inverseTextColor;
87
-  },
88
-  get buttonTextSize() {
89
-    return this.fontSizeBase - 1;
90
-  },
91
-  get buttonTextSizeLarge() {
92
-    return this.fontSizeBase * 1.5;
93
-  },
94
-  get buttonTextSizeSmall() {
95
-    return this.fontSizeBase * 0.8;
96
-  },
97
-  get borderRadiusLarge() {
98
-    return this.fontSizeBase * 3.8;
99
-  },
100
-  get iconSizeLarge() {
101
-    return this.iconFontSize * 1.5;
102
-  },
103
-  get iconSizeSmall() {
104
-    return this.iconFontSize * 0.6;
105
-  },
106
-
107
-  // Card
108
-  cardDefaultBg: '#fff',
109
-  cardBorderColor: '#ccc',
110
-  cardBorderRadius: 2,
111
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
112
-
113
-  // CheckBox
114
-  CheckboxRadius: 0,
115
-  CheckboxBorderWidth: 2,
116
-  CheckboxPaddingLeft: 2,
117
-  CheckboxPaddingBottom: 5,
118
-  CheckboxIconSize: 16,
119
-  CheckboxIconMarginTop: 1,
120
-  CheckboxFontSize: 17,
121
-  checkboxBgColor: '#039BE5',
122
-  checkboxSize: 20,
123
-  checkboxTickColor: '#fff',
124
-
125
-  // Color
126
-  brandPrimary: '#3F51B5',
127
-  brandInfo: '#62B1F6',
128
-  brandSuccess: '#5cb85c',
129
-  brandDanger: '#d9534f',
130
-  brandWarning: '#f0ad4e',
131
-  brandDark: '#000',
132
-  brandLight: '#f4f4f4',
133
-
134
-  // Container
135
-  containerBgColor: '#fff',
136
-
137
-  // Date Picker
138
-  datePickerTextColor: '#000',
139
-  datePickerBg: 'transparent',
140
-
141
-  // FAB
142
-  fabWidth: 56,
143
-
144
-  // Font
145
-  DefaultFontSize: 16,
146
-  fontFamily: 'Roboto',
147
-  fontSizeBase: 15,
148
-  get fontSizeH1() {
149
-    return this.fontSizeBase * 1.8;
150
-  },
151
-  get fontSizeH2() {
152
-    return this.fontSizeBase * 1.6;
153
-  },
154
-  get fontSizeH3() {
155
-    return this.fontSizeBase * 1.4;
156
-  },
157
-
158
-  // Footer
159
-  footerHeight: 55,
160
-  footerDefaultBg: '#3F51B5',
161
-  footerPaddingBottom: 0,
162
-
163
-  // FooterTab
164
-  tabBarTextColor: '#bfc6ea',
165
-  tabBarTextSize: 11,
166
-  activeTab: '#fff',
167
-  sTabBarActiveTextColor: '#007aff',
168
-  tabBarActiveTextColor: '#fff',
169
-  tabActiveBgColor: '#3F51B5',
170
-
171
-  // Header
172
-  toolbarBtnColor: '#fff',
173
-  toolbarDefaultBg: '#3F51B5',
174
-  toolbarHeight: 56,
175
-  toolbarSearchIconSize: 23,
176
-  toolbarInputColor: '#fff',
177
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
178
-  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
179
-  toolbarBtnTextColor: '#fff',
180
-  toolbarDefaultBorder: '#3F51B5',
181
-  iosStatusbar: 'light-content',
182
-  get statusBarColor() {
183
-    return color(this.toolbarDefaultBg)
184
-      .darken(0.2)
185
-      .hex();
186
-  },
187
-  get darkenHeader() {
188
-    return color(this.tabBgColor)
189
-      .darken(0.03)
190
-      .hex();
191
-  },
192
-
193
-  // Icon
194
-  iconFamily: 'Ionicons',
195
-  iconFontSize: 28,
196
-  iconHeaderSize: 24,
197
-
198
-  // InputGroup
199
-  inputFontSize: 17,
200
-  inputBorderColor: '#D9D5DC',
201
-  inputSuccessBorderColor: '#2b8339',
202
-  inputErrorBorderColor: '#ed2f2f',
203
-  inputHeightBase: 50,
204
-  get inputColor() {
205
-    return this.textColor;
206
-  },
207
-  get inputColorPlaceholder() {
208
-    return '#575757';
209
-  },
210
-
211
-  // Line Height
212
-  buttonLineHeight: 19,
213
-  lineHeightH1: 32,
214
-  lineHeightH2: 27,
215
-  lineHeightH3: 22,
216
-  lineHeight: 24,
217
-
218
-  // List
219
-  listBg: 'transparent',
220
-  listBorderColor: '#c9c9c9',
221
-  listDividerBg: '#f4f4f4',
222
-  listBtnUnderlayColor: '#DDD',
223
-  listItemPadding: 12,
224
-  listNoteColor: '#808080',
225
-  listNoteSize: 13,
226
-  listItemSelected: '#3F51B5',
227
-
228
-  // Progress Bar
229
-  defaultProgressColor: '#E4202D',
230
-  inverseProgressColor: '#1A191B',
231
-
232
-  // Radio Button
233
-  radioBtnSize: 23,
234
-  radioSelectedColorAndroid: '#3F51B5',
235
-  radioBtnLineHeight: 24,
236
-  get radioColor() {
237
-    return this.brandPrimary;
238
-  },
239
-
240
-  // Segment
241
-  segmentBackgroundColor: '#3F51B5',
242
-  segmentActiveBackgroundColor: '#fff',
243
-  segmentTextColor: '#fff',
244
-  segmentActiveTextColor: '#3F51B5',
245
-  segmentBorderColor: '#fff',
246
-  segmentBorderColorMain: '#3F51B5',
247
-
248
-  // Spinner
249
-  defaultSpinnerColor: '#45D56E',
250
-  inverseSpinnerColor: '#1A191B',
251
-
252
-  // Tab
253
-  tabDefaultBg: '#3F51B5',
254
-  topTabBarTextColor: '#b3c7f9',
255
-  topTabBarActiveTextColor: '#fff',
256
-  topTabBarBorderColor: '#fff',
257
-  topTabBarActiveBorderColor: '#fff',
258
-
259
-  // Tabs
260
-  tabBgColor: '#F8F8F8',
261
-  tabFontSize: 15,
262
-
263
-  // Text
264
-  textColor: '#000',
265
-  inverseTextColor: '#fff',
266
-  noteFontSize: 14,
267
-  get defaultTextColor() {
268
-    return this.textColor;
269
-  },
270
-
271
-  // Title
272
-  titleFontfamily: 'Roboto',
273
-  titleFontSize: 19,
274
-  subTitleFontSize: 14,
275
-  subtitleColor: '#FFF',
276
-  titleFontColor: '#FFF',
277
-
278
-  // Other
279
-  borderRadiusBase: 2,
280
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
281
-  contentPadding: 10,
282
-  dropdownLinkColor: '#414142',
283
-  inputLineHeight: 24,
284
-  deviceWidth,
285
-  deviceHeight,
286
-  isIphoneX,
287
-  inputGroupRoundedBorderRadius: 30,
288
-
289
-  // iPhoneX SafeArea
290
-  Inset: {
291
-    portrait: {
292
-      topInset: 24,
293
-      leftInset: 0,
294
-      rightInset: 0,
295
-      bottomInset: 34
296
-    },
297
-    landscape: {
298
-      topInset: 0,
299
-      leftInset: 44,
300
-      rightInset: 44,
301
-      bottomInset: 21
302
-    }
303
-  }
304
-};

+ 0
- 362
native-base-theme/variables/platform.js View File

@@ -1,362 +0,0 @@
1
-// @flow
2
-
3
-import color from 'color';
4
-import { Platform, Dimensions, PixelRatio } from 'react-native';
5
-
6
-import { PLATFORM } from './commonColor';
7
-
8
-const deviceHeight = Dimensions.get('window').height;
9
-const deviceWidth = Dimensions.get('window').width;
10
-const platform = Platform.OS;
11
-const platformStyle = undefined;
12
-const isIphoneX =
13
-  platform === PLATFORM.IOS &&
14
-  (deviceHeight === 812 ||
15
-    deviceWidth === 812 ||
16
-    deviceHeight === 896 ||
17
-    deviceWidth === 896);
18
-
19
-export default {
20
-  platformStyle,
21
-  platform,
22
-
23
-  // Accordion
24
-  accordionBorderColor: '#d3d3d3',
25
-  accordionContentPadding: 10,
26
-  accordionIconFontSize: 18,
27
-  contentStyle: '#f5f4f5',
28
-  expandedIconStyle: '#000',
29
-  headerStyle: '#edebed',
30
-  iconStyle: '#000',
31
-
32
-  // ActionSheet
33
-  elevation: 4,
34
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
35
-  innerTouchableBackgroundColor: '#fff',
36
-  listItemHeight: 50,
37
-  listItemBorderColor: 'transparent',
38
-  marginHorizontal: -15,
39
-  marginLeft: 14,
40
-  marginTop: 15,
41
-  minHeight: 56,
42
-  padding: 15,
43
-  touchableTextColor: '#757575',
44
-
45
-  // Android
46
-  androidRipple: true,
47
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
48
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
49
-  buttonUppercaseAndroidText: true,
50
-
51
-  // Badge
52
-  badgeBg: '#ED1727',
53
-  badgeColor: '#fff',
54
-  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
55
-
56
-  // Button
57
-  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
58
-  buttonTextColor: '#fff',
59
-  buttonDisabledBg: '#b5b5b5',
60
-  buttonPadding: 6,
61
-  buttonDefaultActiveOpacity: 0.5,
62
-  buttonDefaultFlex: 1,
63
-  buttonDefaultBorderRadius: 2,
64
-  buttonDefaultBorderWidth: 1,
65
-  get buttonPrimaryBg() {
66
-    return this.brandPrimary;
67
-  },
68
-  get buttonPrimaryColor() {
69
-    return this.inverseTextColor;
70
-  },
71
-  get buttonInfoBg() {
72
-    return this.brandInfo;
73
-  },
74
-  get buttonInfoColor() {
75
-    return this.inverseTextColor;
76
-  },
77
-  get buttonSuccessBg() {
78
-    return this.brandSuccess;
79
-  },
80
-  get buttonSuccessColor() {
81
-    return this.inverseTextColor;
82
-  },
83
-  get buttonDangerBg() {
84
-    return this.brandDanger;
85
-  },
86
-  get buttonDangerColor() {
87
-    return this.inverseTextColor;
88
-  },
89
-  get buttonWarningBg() {
90
-    return this.brandWarning;
91
-  },
92
-  get buttonWarningColor() {
93
-    return this.inverseTextColor;
94
-  },
95
-  get buttonTextSize() {
96
-    return platform === PLATFORM.IOS
97
-      ? this.fontSizeBase * 1.1
98
-      : this.fontSizeBase - 1;
99
-  },
100
-  get buttonTextSizeLarge() {
101
-    return this.fontSizeBase * 1.5;
102
-  },
103
-  get buttonTextSizeSmall() {
104
-    return this.fontSizeBase * 0.8;
105
-  },
106
-  get borderRadiusLarge() {
107
-    return this.fontSizeBase * 3.8;
108
-  },
109
-  get iconSizeLarge() {
110
-    return this.iconFontSize * 1.5;
111
-  },
112
-  get iconSizeSmall() {
113
-    return this.iconFontSize * 0.6;
114
-  },
115
-
116
-  // Card
117
-  cardDefaultBg: '#fff',
118
-  cardBorderColor: '#ccc',
119
-  cardBorderRadius: 2,
120
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
121
-
122
-  // CheckBox
123
-  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
124
-  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
125
-  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
126
-  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
127
-  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
128
-  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
129
-  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
130
-  checkboxBgColor: '#be1522',
131
-  checkboxSize: 20,
132
-  checkboxTickColor: '#fff',
133
-  checkboxDefaultColor: 'transparent',
134
-  checkboxTextShadowRadius: 0,
135
-
136
-  // Color
137
-  brandPrimary: '#be1522',
138
-  brandInfo: '#62B1F6',
139
-  brandSuccess: '#5cb85c',
140
-  brandDanger: '#d9534f',
141
-  brandWarning: '#f0ad4e',
142
-  brandDark: '#000',
143
-  brandLight: '#f4f4f4',
144
-
145
-  // Container
146
-  containerBgColor: '#fff',
147
-  sideMenuBgColor: "#f2f2f2",
148
-
149
-  // Date Picker
150
-  datePickerFlex: 1,
151
-  datePickerPadding: 10,
152
-  datePickerTextColor: '#000',
153
-  datePickerBg: 'transparent',
154
-
155
-  // FAB
156
-  fabBackgroundColor: 'blue',
157
-  fabBorderRadius: 28,
158
-  fabBottom: 0,
159
-  fabButtonBorderRadius: 20,
160
-  fabButtonHeight: 40,
161
-  fabButtonLeft: 7,
162
-  fabButtonMarginBottom: 10,
163
-  fabContainerBottom: 20,
164
-  fabDefaultPosition: 20,
165
-  fabElevation: 4,
166
-  fabIconColor: '#fff',
167
-  fabIconSize: 24,
168
-  fabShadowColor: '#000',
169
-  fabShadowOffsetHeight: 2,
170
-  fabShadowOffsetWidth: 0,
171
-  fabShadowOpacity: 0.4,
172
-  fabShadowRadius: 2,
173
-  fabWidth: 56,
174
-
175
-  // Font
176
-  DefaultFontSize: 16,
177
-  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
178
-  fontSizeBase: 15,
179
-  get fontSizeH1() {
180
-    return this.fontSizeBase * 1.8;
181
-  },
182
-  get fontSizeH2() {
183
-    return this.fontSizeBase * 1.6;
184
-  },
185
-  get fontSizeH3() {
186
-    return this.fontSizeBase * 1.4;
187
-  },
188
-
189
-  // Footer
190
-  footerHeight: 55,
191
-  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
192
-  footerPaddingBottom: 0,
193
-
194
-  // FooterTab
195
-  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
196
-  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
197
-  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
198
-  sTabBarActiveTextColor: '#007aff',
199
-  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
200
-  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
201
-
202
-  // Header
203
-  toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
204
-  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
205
-  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
206
-  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
207
-  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
208
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
209
-  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
210
-  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
211
-  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
212
-  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
213
-  toolbarTextColor: platform === PLATFORM.IOS ? '#000000' : '#ffffff',
214
-  get statusBarColor() {
215
-    return color(this.toolbarDefaultBg)
216
-      .darken(0.2)
217
-      .hex();
218
-  },
219
-  get darkenHeader() {
220
-    return color(this.tabBgColor)
221
-      .darken(0.03)
222
-      .hex();
223
-  },
224
-
225
-  // Icon
226
-  iconFamily: 'Ionicons',
227
-  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
228
-  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
229
-
230
-  // InputGroup
231
-  inputFontSize: 17,
232
-  inputBorderColor: '#D9D5DC',
233
-  inputSuccessBorderColor: '#2b8339',
234
-  inputErrorBorderColor: '#ed2f2f',
235
-  inputHeightBase: 50,
236
-  get inputColor() {
237
-    return this.textColor;
238
-  },
239
-  get inputColorPlaceholder() {
240
-    return '#575757';
241
-  },
242
-
243
-  // Line Height
244
-  buttonLineHeight: 19,
245
-  lineHeightH1: 32,
246
-  lineHeightH2: 27,
247
-  lineHeightH3: 22,
248
-  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
249
-  listItemSelected: '#be1522',
250
-
251
-  // List
252
-  listBg: 'transparent',
253
-  listBorderColor: '#c9c9c9',
254
-  listDividerBg: '#e2e2e2',
255
-  listBtnUnderlayColor: '#DDD',
256
-  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
257
-  listNoteColor: '#808080',
258
-  listNoteSize: 13,
259
-
260
-  // Progress Bar
261
-  defaultProgressColor: '#E4202D',
262
-  inverseProgressColor: '#1A191B',
263
-
264
-  // Radio Button
265
-  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
266
-  radioSelectedColorAndroid: '#be1522',
267
-  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
268
-  get radioColor() {
269
-    return this.brandPrimary;
270
-  },
271
-
272
-  // Segment
273
-  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
274
-  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
275
-  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
276
-  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
277
-  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
278
-  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
279
-
280
-  // Spinner
281
-  defaultSpinnerColor: '#be1522',
282
-  inverseSpinnerColor: '#1A191B',
283
-
284
-  // Tab
285
-  tabBarDisabledTextColor: '#BDBDBD',
286
-  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
287
-  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
288
-  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
289
-  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
290
-  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
291
-
292
-  // Tabs
293
-  tabBgColor: '#F8F8F8',
294
-  tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
295
-  tabFontSize: 15,
296
-
297
-  // Text
298
-  textColor: '#000',
299
-  textDisabledColor: "#c1c1c1",
300
-  inverseTextColor: '#fff',
301
-  noteFontSize: 14,
302
-  get defaultTextColor() {
303
-    return this.textColor;
304
-  },
305
-
306
-  // Title
307
-  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
308
-  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
309
-  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
310
-  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
311
-  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
312
-
313
-  // CUSTOM
314
-  customMaterialIconColor: "#5d5d5d",
315
-  fetchedDataSectionListErrorText: "#898989",
316
-
317
-  // Calendar/Agenda
318
-  agendaBackgroundColor: '#f3f3f4',
319
-  agendaEmptyLine: '#dbdbdc',
320
-
321
-  // PROXIWASH
322
-  proxiwashFinishedColor: "rgba(54,165,22,0.31)",
323
-  proxiwashReadyColor: "transparent",
324
-  proxiwashRunningColor: "rgba(94,104,241,0.3)",
325
-  proxiwashBrokenColor: "rgba(162,162,162,0.31)",
326
-  proxiwashErrorColor: "rgba(204,7,0,0.31)",
327
-
328
-  // Screens
329
-  planningColor: '#d9b10a',
330
-  proximoColor: '#ec5904',
331
-  proxiwashColor: '#1fa5ee',
332
-  menuColor: '#e91314',
333
-  tutorinsaColor: '#f93943',
334
-
335
-
336
-  // Other
337
-  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
338
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
339
-  contentPadding: 10,
340
-  dropdownLinkColor: '#414142',
341
-  inputLineHeight: 24,
342
-  deviceWidth,
343
-  deviceHeight,
344
-  isIphoneX,
345
-  inputGroupRoundedBorderRadius: 30,
346
-
347
-  // iPhoneX SafeArea
348
-  Inset: {
349
-    portrait: {
350
-      topInset: 24,
351
-      leftInset: 0,
352
-      rightInset: 0,
353
-      bottomInset: 34
354
-    },
355
-    landscape: {
356
-      topInset: 0,
357
-      leftInset: 44,
358
-      rightInset: 44,
359
-      bottomInset: 21
360
-    }
361
-  }
362
-};

+ 0
- 362
native-base-theme/variables/platformDark.js View File

@@ -1,362 +0,0 @@
1
-// @flow
2
-
3
-import color from 'color';
4
-import { Platform, Dimensions, PixelRatio } from 'react-native';
5
-
6
-import { PLATFORM } from './commonColor';
7
-
8
-const deviceHeight = Dimensions.get('window').height;
9
-const deviceWidth = Dimensions.get('window').width;
10
-const platform = Platform.OS;
11
-const platformStyle = undefined;
12
-const isIphoneX =
13
-  platform === PLATFORM.IOS &&
14
-  (deviceHeight === 812 ||
15
-    deviceWidth === 812 ||
16
-    deviceHeight === 896 ||
17
-    deviceWidth === 896);
18
-
19
-export default {
20
-  platformStyle,
21
-  platform,
22
-
23
-  // Accordion
24
-  accordionBorderColor: '#d3d3d3',
25
-  accordionContentPadding: 10,
26
-  accordionIconFontSize: 18,
27
-  contentStyle: '#f5f4f5',
28
-  expandedIconStyle: '#000',
29
-  headerStyle: '#edebed',
30
-  iconStyle: '#000',
31
-
32
-  // ActionSheet
33
-  elevation: 4,
34
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
35
-  innerTouchableBackgroundColor: '#fff',
36
-  listItemHeight: 50,
37
-  listItemBorderColor: 'transparent',
38
-  marginHorizontal: -15,
39
-  marginLeft: 14,
40
-  marginTop: 15,
41
-  minHeight: 56,
42
-  padding: 15,
43
-  touchableTextColor: '#757575',
44
-
45
-  // Android
46
-  androidRipple: true,
47
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
48
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
49
-  buttonUppercaseAndroidText: true,
50
-
51
-  // Badge
52
-  badgeBg: '#ED1727',
53
-  badgeColor: '#fff',
54
-  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
55
-
56
-  // Button
57
-  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
58
-  buttonTextColor: '#fff',
59
-  buttonDisabledBg: '#b5b5b5',
60
-  buttonPadding: 6,
61
-  buttonDefaultActiveOpacity: 0.5,
62
-  buttonDefaultFlex: 1,
63
-  buttonDefaultBorderRadius: 2,
64
-  buttonDefaultBorderWidth: 1,
65
-  get buttonPrimaryBg() {
66
-    return this.brandPrimary;
67
-  },
68
-  get buttonPrimaryColor() {
69
-    return this.textColor;
70
-  },
71
-  get buttonInfoBg() {
72
-    return this.brandInfo;
73
-  },
74
-  get buttonInfoColor() {
75
-    return this.textColor;
76
-  },
77
-  get buttonSuccessBg() {
78
-    return this.brandSuccess;
79
-  },
80
-  get buttonSuccessColor() {
81
-    return this.textColor;
82
-  },
83
-  get buttonDangerBg() {
84
-    return this.brandDanger;
85
-  },
86
-  get buttonDangerColor() {
87
-    return this.textColor;
88
-  },
89
-  get buttonWarningBg() {
90
-    return this.brandWarning;
91
-  },
92
-  get buttonWarningColor() {
93
-    return this.textColor;
94
-  },
95
-  get buttonTextSize() {
96
-    return platform === PLATFORM.IOS
97
-      ? this.fontSizeBase * 1.1
98
-      : this.fontSizeBase - 1;
99
-  },
100
-  get buttonTextSizeLarge() {
101
-    return this.fontSizeBase * 1.5;
102
-  },
103
-  get buttonTextSizeSmall() {
104
-    return this.fontSizeBase * 0.8;
105
-  },
106
-  get borderRadiusLarge() {
107
-    return this.fontSizeBase * 3.8;
108
-  },
109
-  get iconSizeLarge() {
110
-    return this.iconFontSize * 1.5;
111
-  },
112
-  get iconSizeSmall() {
113
-    return this.iconFontSize * 0.6;
114
-  },
115
-
116
-  // Card
117
-  cardDefaultBg: '#2A2A2A',
118
-  cardBorderColor: '#1a1a1a',
119
-  cardBorderRadius: 2,
120
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
121
-
122
-  // CheckBox
123
-  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
124
-  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
125
-  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
126
-  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
127
-  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
128
-  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
129
-  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
130
-  checkboxBgColor: '#be1522',
131
-  checkboxSize: 20,
132
-  checkboxTickColor: '#fff',
133
-  checkboxDefaultColor: 'transparent',
134
-  checkboxTextShadowRadius: 0,
135
-
136
-  // Color
137
-  brandPrimary: '#be1522',
138
-  brandInfo: '#62B1F6',
139
-  brandSuccess: '#5cb85c',
140
-  brandDanger: '#d9534f',
141
-  brandWarning: '#f0ad4e',
142
-  brandDark: '#000',
143
-  brandLight: '#f4f4f4',
144
-
145
-  // Container
146
-  containerBgColor: '#222222',
147
-  sideMenuBgColor: "#1c1c1c",
148
-
149
-  // Date Picker
150
-  datePickerFlex: 1,
151
-  datePickerPadding: 10,
152
-  datePickerTextColor: '#fff',
153
-  datePickerBg: 'transparent',
154
-
155
-  // FAB
156
-  fabBackgroundColor: 'blue',
157
-  fabBorderRadius: 28,
158
-  fabBottom: 0,
159
-  fabButtonBorderRadius: 20,
160
-  fabButtonHeight: 40,
161
-  fabButtonLeft: 7,
162
-  fabButtonMarginBottom: 10,
163
-  fabContainerBottom: 20,
164
-  fabDefaultPosition: 20,
165
-  fabElevation: 4,
166
-  fabIconColor: '#fff',
167
-  fabIconSize: 24,
168
-  fabShadowColor: '#000',
169
-  fabShadowOffsetHeight: 2,
170
-  fabShadowOffsetWidth: 0,
171
-  fabShadowOpacity: 0.4,
172
-  fabShadowRadius: 2,
173
-  fabWidth: 56,
174
-
175
-  // Font
176
-  DefaultFontSize: 16,
177
-  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
178
-  fontSizeBase: 15,
179
-  get fontSizeH1() {
180
-    return this.fontSizeBase * 1.8;
181
-  },
182
-  get fontSizeH2() {
183
-    return this.fontSizeBase * 1.6;
184
-  },
185
-  get fontSizeH3() {
186
-    return this.fontSizeBase * 1.4;
187
-  },
188
-
189
-  // Footer
190
-  footerHeight: 55,
191
-  footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
192
-  footerPaddingBottom: 0,
193
-
194
-  // FooterTab
195
-  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
196
-  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
197
-  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
198
-  sTabBarActiveTextColor: '#007aff',
199
-  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
200
-  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
201
-
202
-  // Header
203
-  toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
204
-  toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
205
-  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
206
-  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
207
-  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
208
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
209
-  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
210
-  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
211
-  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
212
-  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
213
-  toolbarTextColor: '#ffffff',
214
-  get statusBarColor() {
215
-    return color(this.toolbarDefaultBg)
216
-      .darken(0.2)
217
-      .hex();
218
-  },
219
-  get darkenHeader() {
220
-    return color(this.tabBgColor)
221
-      .darken(0.03)
222
-      .hex();
223
-  },
224
-
225
-  // Icon
226
-  iconFamily: 'Ionicons',
227
-  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
228
-  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
229
-
230
-  // InputGroup
231
-  inputFontSize: 17,
232
-  inputBorderColor: '#D9D5DC',
233
-  inputSuccessBorderColor: '#2b8339',
234
-  inputErrorBorderColor: '#ed2f2f',
235
-  inputHeightBase: 50,
236
-  get inputColor() {
237
-    return this.textColor;
238
-  },
239
-  get inputColorPlaceholder() {
240
-    return '#575757';
241
-  },
242
-
243
-  // Line Height
244
-  buttonLineHeight: 19,
245
-  lineHeightH1: 32,
246
-  lineHeightH2: 27,
247
-  lineHeightH3: 22,
248
-  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
249
-  listItemSelected: '#be1522',
250
-
251
-  // List
252
-  listBg: 'transparent',
253
-  listBorderColor: '#3e3e3e',
254
-  listDividerBg: '#222222',
255
-  listBtnUnderlayColor: '#3a3a3a',
256
-  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
257
-  listNoteColor: '#acacac',
258
-  listNoteSize: 13,
259
-
260
-  // Progress Bar
261
-  defaultProgressColor: '#E4202D',
262
-  inverseProgressColor: '#1A191B',
263
-
264
-  // Radio Button
265
-  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
266
-  radioSelectedColorAndroid: '#be1522',
267
-  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
268
-  get radioColor() {
269
-    return this.brandPrimary;
270
-  },
271
-
272
-  // Segment
273
-  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
274
-  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
275
-  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
276
-  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
277
-  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
278
-  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
279
-
280
-  // Spinner
281
-  defaultSpinnerColor: '#be1522',
282
-  inverseSpinnerColor: '#1A191B',
283
-
284
-  // Tab
285
-  tabBarDisabledTextColor: '#BDBDBD',
286
-  tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
287
-  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
288
-  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
289
-  topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
290
-  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
291
-
292
-  // Tabs
293
-  tabBgColor: '#2b2b2b',
294
-  tabIconColor: "#fff",
295
-  tabFontSize: 15,
296
-
297
-  // Text
298
-  textColor: '#ebebeb',
299
-  textDisabledColor: "#5b5b5b",
300
-  inverseTextColor: '#000',
301
-  noteFontSize: 14,
302
-  get defaultTextColor() {
303
-    return this.textColor;
304
-  },
305
-
306
-  // Title
307
-  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
308
-  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
309
-  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
310
-  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
311
-  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
312
-
313
-  // CUSTOM
314
-  customMaterialIconColor: "#b3b3b3",
315
-  fetchedDataSectionListErrorText: "#acacac",
316
-
317
-  // Calendar/Agenda
318
-  agendaBackgroundColor: '#373737',
319
-  agendaEmptyLine: '#464646',
320
-
321
-  // PROXIWASH
322
-  proxiwashFinishedColor: "rgba(17,149,32,0.53)",
323
-  proxiwashReadyColor: "transparent",
324
-  proxiwashRunningColor: "rgba(29,59,175,0.65)",
325
-  proxiwashBrokenColor: "#000000",
326
-  proxiwashErrorColor: "rgba(213,8,0,0.57)",
327
-
328
-  // Screens
329
-  planningColor: '#d99e09',
330
-  proximoColor: '#ec5904',
331
-  proxiwashColor: '#1fa5ee',
332
-  menuColor: '#b81213',
333
-  tutorinsaColor: '#f93943',
334
-
335
-
336
-  // Other
337
-  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
338
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
339
-  contentPadding: 10,
340
-  dropdownLinkColor: '#414142',
341
-  inputLineHeight: 24,
342
-  deviceWidth,
343
-  deviceHeight,
344
-  isIphoneX,
345
-  inputGroupRoundedBorderRadius: 30,
346
-
347
-  // iPhoneX SafeArea
348
-  Inset: {
349
-    portrait: {
350
-      topInset: 24,
351
-      leftInset: 0,
352
-      rightInset: 0,
353
-      bottomInset: 34
354
-    },
355
-    landscape: {
356
-      topInset: 0,
357
-      leftInset: 44,
358
-      rightInset: 44,
359
-      bottomInset: 21
360
-    }
361
-  }
362
-};

+ 7
- 20
navigation/DrawerNavigator.js View File

@@ -12,25 +12,12 @@ import BibScreen from "../screens/Websites/BibScreen";
12 12
 import DebugScreen from '../screens/DebugScreen';
13 13
 import Sidebar from "../components/Sidebar";
14 14
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
15
-import PerfHomeScreen from '../screens/PerfHomeScreen';
16
-import {Platform, StyleSheet, View} from "react-native";
17
-import ThemeManager from "../utils/ThemeManager";
15
+import {View} from "react-native";
18 16
 import Touchable from "react-native-platform-touchable";
19 17
 import {MaterialCommunityIcons} from "@expo/vector-icons";
20
-
21
-
22
-const styles = StyleSheet.create({
23
-    header: {
24
-        backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
25
-    },
26
-    headerTitle: {
27
-        color: "#ffffff",
28
-    },
29
-});
18
+import ThemeManager from "../utils/ThemeManager";
30 19
 
31 20
 const defaultScreenOptions = {
32
-    headerTintColor: 'white',
33
-    headerStyle: styles.header,
34 21
     gestureEnabled: true,
35 22
     cardOverlayEnabled: true,
36 23
     ...TransitionPresets.SlideFromRightIOS,
@@ -49,7 +36,7 @@ function getDrawerButton(navigation: Object) {
49 36
                 <MaterialCommunityIcons
50 37
                     name="menu"
51 38
                     size={26}
52
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
39
+                    color={ThemeManager.getCurrentThemeVariables().text}/>
53 40
             </Touchable>
54 41
         </View>
55 42
     );
@@ -191,8 +178,8 @@ function BibStackComponent() {
191 178
 
192 179
 const Drawer = createDrawerNavigator();
193 180
 
194
-function getDrawerContent(nav) {
195
-    return <Sidebar navigation={nav}/>
181
+function getDrawerContent(props) {
182
+    return <Sidebar {...props}/>
196 183
 }
197 184
 
198 185
 export default function DrawerNavigator() {
@@ -201,8 +188,8 @@ export default function DrawerNavigator() {
201 188
             initialRouteName={'Main'}
202 189
             headerMode={'float'}
203 190
             backBehavior={'initialRoute'}
204
-            drawerType={'back'}
205
-            drawerContent={props => getDrawerContent(props.navigation)}
191
+            drawerType={'front'}
192
+            drawerContent={(props) => getDrawerContent(props)}
206 193
             screenOptions={defaultScreenOptions}
207 194
         >
208 195
             <Drawer.Screen

+ 3
- 14
navigation/MainTabNavigator.js View File

@@ -14,7 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
14 14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15 15
 import ThemeManager from "../utils/ThemeManager";
16 16
 import AsyncStorageManager from "../utils/AsyncStorageManager";
17
-import {Platform, StyleSheet, View} from "react-native";
17
+import {View} from "react-native";
18 18
 import Touchable from "react-native-platform-touchable";
19 19
 
20 20
 const TAB_ICONS = {
@@ -25,18 +25,7 @@ const TAB_ICONS = {
25 25
     Planex: 'timetable',
26 26
 };
27 27
 
28
-const styles = StyleSheet.create({
29
-    header: {
30
-        backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
31
-    },
32
-    headerTitle: {
33
-        color: "#ffffff",
34
-    },
35
-});
36
-
37 28
 const defaultScreenOptions = {
38
-    headerTintColor: 'white',
39
-    headerStyle: styles.header,
40 29
     gestureEnabled: true,
41 30
     cardOverlayEnabled: true,
42 31
     ...TransitionPresets.SlideFromRightIOS,
@@ -55,7 +44,7 @@ function getDrawerButton(navigation: Object) {
55 44
                 <MaterialCommunityIcons
56 45
                     name="menu"
57 46
                     size={26}
58
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
47
+                    color={ThemeManager.getCurrentThemeVariables().text}/>
59 48
             </Touchable>
60 49
         </View>
61 50
     );
@@ -226,7 +215,7 @@ export default function TabNavigator() {
226 215
     return (
227 216
         <Tab.Navigator
228 217
             initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
229
-            barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}}
218
+            barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().primary}}
230 219
             screenOptions={({route}) => ({
231 220
                 tabBarIcon: ({focused, color, size}) => {
232 221
                     let icon = TAB_ICONS[route.name];

+ 1
- 4
package.json View File

@@ -22,8 +22,6 @@
22 22
     "expo-permissions": "~8.0.0",
23 23
     "expo-web-browser": "~8.0.0",
24 24
     "i18n-js": "^3.3.0",
25
-    "native-base": "^2.12.1",
26
-    "native-base-shoutem-theme": "^0.3.1",
27 25
     "react": "16.9.0",
28 26
     "react-dom": "16.9.0",
29 27
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
@@ -31,9 +29,8 @@
31 29
     "react-native-autolink": "^1.8.1",
32 30
     "react-native-calendars": "^1.260.0",
33 31
     "react-native-gesture-handler": "~1.5.0",
34
-    "react-native-material-menu": "^1.0.0",
35 32
     "react-native-modalize": "^1.3.6",
36
-    "react-native-paper": "^3.5.1",
33
+    "react-native-paper": "^3.6.0",
37 34
     "react-native-platform-touchable": "^1.1.1",
38 35
     "react-native-reanimated": "~1.4.0",
39 36
     "react-native-render-html": "^4.1.2",

+ 5
- 11
screens/About/AboutDependenciesScreen.js View File

@@ -1,9 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, ListItem, Text} from 'native-base';
5 4
 import {FlatList} from "react-native";
6 5
 import packageJson from '../../package';
6
+import {List} from 'react-native-paper';
7 7
 
8 8
 function generateListFromObject(object) {
9 9
     let list = [];
@@ -33,16 +33,10 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
33 33
                 keyExtractor={(item) => item.name}
34 34
                 style={{minHeight: 300, width: '100%'}}
35 35
                 renderItem={({item}) =>
36
-                    <ListItem>
37
-                        <Body>
38
-                            <Text>
39
-                                {item.name}
40
-                            </Text>
41
-                            <Text note>
42
-                                {item.version.replace('^', '')}
43
-                            </Text>
44
-                        </Body>
45
-                    </ListItem>}
36
+                    <List.Item
37
+                        title={item.name}
38
+                        description={item.version.replace('^', '').replace('~', '')}
39
+                    />}
46 40
             />
47 41
         );
48 42
     }

+ 81
- 99
screens/About/AboutScreen.js View File

@@ -2,13 +2,12 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {FlatList, Linking, Platform, View} from 'react-native';
5
-import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base';
6 5
 import i18n from "i18n-js";
7 6
 import appJson from '../../app';
8
-import {MaterialCommunityIcons} from "@expo/vector-icons";
9 7
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
10 8
 import {Modalize} from "react-native-modalize";
11 9
 import ThemeManager from "../../utils/ThemeManager";
10
+import {Avatar, Card, Text, Title, List, Button} from 'react-native-paper';
12 11
 
13 12
 const links = {
14 13
     appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
@@ -197,80 +196,65 @@ export default class AboutScreen extends React.Component<Props, State> {
197 196
 
198 197
     getAppCard() {
199 198
         return (
200
-            <Card>
201
-                <CardItem>
202
-                    <Left>
203
-                        <Thumbnail square source={require('../../assets/android.icon.png')}/>
204
-                        <Body>
205
-                            <H1>{appJson.expo.name}</H1>
206
-                            <Text note>
207
-                                v.{appJson.expo.version}
208
-                            </Text>
209
-                        </Body>
210
-                    </Left>
211
-                </CardItem>
212
-                <FlatList
213
-                    data={this.appData}
214
-                    extraData={this.state}
215
-                    keyExtractor={(item) => item.icon}
216
-                    listKey={"app"}
217
-                    renderItem={this.getCardItem}
218
-                />
199
+            <Card style={{marginBottom: 10}}>
200
+                <Card.Title
201
+                    title={appJson.expo.name}
202
+                    subtitle={appJson.expo.version}
203
+                    left={(props) => <Avatar.Image {...props} source={require('../../assets/android.icon.png')}/>}/>
204
+                <Card.Content>
205
+                    <FlatList
206
+                        data={this.appData}
207
+                        extraData={this.state}
208
+                        keyExtractor={(item) => item.icon}
209
+                        listKey={"app"}
210
+                        renderItem={this.getCardItem}
211
+                    />
212
+                </Card.Content>
219 213
             </Card>
220 214
         );
221 215
     }
222 216
 
223 217
     getTeamCard() {
224 218
         return (
225
-            <Card>
226
-                <CardItem>
227
-                    <Left>
228
-                        <MaterialCommunityIcons
229
-                            name='account-multiple'
230
-                            size={40}
231
-                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
232
-                        <Body>
233
-                            <H1>{i18n.t('aboutScreen.team')}</H1>
234
-                        </Body>
235
-                    </Left>
236
-                </CardItem>
237
-                <CardItem header>
238
-                    <Text>{i18n.t('aboutScreen.author')}</Text>
239
-                </CardItem>
240
-                <FlatList
241
-                    data={this.authorData}
242
-                    extraData={this.state}
243
-                    keyExtractor={(item) => item.icon}
244
-                    listKey={"team1"}
245
-                    renderItem={this.getCardItem}
246
-                />
247
-                <CardItem header>
248
-                    <Text>{i18n.t('aboutScreen.additionalDev')}</Text>
249
-                </CardItem>
250
-                <FlatList
251
-                    data={this.additionalDevData}
252
-                    extraData={this.state}
253
-                    keyExtractor={(item) => item.icon}
254
-                    listKey={"team2"}
255
-                    renderItem={this.getCardItem}
256
-                />
219
+            <Card style={{marginBottom: 10}}>
220
+                <Card.Title
221
+                    title={i18n.t('aboutScreen.team')}
222
+                    left={(props) => <Avatar.Icon {...props} icon={'account-multiple'}/>}/>
223
+                <Card.Content>
224
+                    <Title>{i18n.t('aboutScreen.author')}</Title>
225
+                    <FlatList
226
+                        data={this.authorData}
227
+                        extraData={this.state}
228
+                        keyExtractor={(item) => item.icon}
229
+                        listKey={"team1"}
230
+                        renderItem={this.getCardItem}
231
+                    />
232
+                    <Title>{i18n.t('aboutScreen.additionalDev')}</Title>
233
+                    <FlatList
234
+                        data={this.additionalDevData}
235
+                        extraData={this.state}
236
+                        keyExtractor={(item) => item.icon}
237
+                        listKey={"team2"}
238
+                        renderItem={this.getCardItem}
239
+                    />
240
+                </Card.Content>
257 241
             </Card>
258 242
         );
259 243
     }
260 244
 
261 245
     getTechnoCard() {
262 246
         return (
263
-            <Card>
264
-                <CardItem header>
265
-                    <Text>{i18n.t('aboutScreen.technologies')}</Text>
266
-                </CardItem>
267
-                <FlatList
268
-                    data={this.technoData}
269
-                    extraData={this.state}
270
-                    keyExtractor={(item) => item.icon}
271
-                    listKey={"techno"}
272
-                    renderItem={this.getCardItem}
273
-                />
247
+            <Card style={{marginBottom: 10}}>
248
+                <Card.Content>
249
+                    <Title>{i18n.t('aboutScreen.technologies')}</Title>
250
+                    <FlatList
251
+                        data={this.technoData}
252
+                        extraData={this.state}
253
+                        keyExtractor={(item) => item.icon}
254
+                        listKey={"techno"}
255
+                        renderItem={this.getCardItem}
256
+                    />
257
+                </Card.Content>
274 258
             </Card>
275 259
         );
276 260
     }
@@ -282,31 +266,29 @@ export default class AboutScreen extends React.Component<Props, State> {
282 266
      */
283 267
     getCardItem({item}: Object) {
284 268
         let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
269
+        console.log(item.text);
285 270
         if (shouldShow) {
286
-            return (
287
-                <CardItem button
288
-                          onPress={item.onPressCallback}>
289
-                    <Left>
290
-                        <MaterialCommunityIcons
291
-                            name={item.icon}
292
-                            size={26}
293
-                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
294
-                        <Text>{item.text}</Text>
295
-                    </Left>
296
-                    {item.showChevron ?
297
-                        <Right>
298
-                            <MaterialCommunityIcons
299
-                                name={'chevron-right'}
300
-                                size={26}
301
-                                color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
302
-                        </Right>
303
-                        :
304
-                        <Right/>
305
-                    }
306
-                </CardItem>)
307
-                ;
271
+            if (item.showChevron) {
272
+                return (
273
+                    <List.Item
274
+                        title={item.text}
275
+                        left={props => <List.Icon {...props} icon={item.icon} />}
276
+                        right={props => <List.Icon {...props} icon={'chevron-right'} />}
277
+                        onPress={item.onPressCallback}
278
+                    />
279
+                );
280
+            } else {
281
+                return (
282
+                    <List.Item
283
+                        title={item.text}
284
+                        left={props => <List.Icon {...props} icon={item.icon} />}
285
+                        onPress={item.onPressCallback}
286
+                    />
287
+                );
288
+            }
289
+
308 290
         } else {
309
-            return <View/>
291
+            return null;
310 292
         }
311 293
 
312 294
     }
@@ -330,39 +312,39 @@ export default class AboutScreen extends React.Component<Props, State> {
330 312
         return (
331 313
             <Modalize ref={this.modalRef}
332 314
                       adjustToContentHeight
333
-                      modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
315
+                      modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
334 316
                 <View style={{
335 317
                     flex: 1,
336 318
                     padding: 20
337 319
                 }}>
338
-                    <H1>{i18n.t('aboutScreen.bugs')}</H1>
320
+                    <Title>{i18n.t('aboutScreen.bugs')}</Title>
339 321
                     <Text>
340 322
                         {i18n.t('aboutScreen.bugsDescription')}
341 323
                     </Text>
342 324
                     <Button
325
+                        icon="email"
326
+                        mode="contained"
327
+                        dark={true}
328
+                        color={ThemeManager.getCurrentThemeVariables().primary}
343 329
                         style={{
344 330
                             marginTop: 20,
345 331
                             marginLeft: 'auto',
346 332
                             marginRight: 'auto',
347 333
                         }}
348 334
                         onPress={onPressMail}>
349
-                        <MaterialCommunityIcons
350
-                            name={'email'}
351
-                            size={26}
352
-                            color={'#fff'}/>
353 335
                         <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
354 336
                     </Button>
355 337
                     <Button
338
+                        icon="git"
339
+                        mode="contained"
340
+                        dark={true}
341
+                        color={ThemeManager.getCurrentThemeVariables().primary}
356 342
                         style={{
357 343
                             marginTop: 20,
358 344
                             marginLeft: 'auto',
359 345
                             marginRight: 'auto',
360 346
                         }}
361 347
                         onPress={onPressGit}>
362
-                        <MaterialCommunityIcons
363
-                            name={'git'}
364
-                            size={26}
365
-                            color={'#fff'}/>
366 348
                         <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
367 349
                     </Button>
368 350
                 </View>
@@ -390,7 +372,7 @@ export default class AboutScreen extends React.Component<Props, State> {
390 372
 
391 373
     render() {
392 374
         return (
393
-            <Content padder>
375
+            <View style={{padding: 5}}>
394 376
                 {this.getBugReportModal()}
395 377
                 <FlatList
396 378
                     style={{padding: 5}}
@@ -399,7 +381,7 @@ export default class AboutScreen extends React.Component<Props, State> {
399 381
                     keyExtractor={(item) => item.id}
400 382
                     renderItem={this.getMainCard}
401 383
                 />
402
-            </Content>
384
+            </View>
403 385
         );
404 386
     }
405 387
 }

+ 54
- 79
screens/DebugScreen.js View File

@@ -1,31 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {
5
-    Body,
6
-    Button,
7
-    Card,
8
-    CardItem,
9
-    Container,
10
-    Content,
11
-    Form,
12
-    H1,
13
-    H3,
14
-    Input,
15
-    Item,
16
-    Label,
17
-    Left,
18
-    List,
19
-    ListItem,
20
-    Right,
21
-    Text
22
-} from "native-base";
23 4
 import ThemeManager from '../utils/ThemeManager';
24
-import {MaterialCommunityIcons} from "@expo/vector-icons";
25
-import {Alert, Clipboard, View} from "react-native";
5
+import {Alert, Clipboard, ScrollView, View} from "react-native";
26 6
 import AsyncStorageManager from "../utils/AsyncStorageManager";
27 7
 import NotificationsManager from "../utils/NotificationsManager";
28 8
 import {Modalize} from "react-native-modalize";
9
+import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
29 10
 
30 11
 type Props = {
31 12
     navigation: Object,
@@ -54,29 +35,24 @@ export default class DebugScreen extends React.Component<Props, State> {
54 35
     }
55 36
 
56 37
     static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
57
-        return (
58
-            <ListItem
59
-                button
60
-                thumbnail
61
-                onPress={onPressCallback}
62
-            >
63
-                {icon !== undefined ?
64
-                    <Left>
65
-                        <MaterialCommunityIcons name={icon} size={26}/>
66
-                    </Left>
67
-                    : <View/>
68
-                }
69
-                <Body>
70
-                    <Text>
71
-                        {title}
72
-                    </Text>
73
-                    <Text note>
74
-                        {subtitle}
75
-                    </Text>
76
-                </Body>
77
-                <Right/>
78
-            </ListItem>
79
-        );
38
+        if (icon !== undefined) {
39
+            return (
40
+                <List.Item
41
+                    title={title}
42
+                    description={subtitle}
43
+                    left={() => <List.Icon icon={icon}/>}
44
+                    onPress={onPressCallback}
45
+                />
46
+            );
47
+        } else {
48
+            return (
49
+                <List.Item
50
+                    title={title}
51
+                    description={subtitle}
52
+                    onPress={onPressCallback}
53
+                />
54
+            );
55
+        }
80 56
     }
81 57
 
82 58
     alertCurrentExpoToken() {
@@ -111,26 +87,30 @@ export default class DebugScreen extends React.Component<Props, State> {
111 87
                 flex: 1,
112 88
                 padding: 20
113 89
             }}>
114
-                <H1>{this.state.modalCurrentDisplayItem.key}</H1>
115
-                <H3>Default: {this.state.modalCurrentDisplayItem.default}</H3>
116
-                <H3>Current: {this.state.modalCurrentDisplayItem.current}</H3>
117
-                <Form>
118
-                    <Item floatingLabel>
119
-                        <Label>New Value</Label>
120
-                        <Input onChangeText={(text) => this.modalInputValue = text}/>
121
-                    </Item>
122
-                </Form>
90
+                <Title>{this.state.modalCurrentDisplayItem.key}</Title>
91
+                <Subheading>Default: {this.state.modalCurrentDisplayItem.default}</Subheading>
92
+                <Subheading>Current: {this.state.modalCurrentDisplayItem.current}</Subheading>
93
+                <TextInput
94
+                    label='New Value'
95
+                    onChangeText={(text) => this.modalInputValue = text}
96
+                />
123 97
                 <View style={{
124 98
                     flexDirection: 'row',
125 99
                     marginTop: 10,
126 100
                 }}>
127
-                    <Button success
128
-                            onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
129
-                        <Text>Save new value</Text>
101
+                    <Button
102
+                        mode="contained"
103
+                        dark={true}
104
+                        color={ThemeManager.getCurrentThemeVariables().success}
105
+                        onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
106
+                        Save new value
130 107
                     </Button>
131 108
                     <Button
109
+                        mode="contained"
110
+                        dark={true}
111
+                        color={ThemeManager.getCurrentThemeVariables().danger}
132 112
                         onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
133
-                        <Text>Reset to default</Text>
113
+                        Reset to default
134 114
                     </Button>
135 115
                 </View>
136 116
 
@@ -149,42 +129,37 @@ export default class DebugScreen extends React.Component<Props, State> {
149 129
 
150 130
     render() {
151 131
         return (
152
-            <Container>
132
+            <View>
153 133
                 <Modalize
154 134
                     ref={this.modalRef}
155 135
                     adjustToContentHeight
156
-                    modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
136
+                    modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
157 137
                     {this.getModalContent()}
158 138
                 </Modalize>
159
-                <Content padder>
160
-                    <Card>
161
-                        <CardItem header>
162
-                            <Text>
163
-                                Notifications
164
-                            </Text>
165
-                        </CardItem>
166
-                        <List>
139
+                <ScrollView style={{padding: 5}}>
140
+                    <Card style={{margin: 5}}>
141
+                        <Card.Title
142
+                            title={'Notifications'}
143
+                        />
144
+                        <Card.Content>
167 145
                             {DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')}
168 146
                             {DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')}
169
-                        </List>
147
+                        </Card.Content>
170 148
                     </Card>
171
-                    <Card>
172
-                        <CardItem header>
173
-                            <Text>
174
-                                Preferences
175
-                            </Text>
176
-                        </CardItem>
177
-                        <List>
149
+                    <Card style={{margin: 5}}>
150
+                        <Card.Title
151
+                            title={'Preferences'}
152
+                        />
153
+                        <Card.Content>
178 154
                             {Object.values(this.state.currentPreferences).map((object) =>
179 155
                                 <View>
180 156
                                     {DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')}
181 157
                                 </View>
182 158
                             )}
183
-                        </List>
159
+                        </Card.Content>
184 160
                     </Card>
185
-                </Content>
186
-            </Container>
187
-
161
+                </ScrollView>
162
+            </View>
188 163
         );
189 164
     }
190 165
 }

+ 32
- 55
screens/HomeScreen.js View File

@@ -1,8 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, TouchableOpacity, View} from 'react-native';
5
-import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
4
+import {TouchableOpacity, View} from 'react-native';
6 5
 import i18n from "i18n-js";
7 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8 7
 import Autolink from 'react-native-autolink';
@@ -10,6 +9,8 @@ import ThemeManager from "../utils/ThemeManager";
10 9
 import DashboardItem from "../components/DashboardItem";
11 10
 import * as WebBrowser from 'expo-web-browser';
12 11
 import WebSectionList from "../components/WebSectionList";
12
+import PlatformTouchable from "react-native-platform-touchable";
13
+import {Avatar, Card, Text} from 'react-native-paper';
13 14
 // import DATA from "../dashboard_data.json";
14 15
 
15 16
 
@@ -405,11 +406,11 @@ export default class HomeScreen extends React.Component<Props> {
405 406
         let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0;
406 407
         let proxiwashSubtitle;
407 408
         let dryerColor = parseInt(proxiwashData['dryers']) > 0 ?
408
-            ThemeManager.getCurrentThemeVariables().textColor :
409
-            ThemeManager.getCurrentThemeVariables().listNoteColor;
409
+            ThemeManager.getCurrentThemeVariables().text :
410
+            ThemeManager.getCurrentThemeVariables().textDisabled;
410 411
         let washerColor = parseInt(proxiwashData['washers']) > 0 ?
411
-            ThemeManager.getCurrentThemeVariables().textColor :
412
-            ThemeManager.getCurrentThemeVariables().listNoteColor;
412
+            ThemeManager.getCurrentThemeVariables().text :
413
+            ThemeManager.getCurrentThemeVariables().textDisabled;
413 414
         let availableDryers = proxiwashData['dryers'];
414 415
         let availableWashers = proxiwashData['washers'];
415 416
         if (proxiwashIsAvailable) {
@@ -505,59 +506,35 @@ export default class HomeScreen extends React.Component<Props> {
505 506
         const onImagePress = this.openLink.bind(this, item.full_picture);
506 507
         const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
507 508
         return (
508
-            <Card style={{
509
-                flex: 0,
510
-                marginLeft: 10,
511
-                marginRight: 10,
512
-                borderRadius: CARD_BORDER_RADIUS,
513
-            }}>
514
-                <CardItem style={{
515
-                    backgroundColor: 'transparent'
516
-                }}>
517
-                    <Left>
518
-                        <Thumbnail source={ICON_AMICALE} square/>
519
-                        <Body>
520
-                            <Text>{NAME_AMICALE}</Text>
521
-                            <Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text>
522
-                        </Body>
523
-                    </Left>
524
-                </CardItem>
525
-                <CardItem style={{
526
-                    backgroundColor: 'transparent'
527
-                }}>
528
-                    <Body>
529
-                        {item.full_picture !== '' && item.full_picture !== undefined ?
530
-                            <TouchableOpacity onPress={onImagePress}
531
-                                              style={{width: '100%', height: 250, marginBottom: 5}}>
532
-                                <Image source={{uri: item.full_picture}}
533
-                                       style={{flex: 1, resizeMode: "contain"}}
534
-                                       resizeMode="contain"
535
-                                />
536
-                            </TouchableOpacity>
537
-                            : <View/>}
538
-                        {item.message !== undefined ?
539
-                            <Autolink
540
-                                text={item.message}
541
-                                hashtag="facebook"
542
-                                style={{color: ThemeManager.getCurrentThemeVariables().textColor}}
543
-                            /> : <View/>
544
-                        }
545
-                    </Body>
546
-                </CardItem>
547
-                <CardItem style={{
548
-                    backgroundColor: 'transparent'
549
-                }}>
550
-                    <Left>
551
-                        <Button transparent
552
-                                onPress={onOutLinkPress}>
509
+            <Card style={{margin: 5}}>
510
+                <Card.Title
511
+                    title={NAME_AMICALE}
512
+                    subtitle={HomeScreen.getFormattedDate(item.created_time)}
513
+                    left={props => <Avatar.Image size={48} source={ICON_AMICALE}
514
+                                                 style={{backgroundColor: 'transparent'}}/>}
515
+                />
516
+                {item.full_picture !== '' && item.full_picture !== undefined ?
517
+                    <TouchableOpacity onPress={onImagePress}>
518
+                        <Card.Cover source={{uri: item.full_picture}}/>
519
+                    </TouchableOpacity> : <View/>}
520
+                <Card.Content>
521
+                    {item.message !== undefined ?
522
+                        <Autolink
523
+                            text={item.message}
524
+                            hashtag="facebook"
525
+                            style={{color: ThemeManager.getCurrentThemeVariables().text}}
526
+                        /> : <View/>
527
+                    }
528
+                    <PlatformTouchable onPress={onOutLinkPress}>
529
+                        <View style={{flexDirection: 'row', marginTop: 5}}>
553 530
                             <MaterialCommunityIcons
554 531
                                 name="facebook"
555 532
                                 color="#57aeff"
556 533
                                 size={26}/>
557
-                            <Text>En savoir plus</Text>
558
-                        </Button>
559
-                    </Left>
560
-                </CardItem>
534
+                            <Text style={{color: "#57aeff"}}>En savoir plus</Text>
535
+                        </View>
536
+                    </PlatformTouchable>
537
+                </Card.Content>
561 538
             </Card>
562 539
         );
563 540
     }

+ 27
- 33
screens/PlanningDisplayScreen.js View File

@@ -1,12 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image} from 'react-native';
5
-import {Container, Content, H1, H3, View} from 'native-base';
4
+import {Image, ScrollView, View} from 'react-native';
6 5
 import ThemeManager from "../utils/ThemeManager";
7 6
 import HTML from "react-native-render-html";
8 7
 import {Linking} from "expo";
9 8
 import PlanningEventManager from '../utils/PlanningEventManager';
9
+import {Subheading, Title} from 'react-native-paper';
10 10
 
11 11
 type Props = {
12 12
     navigation: Object,
@@ -27,38 +27,32 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
27 27
     render() {
28 28
         // console.log("rendering planningDisplayScreen");
29 29
         return (
30
-            <Container>
31
-                <Content padder>
32
-                    <H1>
33
-                        {this.displayData.title}
34
-                    </H1>
35
-                    <H3 style={{
36
-                        marginTop: 10,
37
-                        color: ThemeManager.getCurrentThemeVariables().listNoteColor
38
-                    }}>
39
-                        {PlanningEventManager.getFormattedTime(this.displayData)}
40
-                    </H3>
41
-                    {this.displayData.logo !== null ?
42
-                        <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
43
-                            <Image style={{flex: 1, resizeMode: "contain"}}
44
-                                   source={{uri: this.displayData.logo}}/>
45
-                        </View>
46
-                        : <View/>}
30
+            <ScrollView style={{padding: 5}}>
31
+                <Title>
32
+                    {this.displayData.title}
33
+                </Title>
34
+                <Subheading style={{marginTop: 10,}}>
35
+                    {PlanningEventManager.getFormattedTime(this.displayData)}
36
+                </Subheading>
37
+                {this.displayData.logo !== null ?
38
+                    <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
39
+                        <Image style={{flex: 1, resizeMode: "contain"}}
40
+                               source={{uri: this.displayData.logo}}/>
41
+                    </View>
42
+                    : <View/>}
47 43
 
48
-                    {this.displayData.description !== null ?
49
-                        // Surround description with div to allow text styling if the description is not html
50
-                        <HTML html={"<div>" + this.displayData.description + "</div>"}
51
-                              tagsStyles={{
52
-                                  p: {
53
-                                      color: ThemeManager.getCurrentThemeVariables().textColor,
54
-                                      fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase
55
-                                  },
56
-                                  div: {color: ThemeManager.getCurrentThemeVariables().textColor}
57
-                              }}
58
-                              onLinkPress={openWebLink}/>
59
-                        : <View/>}
60
-                </Content>
61
-            </Container>
44
+                {this.displayData.description !== null ?
45
+                    // Surround description with div to allow text styling if the description is not html
46
+                    <HTML html={"<div>" + this.displayData.description + "</div>"}
47
+                          tagsStyles={{
48
+                              p: {
49
+                                  color: ThemeManager.getCurrentThemeVariables().text,
50
+                              },
51
+                              div: {color: ThemeManager.getCurrentThemeVariables().text}
52
+                          }}
53
+                          onLinkPress={openWebLink}/>
54
+                    : <View/>}
55
+            </ScrollView>
62 56
         );
63 57
     }
64 58
 }

+ 40
- 79
screens/PlanningScreen.js View File

@@ -1,14 +1,13 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {BackHandler, Image} from 'react-native';
5
-import {H3, Text, View} from 'native-base';
4
+import {BackHandler, Image, View} from 'react-native';
6 5
 import i18n from "i18n-js";
7 6
 import ThemeManager from "../utils/ThemeManager";
8 7
 import {Agenda, LocaleConfig} from 'react-native-calendars';
9
-import Touchable from 'react-native-platform-touchable';
10 8
 import WebDataManager from "../utils/WebDataManager";
11 9
 import PlanningEventManager from '../utils/PlanningEventManager';
10
+import {Text, Title, List, Avatar, Divider} from 'react-native-paper';
12 11
 
13 12
 LocaleConfig.locales['fr'] = {
14 13
     monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@@ -87,12 +86,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
87 86
         this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
88 87
     }
89 88
 
90
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
91
-        return nextState.refreshing === false && this.state.refreshing === true ||
92
-            nextState.agendaItems !== this.state.agendaItems ||
93
-            nextState.calendarShowing !== this.state.calendarShowing;
94
-    }
95
-
96 89
     componentDidMount() {
97 90
         this.onRefresh();
98 91
         this.willBlurSubscription = this.props.navigation.addListener(
@@ -114,11 +107,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
114 107
         }
115 108
     };
116 109
 
117
-    componentWillUnmount() {
118
-        this.didFocusSubscription && this.didFocusSubscription.remove();
119
-        this.willBlurSubscription && this.willBlurSubscription.remove();
120
-    }
121
-
122 110
     getCurrentDate() {
123 111
         let today = new Date();
124 112
         return this.getFormattedDate(today);
@@ -141,63 +129,36 @@ export default class PlanningScreen extends React.Component<Props, State> {
141 129
     }
142 130
 
143 131
     getRenderItem(item: Object) {
144
-        return (
145
-            <Touchable
146
-                style={{
147
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
148
-                    borderRadius: 10,
149
-                    marginRight: 10,
150
-                    marginTop: 17,
151
-                }}
152
-                onPress={() => this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}>
153
-                <View style={{
154
-                    padding: 10,
155
-                    flex: 1,
156
-                    flexDirection: 'row'
157
-                }}>
158
-                    <View style={{
159
-                        width: item.logo !== null ? '70%' : '100%',
160
-                    }}>
161
-                        <Text style={{
162
-                            color: ThemeManager.getCurrentThemeVariables().listNoteColor,
163
-                            marginTop: 5,
164
-                            marginBottom: 10
165
-                        }}>
166
-                            {PlanningEventManager.getFormattedTime(item)}
167
-                        </Text>
168
-                        <H3 style={{marginBottom: 10}}>{item.title}</H3>
169
-                    </View>
170
-                    <View style={{
171
-                        width: item.logo !== null ? '30%' : 0,
172
-                        height: 80
173
-                    }}>
174
-                        {item.logo !== null ?
175
-                            <Image source={{uri: item.logo}}
176
-                                   style={{
177
-                                       flex: 1,
178
-                                       resizeMode: "contain"
179
-                                   }}/>
180
-                            : <View/>}
181
-                    </View>
132
+        const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item});
133
+        if (item.logo !== null) {
134
+            return (
135
+                <View>
136
+                    <Divider/>
137
+                    <List.Item
138
+                        title={item.title}
139
+                        description={PlanningEventManager.getFormattedTime(item)}
140
+                        left={props => <Avatar.Image source={{uri: item.logo}} />}
141
+                        onPress={onPress}
142
+                    />
182 143
                 </View>
183
-            </Touchable>
184
-        );
144
+            );
145
+        } else {
146
+            return (
147
+                <View>
148
+                    <Divider/>
149
+                    <List.Item
150
+                        title={item.title}
151
+                        description={PlanningEventManager.getFormattedTime(item)}
152
+                        onPress={onPress}
153
+                    />
154
+                </View>
155
+            );
156
+        }
185 157
     }
186 158
 
187 159
     getRenderEmptyDate() {
188 160
         return (
189
-            <View style={{
190
-                padding: 10,
191
-                flex: 1,
192
-            }}>
193
-                <View style={{
194
-                    width: '100%',
195
-                    height: 1,
196
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().agendaEmptyLine,
197
-                    marginTop: 'auto',
198
-                    marginBottom: 'auto',
199
-                }}/>
200
-            </View>
161
+            <Divider/>
201 162
         );
202 163
     }
203 164
 
@@ -303,28 +264,28 @@ export default class PlanningScreen extends React.Component<Props, State> {
303 264
                 // agenda theme
304 265
                 theme={{
305 266
                     backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
306
-                    calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
307
-                    textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
308
-                    selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
267
+                    calendarBackground: ThemeManager.getCurrentThemeVariables().background,
268
+                    textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
269
+                    selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary,
309 270
                     selectedDayTextColor: '#ffffff',
310
-                    todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
311
-                    dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
312
-                    textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
313
-                    dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
271
+                    todayTextColor: ThemeManager.getCurrentThemeVariables().primary,
272
+                    dayTextColor: ThemeManager.getCurrentThemeVariables().text,
273
+                    textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
274
+                    dotColor: ThemeManager.getCurrentThemeVariables().primary,
314 275
                     selectedDotColor: '#ffffff',
315 276
                     arrowColor: 'orange',
316
-                    monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
317
-                    indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
277
+                    monthTextColor: ThemeManager.getCurrentThemeVariables().primary,
278
+                    indicatorColor: ThemeManager.getCurrentThemeVariables().primary,
318 279
                     textDayFontWeight: '300',
319 280
                     textMonthFontWeight: 'bold',
320 281
                     textDayHeaderFontWeight: '300',
321 282
                     textDayFontSize: 16,
322 283
                     textMonthFontSize: 16,
323 284
                     textDayHeaderFontSize: 16,
324
-                    agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
325
-                    agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
326
-                    agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
327
-                    agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
285
+                    agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
286
+                    agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
287
+                    agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary,
288
+                    agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary,
328 289
                 }}
329 290
             />
330 291
         );

+ 36
- 48
screens/Proximo/ProximoAboutScreen.js View File

@@ -1,10 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, View} from 'react-native';
5
-import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
4
+import {Image, ScrollView, View} from 'react-native';
6 5
 import i18n from "i18n-js";
7
-import {MaterialCommunityIcons} from "@expo/vector-icons";
6
+import {Text, Card, List, Paragraph} from 'react-native-paper';
8 7
 
9 8
 type Props = {
10 9
     navigation: Object,
@@ -16,52 +15,41 @@ type Props = {
16 15
 export default class ProximoAboutScreen extends React.Component<Props> {
17 16
 
18 17
     render() {
19
-        const nav = this.props.navigation;
20 18
         return (
21
-            <Container>
22
-                <Content padder>
23
-                    <View style={{
24
-                        width: '100%',
25
-                        height: 100,
26
-                        marginTop: 20,
27
-                        marginBottom: 20,
28
-                        justifyContent: 'center',
29
-                        alignItems: 'center'
30
-                    }}>
31
-                        <Image
32
-                            source={require('../../assets/proximo-logo.png')}
33
-                            style={{flex: 1, resizeMode: "contain"}}
34
-                            resizeMode="contain"/>
35
-                    </View>
36
-                    <Text>{i18n.t('proximoScreen.description')}</Text>
37
-                    <Card>
38
-                        <CardItem>
39
-                            <Left>
40
-                                <MaterialCommunityIcons
41
-                                    name={'clock-outline'}
42
-                                    size={30}/>
43
-                                <H2>{i18n.t('proximoScreen.openingHours')}</H2>
44
-                            </Left>
45
-                        </CardItem>
46
-                        <CardItem>
47
-                            <Text>18h30 - 19h30</Text>
48
-                        </CardItem>
49
-                    </Card>
50
-                    <Card>
51
-                        <CardItem>
52
-                            <Left>
53
-                                <MaterialCommunityIcons
54
-                                    name={'cash'}
55
-                                    size={30}/>
56
-                                <H2>{i18n.t('proximoScreen.paymentMethods')}</H2>
57
-                            </Left>
58
-                        </CardItem>
59
-                        <CardItem>
60
-                            <Text>{i18n.t('proximoScreen.paymentMethodsDescription')}</Text>
61
-                        </CardItem>
62
-                    </Card>
63
-                </Content>
64
-            </Container>
19
+            <ScrollView style={{padding: 5}}>
20
+                <View style={{
21
+                    width: '100%',
22
+                    height: 100,
23
+                    marginTop: 20,
24
+                    marginBottom: 20,
25
+                    justifyContent: 'center',
26
+                    alignItems: 'center'
27
+                }}>
28
+                    <Image
29
+                        source={require('../../assets/proximo-logo.png')}
30
+                        style={{flex: 1, resizeMode: "contain"}}
31
+                        resizeMode="contain"/>
32
+                </View>
33
+                <Text>{i18n.t('proximoScreen.description')}</Text>
34
+                <Card style={{margin: 5}}>
35
+                    <Card.Title
36
+                        title={i18n.t('proximoScreen.openingHours')}
37
+                        left={props => <List.Icon {...props} icon={'clock-outline'}/>}
38
+                    />
39
+                    <Card.Content>
40
+                        <Paragraph>18h30 - 19h30</Paragraph>
41
+                    </Card.Content>
42
+                </Card>
43
+                <Card style={{margin: 5}}>
44
+                    <Card.Title
45
+                        title={i18n.t('proximoScreen.paymentMethods')}
46
+                        left={props => <List.Icon {...props} icon={'cash'}/>}
47
+                    />
48
+                    <Card.Content>
49
+                        <Paragraph>18{i18n.t('proximoScreen.paymentMethodsDescription')}</Paragraph>
50
+                    </Card.Content>
51
+                </Card>
52
+            </ScrollView>
65 53
         );
66 54
     }
67 55
 }

+ 51
- 94
screens/Proximo/ProximoListScreen.js View File

@@ -1,14 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
5
-import {FlatList, Image, Platform, View} from "react-native";
6
-import Touchable from 'react-native-platform-touchable';
7
-import Menu, {MenuItem} from 'react-native-material-menu';
4
+import {FlatList, Image, ScrollView, View} from "react-native";
8 5
 import i18n from "i18n-js";
9 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
10 7
 import ThemeManager from "../../utils/ThemeManager";
11 8
 import {Modalize} from 'react-native-modalize';
9
+import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper";
12 10
 
13 11
 const sortMode = {
14 12
     price: "0",
@@ -51,6 +49,7 @@ type State = {
51 49
     sortNameIcon: React.Node,
52 50
     modalCurrentDisplayItem: Object,
53 51
     currentlyDisplayedData: Array<Object>,
52
+    menuVisible: boolean,
54 53
 };
55 54
 
56 55
 /**
@@ -62,13 +61,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
62 61
     originalData: Array<Object>;
63 62
     shouldFocusSearchBar: boolean;
64 63
 
65
-    sortMenuRef: Menu;
66
-
67
-    onMenuRef: Function;
68 64
     onSearchStringChange: Function;
69 65
     onSelectSortModeName: Function;
70 66
     onSelectSortModePrice: Function;
71 67
     onSortMenuPress: Function;
68
+    onSortMenuDismiss: Function;
72 69
     renderItem: Function;
73 70
 
74 71
     constructor(props: any) {
@@ -83,24 +80,17 @@ export default class ProximoListScreen extends React.Component<Props, State> {
83 80
             sortPriceIcon: '',
84 81
             sortNameIcon: '',
85 82
             modalCurrentDisplayItem: {},
83
+            menuVisible: false,
86 84
         };
87 85
 
88
-        this.onMenuRef = this.onMenuRef.bind(this);
89 86
         this.onSearchStringChange = this.onSearchStringChange.bind(this);
90 87
         this.onSelectSortModeName = this.onSelectSortModeName.bind(this);
91 88
         this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
92 89
         this.onSortMenuPress = this.onSortMenuPress.bind(this);
90
+        this.onSortMenuDismiss = this.onSortMenuPress.bind(this);
93 91
         this.renderItem = this.renderItem.bind(this);
94 92
     }
95 93
 
96
-    /**
97
-     * Saves the reference to the sort menu for later use
98
-     *
99
-     * @param ref The menu reference
100
-     */
101
-    onMenuRef(ref: Menu) {
102
-        this.sortMenuRef = ref;
103
-    };
104 94
 
105 95
     /**
106 96
      * Sets the sort mode based on the one selected.
@@ -146,8 +136,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
146 136
                 break;
147 137
         }
148 138
         this.setupSortIcons(mode, isReverse);
149
-        if (this.sortMenuRef !== undefined)
150
-            this.sortMenuRef.hide();
151 139
     }
152 140
 
153 141
     /**
@@ -165,23 +153,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
165 153
 
166 154
     getSearchBar() {
167 155
         return (
168
-            <Body style={{width: '100%'}}>
169
-                <Item
170
-                    style={{
171
-                        width: '100%',
172
-                        marginBottom: 7
173
-                    }}>
174
-                    <MaterialCommunityIcons
175
-                        name={'magnify'}
176
-                        size={26}
177
-                        color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
178
-                    <Input
179
-                        ref="searchInput"
180
-                        placeholder={i18n.t('proximoScreen.search')}
181
-                        placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
182
-                        onChangeText={this.onSearchStringChange}/>
183
-                </Item>
184
-            </Body>
156
+            <Searchbar
157
+                placeholder={i18n.t('proximoScreen.search')}
158
+                onChangeText={this.onSearchStringChange}
159
+            />
185 160
         );
186 161
     }
187 162
 
@@ -194,11 +169,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
194 169
     getStockColor(availableStock: number) {
195 170
         let color: string;
196 171
         if (availableStock > 3)
197
-            color = ThemeManager.getCurrentThemeVariables().brandSuccess;
172
+            color = ThemeManager.getCurrentThemeVariables().success;
198 173
         else if (availableStock > 0)
199
-            color = ThemeManager.getCurrentThemeVariables().brandWarning;
174
+            color = ThemeManager.getCurrentThemeVariables().warning;
200 175
         else
201
-            color = ThemeManager.getCurrentThemeVariables().brandDanger;
176
+            color = ThemeManager.getCurrentThemeVariables().danger;
202 177
         return color;
203 178
     }
204 179
 
@@ -212,12 +187,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
212 187
         const downSortIcon =
213 188
             <MaterialCommunityIcons
214 189
                 name={'sort-descending'}
215
-                color={'#000'}
216 190
                 size={26}/>;
217 191
         const upSortIcon =
218 192
             <MaterialCommunityIcons
219 193
                 name={'sort-ascending'}
220
-                color={'#000'}
221 194
                 size={26}/>;
222 195
         switch (mode) {
223 196
             case sortMode.price:
@@ -274,27 +247,27 @@ export default class ProximoListScreen extends React.Component<Props, State> {
274 247
                 flex: 1,
275 248
                 padding: 20
276 249
             }}>
277
-                <H1>{this.state.modalCurrentDisplayItem.name}</H1>
250
+                <Title>{this.state.modalCurrentDisplayItem.name}</Title>
278 251
                 <View style={{
279 252
                     flexDirection: 'row',
280 253
                     width: '100%',
281 254
                     marginTop: 10,
282 255
                 }}>
283
-                    <H3 style={{
256
+                    <Subheading style={{
284 257
                         color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
285 258
                     }}>
286 259
                         {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
287
-                    </H3>
288
-                    <H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
260
+                    </Subheading>
261
+                    <Subheading style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</Subheading>
289 262
                 </View>
290 263
 
291
-                <Content>
264
+                <ScrollView>
292 265
                     <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
293 266
                         <Image style={{flex: 1, resizeMode: "contain"}}
294 267
                                source={{uri: this.state.modalCurrentDisplayItem.image}}/>
295 268
                     </View>
296 269
                     <Text>{this.state.modalCurrentDisplayItem.description}</Text>
297
-                </Content>
270
+                </ScrollView>
298 271
             </View>
299 272
         );
300 273
     }
@@ -317,65 +290,50 @@ export default class ProximoListScreen extends React.Component<Props, State> {
317 290
     }
318 291
 
319 292
     onSortMenuPress() {
320
-        this.sortMenuRef.show();
293
+        this.setState({menuVisible: true});
294
+        console.log('pressed');
321 295
     }
322 296
 
297
+    onSortMenuDismiss() {
298
+        this.setState({menuVisible: false});
299
+    }
323 300
 
324 301
     getSortMenu() {
325 302
         return (
326 303
             <Menu
327
-                ref={this.onMenuRef}
328
-                button={
329
-                    <Touchable
330
-                        style={{padding: 6, marginRight: 10}}
331
-                        onPress={this.onSortMenuPress}>
332
-                        <MaterialCommunityIcons
333
-                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
334
-                            name={'sort'}
335
-                            size={26}/>
336
-                    </Touchable>
304
+                visible={this.state.menuVisible}
305
+                onDismiss={this.onSortMenuDismiss}
306
+                anchor={
307
+                    <IconButton
308
+                        icon="sort"
309
+                        color={ThemeManager.getCurrentThemeVariables().text}
310
+                        size={26}
311
+                        onPress={this.onSortMenuPress}
312
+                    />
337 313
                 }
338 314
             >
339
-                <MenuItem
340
-                    onPress={this.onSelectSortModeName}>
341
-                    {this.state.sortNameIcon}
342
-                    {i18n.t('proximoScreen.sortName')}
343
-                </MenuItem>
344
-                <MenuItem
345
-                    onPress={this.onSelectSortModePrice}>
346
-                    {this.state.sortPriceIcon}
347
-                    {i18n.t('proximoScreen.sortPrice')}
348
-                </MenuItem>
315
+                <Menu.Item onPress={this.onSelectSortModeName} title={i18n.t('proximoScreen.sortName')}/>
316
+                <Divider/>
317
+                <Menu.Item onPress={this.onSelectSortModePrice} title={i18n.t('proximoScreen.sortPrice')}/>
349 318
             </Menu>
350 319
         );
351 320
     }
352 321
 
353 322
     renderItem({item}: Object) {
354
-        const onListItemPress = this.onListItemPress.bind(this, item);
355
-        return (<ListItem
356
-            thumbnail
357
-            onPress={onListItemPress}
358
-        >
359
-            <Left>
360
-                <Thumbnail square source={{uri: item.image}}/>
361
-            </Left>
362
-            <Body>
363
-                <Text style={{marginLeft: 20}}>
364
-                    {item.name}
365
-                </Text>
366
-                <Text note style={{
367
-                    marginLeft: 20,
368
-                    color: this.getStockColor(parseInt(item.quantity))
369
-                }}>
370
-                    {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
371
-                </Text>
372
-            </Body>
373
-            <Right>
374
-                <Text style={{fontWeight: "bold"}}>
375
-                    {item.price}€
376
-                </Text>
377
-            </Right>
378
-        </ListItem>);
323
+        const onPress = this.onListItemPress.bind(this, item);
324
+        return (
325
+            <List.Item
326
+                title={item.name}
327
+                description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
328
+                descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
329
+                onPress={onPress}
330
+                left={props => <Avatar.Image size={64} source={{uri: item.image}}/>}
331
+                right={props =>
332
+                    <Text style={{fontWeight: "bold"}}>
333
+                        {item.price}€
334
+                    </Text>}
335
+            />
336
+        );
379 337
     }
380 338
 
381 339
     keyExtractor(item: Object) {
@@ -384,12 +342,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
384 342
 
385 343
     render() {
386 344
         // console.log("rendering ProximoListScreen");
387
-        const nav = this.props.navigation;
388 345
         return (
389 346
             <View>
390 347
                 <Modalize ref={this.modalRef}
391 348
                           adjustToContentHeight
392
-                          modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
349
+                          modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}>
393 350
                     {this.getModalContent()}
394 351
                 </Modalize>
395 352
                 <FlatList

+ 24
- 47
screens/Proximo/ProximoMainScreen.js View File

@@ -1,13 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Platform, View} from 'react-native'
5
-import {Body, Left, ListItem, Right, Text} from 'native-base';
4
+import {View} from 'react-native'
6 5
 import i18n from "i18n-js";
7
-import {MaterialCommunityIcons} from "@expo/vector-icons";
8 6
 import ThemeManager from "../../utils/ThemeManager";
9
-import Touchable from "react-native-platform-touchable";
10 7
 import WebSectionList from "../../components/WebSectionList";
8
+import {IconButton, List} from 'react-native-paper';
11 9
 
12 10
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
13 11
 
@@ -157,24 +155,19 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
157 155
             <View
158 156
                 style={{
159 157
                     flexDirection: 'row',
160
-                    marginRight: 10,
161 158
                 }}>
162
-                <Touchable
163
-                    style={{padding: 6}}
164
-                    onPress={this.onPressSearchBtn}>
165
-                    <MaterialCommunityIcons
166
-                        name="magnify"
167
-                        size={26}
168
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
169
-                </Touchable>
170
-                <Touchable
171
-                    style={{padding: 6}}
172
-                    onPress={this.onPressAboutBtn}>
173
-                    <MaterialCommunityIcons
174
-                        name="information"
175
-                        size={26}
176
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
177
-                </Touchable>
159
+                <IconButton
160
+                    icon="magnify"
161
+                    size={26}
162
+                    color={ThemeManager.getCurrentThemeVariables().text}
163
+                    onPress={this.onPressSearchBtn}
164
+                />
165
+                <IconButton
166
+                    icon="information"
167
+                    size={26}
168
+                    color={ThemeManager.getCurrentThemeVariables().text}
169
+                    onPress={this.onPressAboutBtn}
170
+                />
178 171
             </View>
179 172
         );
180 173
     }
@@ -185,36 +178,20 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
185 178
             shouldFocusSearchBar: false,
186 179
             data: item,
187 180
         };
181
+        const subtitle = item.data.length + " " + (item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article'));
188 182
         const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend);
189 183
         if (item.data.length > 0) {
190 184
             return (
191
-                <ListItem
192
-                    button
193
-                    thumbnail
185
+                <List.Item
186
+                    title={item.type.name}
187
+                    description={subtitle}
194 188
                     onPress={onPress}
195
-                >
196
-                    <Left>
197
-                        <MaterialCommunityIcons
198
-                            name={item.type.icon}
199
-                            size={30}
200
-                            color={ThemeManager.getCurrentThemeVariables().brandPrimary}
201
-                        />
202
-                    </Left>
203
-                    <Body>
204
-                        <Text>
205
-                            {item.type.name}
206
-                        </Text>
207
-                        <Text note>
208
-                            {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
209
-                        </Text>
210
-                    </Body>
211
-                    <Right>
212
-                        <MaterialCommunityIcons
213
-                            icon="chevron-right"
214
-                            size={26}
215
-                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
216
-                    </Right>
217
-                </ListItem>
189
+                    left={props => <List.Icon
190
+                        {...props}
191
+                        icon={item.type.icon}
192
+                        color={ThemeManager.getCurrentThemeVariables().primary}/>}
193
+                    right={props => <List.Icon {...props} icon={'chevron-right'}/>}
194
+                />
218 195
             );
219 196
         } else
220 197
             return <View/>;

+ 63
- 127
screens/Proxiwash/ProxiwashAboutScreen.js View File

@@ -1,11 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, View} from 'react-native';
5
-import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
4
+import {Image, View, ScrollView} from 'react-native';
6 5
 import i18n from "i18n-js";
7
-import {MaterialCommunityIcons} from "@expo/vector-icons";
8
-import ThemeManager from "../../utils/ThemeManager";
6
+import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
9 7
 
10 8
 type Props = {
11 9
     navigation: Object,
@@ -18,129 +16,67 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
18 16
 
19 17
     render() {
20 18
         return (
21
-            <Tabs>
22
-                <Tab
23
-                    heading={
24
-                        <TabHeading>
25
-                            <MaterialCommunityIcons
26
-                                name={'information'}
27
-                                color={ThemeManager.getCurrentThemeVariables().tabIconColor}
28
-                                size={20}
29
-                            />
30
-                            <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
31
-                        </TabHeading>
32
-                    }
33
-                    key={1}
34
-                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
35
-                    <Content padder>
36
-                        <View style={{
37
-                            width: '100%',
38
-                            height: 100,
39
-                            marginTop: 20,
40
-                            marginBottom: 20,
41
-                            justifyContent: 'center',
42
-                            alignItems: 'center'
43
-                        }}>
44
-                            <Image
45
-                                source={require('../../assets/proxiwash-logo.png')}
46
-                                style={{flex: 1, resizeMode: "contain"}}
47
-                                resizeMode="contain"/>
48
-                        </View>
49
-                        <Text>{i18n.t('proxiwashScreen.description')}</Text>
50
-                        <Card>
51
-                            <CardItem>
52
-                                <Left>
53
-                                    <MaterialCommunityIcons
54
-                                        name={'tumble-dryer'}
55
-                                        size={26}/>
56
-                                    <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
57
-                                </Left>
58
-                            </CardItem>
59
-                            <CardItem>
60
-                                <Body>
61
-                                    <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
62
-                                    <Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text>
63
-                                </Body>
64
-                            </CardItem>
65
-                            <CardItem>
66
-                                <Body>
67
-                                    <H3>{i18n.t('proxiwashScreen.tips')}</H3>
68
-                                    <Text>{i18n.t('proxiwashScreen.dryerTips')}</Text>
69
-                                </Body>
70
-                            </CardItem>
71
-                        </Card>
72
-                        <Card>
73
-                            <CardItem>
74
-                                <Left>
75
-                                    <MaterialCommunityIcons
76
-                                        name={'washing-machine'}
77
-                                        size={26}/>
78
-                                    <H2>{i18n.t('proxiwashScreen.washer')}</H2>
79
-                                </Left>
80
-                            </CardItem>
81
-                            <CardItem>
82
-                                <Body>
83
-                                    <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
84
-                                    <Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
85
-                                </Body>
86
-                            </CardItem>
87
-                            <CardItem>
88
-                                <Body>
89
-                                    <H3>{i18n.t('proxiwashScreen.tips')}</H3>
90
-                                    <Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
91
-                                </Body>
92
-                            </CardItem>
93
-                        </Card>
94
-                    </Content>
95
-                </Tab>
96
-                <Tab
97
-                    heading={
98
-                        <TabHeading>
99
-                            <MaterialCommunityIcons
100
-                                name={'cash'}
101
-                                color={ThemeManager.getCurrentThemeVariables().tabIconColor}
102
-                                size={20}
103
-                            />
104
-                            <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
105
-                        </TabHeading>
106
-                    }
107
-                    key={2}
108
-                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
109
-                    <Content padder>
110
-                        <Card>
111
-                            <CardItem>
112
-                                <Left>
113
-                                    <MaterialCommunityIcons
114
-                                        name={'coins'}
115
-                                        size={26}/>
116
-                                    <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
117
-                                </Left>
118
-                            </CardItem>
119
-                            <CardItem>
120
-                                <Body>
121
-                                    <Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
122
-                                    <Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
123
-                                </Body>
124
-                            </CardItem>
125
-                        </Card>
126
-                        <Card>
127
-                            <CardItem>
128
-                                <Left>
129
-                                    <MaterialCommunityIcons
130
-                                        name={'cash'}
131
-                                        size={26}/>
132
-                                    <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
133
-                                </Left>
134
-                            </CardItem>
135
-                            <CardItem>
136
-                                <Body>
137
-                                    <Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
138
-                                </Body>
139
-                            </CardItem>
140
-                        </Card>
141
-                    </Content>
142
-                </Tab>
143
-            </Tabs>
19
+            <ScrollView style={{padding: 5}}>
20
+                <View style={{
21
+                    width: '100%',
22
+                    height: 100,
23
+                    marginTop: 20,
24
+                    marginBottom: 20,
25
+                    justifyContent: 'center',
26
+                    alignItems: 'center'
27
+                }}>
28
+                    <Image
29
+                        source={require('../../assets/proxiwash-logo.png')}
30
+                        style={{flex: 1, resizeMode: "contain"}}
31
+                        resizeMode="contain"/>
32
+                </View>
33
+                <Text>{i18n.t('proxiwashScreen.description')}</Text>
34
+                <Card style={{margin: 5}}>
35
+                    <Card.Title
36
+                        title={i18n.t('proxiwashScreen.dryer')}
37
+                        left={props => <List.Icon {...props} icon={'tumble-dryer'}/>}
38
+                    />
39
+                    <Card.Content>
40
+                        <Title>{i18n.t('proxiwashScreen.procedure')}</Title>
41
+                        <Paragraph>{i18n.t('proxiwashScreen.dryerProcedure')}</Paragraph>
42
+                        <Title>{i18n.t('proxiwashScreen.tips')}</Title>
43
+                        <Paragraph>{i18n.t('proxiwashScreen.dryerTips')}</Paragraph>
44
+                    </Card.Content>
45
+                </Card>
46
+
47
+                <Card style={{margin: 5}}>
48
+                    <Card.Title
49
+                        title={i18n.t('proxiwashScreen.washer')}
50
+                        left={props => <List.Icon {...props} icon={'washing-machine'}/>}
51
+                    />
52
+                    <Card.Content>
53
+                        <Title>{i18n.t('proxiwashScreen.procedure')}</Title>
54
+                        <Paragraph>{i18n.t('proxiwashScreen.washerProcedure')}</Paragraph>
55
+                        <Title>{i18n.t('proxiwashScreen.tips')}</Title>
56
+                        <Paragraph>{i18n.t('proxiwashScreen.washerTips')}</Paragraph>
57
+                    </Card.Content>
58
+                </Card>
59
+
60
+                <Card style={{margin: 5}}>
61
+                    <Card.Title
62
+                        title={i18n.t('proxiwashScreen.tariffs')}
63
+                        left={props => <List.Icon {...props} icon={'coins'}/>}
64
+                    />
65
+                    <Card.Content>
66
+                        <Paragraph>{i18n.t('proxiwashScreen.washersTariff')}</Paragraph>
67
+                        <Paragraph>{i18n.t('proxiwashScreen.dryersTariff')}</Paragraph>
68
+                    </Card.Content>
69
+                </Card>
70
+                <Card style={{margin: 5}}>
71
+                    <Card.Title
72
+                        title={i18n.t('proxiwashScreen.paymentMethods')}
73
+                        left={props => <List.Icon {...props} icon={'cash'}/>}
74
+                    />
75
+                    <Card.Content>
76
+                        <Paragraph>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Paragraph>
77
+                    </Card.Content>
78
+                </Card>
79
+            </ScrollView>
144 80
         );
145 81
     }
146 82
 }

+ 51
- 82
screens/Proxiwash/ProxiwashScreen.js View File

@@ -2,16 +2,13 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Alert, Platform, View} from 'react-native';
5
-import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
6 5
 import ThemeManager from '../../utils/ThemeManager';
7 6
 import i18n from "i18n-js";
8
-import {MaterialCommunityIcons} from "@expo/vector-icons";
9 7
 import WebSectionList from "../../components/WebSectionList";
10 8
 import NotificationsManager from "../../utils/NotificationsManager";
11
-import PlatformTouchable from "react-native-platform-touchable";
12
-import Touchable from "react-native-platform-touchable";
13 9
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
14 10
 import * as Expo from "expo";
11
+import {Divider, IconButton, List, Text} from 'react-native-paper';
15 12
 
16 13
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
17 14
 
@@ -288,17 +285,12 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
288 285
 
289 286
     getRightButton() {
290 287
         return (
291
-            <Touchable
292
-                style={{
293
-                    padding: 6,
294
-                    marginRight: 10
295
-                }}
296
-                onPress={this.onAboutPress}>
297
-                <MaterialCommunityIcons
298
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
299
-                    name="information"
300
-                    size={26}/>
301
-            </Touchable>
288
+            <IconButton
289
+                icon="information"
290
+                size={26}
291
+                color={ThemeManager.getCurrentThemeVariables().text}
292
+                onPress={this.onAboutPress}
293
+            />
302 294
         );
303 295
     }
304 296
 
@@ -327,75 +319,52 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
327 319
         let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
328 320
         let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
329 321
         const onPress = this.showAlert.bind(this, machineName, item, isDryer);
322
+        let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0;
323
+        if (MACHINE_STATES[item.state] === '0')
324
+            width = '100%';
330 325
         return (
331
-            <Card style={{
332
-                flex: 0,
333
-                height: 64,
334
-                marginLeft: 10,
335
-                marginRight: 10
336
-            }}>
337
-
338
-                <CardItem
326
+            <View>
327
+                <View style={{
328
+                    height: '100%',
329
+                    position: 'absolute',
330
+                    left: 0,
331
+                    width: width,
332
+                    backgroundColor: stateColors[MACHINE_STATES[item.state]]
333
+                }}/>
334
+                <List.Item
335
+                    title={machineName}
336
+                    description={isMachineRunning ? item.startTime + '/' + item.endTime : ''}
337
+                    onPress={onPress}
339 338
                     style={{
340
-                        backgroundColor: stateColors[MACHINE_STATES[item.state]],
341
-                        paddingRight: 0,
342
-                        paddingLeft: 0,
343
-                        height: '100%',
339
+                        backgroundColor: 'transparent',
340
+                        height: 64
344 341
                     }}
345
-                >
346
-                    <View style={{
347
-                        height: 64,
348
-                        position: 'absolute',
349
-                        right: 0,
350
-                        width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
351
-                        backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor
352
-                    }}/>
353
-                    <PlatformTouchable
354
-                        onPress={onPress}
355
-                        style={{
356
-                            height: 64,
357
-                            position: 'absolute',
358
-                            zIndex: 10, // Make sure the button is above the text
359
-                            right: 0,
360
-                            width: '100%'
361
-                        }}
362
-                    >
363
-                        <View/>
364
-                    </PlatformTouchable>
365
-                    <Left style={{marginLeft: 10}}>
366
-                        <MaterialCommunityIcons
367
-                            name={isDryer ? 'tumble-dryer' : 'washing-machine'}
368
-                            size={30}
369
-                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
370
-                        />
371
-                        <Body>
372
-                            <Text>
373
-                                {machineName + ' '}
374
-                                {this.isMachineWatched(item.number) ?
375
-                                    <MaterialCommunityIcons
376
-                                        name='bell-ring'
377
-                                        color={ThemeManager.getCurrentThemeVariables().brandPrimary}
378
-                                        size={20}
379
-                                    /> : ''}
380
-                            </Text>
381
-                            <Text note>
382
-                                {isMachineRunning ? item.startTime + '/' + item.endTime : ''}
383
-                            </Text>
384
-                        </Body>
385
-                    </Left>
386
-                    <Right style={{marginRight: 10}}>
387
-                        <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
388
-                            {fontWeight: 'bold'} : {}}
389
-                        >
390
-                            {stateStrings[MACHINE_STATES[item.state]]}
391
-                        </Text>
392
-                        <MaterialCommunityIcons
393
-                            name={stateIcons[MACHINE_STATES[item.state]]}
394
-                            size={25}
395
-                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
396
-                        />
397
-                    </Right>
398
-                </CardItem>
399
-            </Card>);
342
+                    left={props => this.isMachineWatched(item.number) ?
343
+                        <List.Icon {...props} icon={'bell-ring'}
344
+                                   color={ThemeManager.getCurrentThemeVariables().primary}/> :
345
+                        <List.Icon {...props} icon={isDryer ? 'tumble-dryer' : 'washing-machine'}/>}
346
+                    right={props => (
347
+                        <View style={{flexDirection: 'row'}}>
348
+                            <View style={{
349
+                                justifyContent: 'center',
350
+                            }}>
351
+                                <Text style={
352
+                                    MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
353
+                                        {fontWeight: 'bold',} : {}}
354
+                                >
355
+                                    {stateStrings[MACHINE_STATES[item.state]]}
356
+                                </Text>
357
+                            </View>
358
+
359
+                            <List.Icon
360
+                                {...props}
361
+                                color={ThemeManager.getCurrentThemeVariables().text}
362
+                                icon={stateIcons[MACHINE_STATES[item.state]]}
363
+                            />
364
+                        </View>)}
365
+                />
366
+                <Divider/>
367
+            </View>
368
+        );
400 369
     }
401 370
 }

+ 12
- 22
screens/SelfMenuScreen.js View File

@@ -2,10 +2,10 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5
-import {Card, CardItem, H2, H3, Text} from 'native-base';
6 5
 import ThemeManager from "../utils/ThemeManager";
7 6
 import i18n from "i18n-js";
8 7
 import WebSectionList from "../components/WebSectionList";
8
+import {Card, Text, Title} from 'react-native-paper';
9 9
 
10 10
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
11 11
 
@@ -102,11 +102,11 @@ export default class SelfMenuScreen extends React.Component<Props> {
102 102
                 marginBottom: 10,
103 103
                 borderRadius: 50
104 104
             }}>
105
-                <H2 style={{
105
+                <Title style={{
106 106
                     textAlign: 'center',
107 107
                     marginTop: 10,
108 108
                     marginBottom: 10
109
-                }}>{section.title}</H2>
109
+                }}>{section.title}</Title>
110 110
             </Card>
111 111
         );
112 112
     }
@@ -115,42 +115,32 @@ export default class SelfMenuScreen extends React.Component<Props> {
115 115
         return (
116 116
             <Card style={{
117 117
                 flex: 0,
118
-                marginLeft: 20,
119
-                marginRight: 20
118
+                margin: 10,
120 119
             }}>
121
-                <CardItem style={{
122
-                    paddingBottom: 0,
123
-                    flexDirection: 'column'
124
-                }}>
125
-                    <H3 style={{
126
-                        marginTop: 10,
127
-                        marginBottom: 0,
128
-                        color: ThemeManager.getCurrentThemeVariables().listNoteColor
129
-                    }}>{item.name}</H3>
120
+                    <Card.Title
121
+                        title={item.name}
122
+                        titleStyle={{textAlign: 'center'}}/>
130 123
                     <View style={{
131 124
                         width: '80%',
132 125
                         marginLeft: 'auto',
133 126
                         marginRight: 'auto',
134 127
                         borderBottomWidth: 1,
135
-                        borderBottomColor: ThemeManager.getCurrentThemeVariables().listBorderColor,
128
+                        borderBottomColor: ThemeManager.getCurrentThemeVariables().primary,
136 129
                         marginTop: 10,
137 130
                         marginBottom: 5,
138 131
                     }}/>
139
-                </CardItem>
140
-                <CardItem style={{
141
-                    flexDirection: 'column',
142
-                    paddingTop: 0,
143
-                }}>
132
+                <Card.Content>
144 133
                     {item.dishes.map((object) =>
145 134
                         <View>
146 135
                             {object.name !== "" ?
147 136
                                 <Text style={{
148 137
                                     marginTop: 5,
149
-                                    marginBottom: 5
138
+                                    marginBottom: 5,
139
+                                    textAlign: 'center'
150 140
                                 }}>{this.formatName(object.name)}</Text>
151 141
                                 : <View/>}
152 142
                         </View>)}
153
-                </CardItem>
143
+                </Card.Content>
154 144
             </Card>
155 145
         );
156 146
     }

+ 68
- 101
screens/SettingsScreen.js View File

@@ -1,13 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base";
4
+import {ScrollView, View} from "react-native";
5 5
 import ThemeManager from '../utils/ThemeManager';
6 6
 import i18n from "i18n-js";
7
-import {NavigationActions, StackActions} from "@react-navigation/native";
8
-import {MaterialCommunityIcons} from "@expo/vector-icons";
9 7
 import AsyncStorageManager from "../utils/AsyncStorageManager";
10 8
 import NotificationsManager from "../utils/NotificationsManager";
9
+import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper';
11 10
 
12 11
 type Props = {
13 12
     navigation: Object,
@@ -51,28 +50,25 @@ export default class SettingsScreen extends React.Component<Props, State> {
51 50
      */
52 51
     static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) {
53 52
         return (
54
-            <ListItem
55
-                thumbnail
53
+            <List.Item
54
+                title={title}
55
+                description={subtitle}
56
+                left={props => <List.Icon {...props} icon={icon}/>}
57
+                right={props => control}
58
+            />
59
+        );
60
+    }
61
+
62
+    getRadioButton(onPress: Function, value: string, label: string) {
63
+        return (
64
+            <TouchableRipple
65
+                onPress={onPress}
56 66
             >
57
-                <Left>
58
-                    <MaterialCommunityIcons
59
-                        name={icon}
60
-                        size={26}
61
-                        color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
62
-                </Left>
63
-                <Body>
64
-                    <Text>
65
-                        {title}
66
-                    </Text>
67
-                    <Text note>
68
-                        {subtitle}
69
-                    </Text>
70
-                </Body>
71
-
72
-                <Right>
73
-                    {control}
74
-                </Right>
75
-            </ListItem>
67
+                <View pointerEvents="none">
68
+                    <Text>{label}</Text>
69
+                    <RadioButton value={value} />
70
+                </View>
71
+            </TouchableRipple>
76 72
         );
77 73
     }
78 74
 
@@ -113,19 +109,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
113 109
      */
114 110
     getProxiwashNotifPicker() {
115 111
         return (
116
-            <Picker
117
-                note
118
-                mode="dropdown"
119
-                style={{width: 120}}
120
-                selectedValue={this.state.proxiwashNotifPickerSelected}
112
+            <RadioButton.Group
121 113
                 onValueChange={this.onProxiwashNotifPickerValueChange}
114
+                value={this.state.proxiwashNotifPickerSelected}
122 115
             >
123
-                <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
124
-                <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
125
-                <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/>
126
-                <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/>
127
-                <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/>
128
-            </Picker>
116
+                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
117
+                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
118
+                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/>
119
+                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/>
120
+                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/>
121
+            </RadioButton.Group>
129 122
         );
130 123
     }
131 124
 
@@ -136,19 +129,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
136 129
      */
137 130
     getStartScreenPicker() {
138 131
         return (
139
-            <Picker
140
-                note
141
-                mode="dropdown"
142
-                style={{width: 120}}
143
-                selectedValue={this.state.startScreenPickerSelected}
132
+            <RadioButton.Group
144 133
                 onValueChange={this.onStartScreenPickerValueChange}
134
+                value={this.state.startScreenPickerSelected}
145 135
             >
146
-                <Picker.Item label={i18n.t('screens.home')} value="Home"/>
147
-                <Picker.Item label={i18n.t('screens.planning')} value="Planning"/>
148
-                <Picker.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
149
-                <Picker.Item label={i18n.t('screens.proximo')} value="Proximo"/>
150
-                <Picker.Item label={'Planex'} value="Planex"/>
151
-            </Picker>
136
+                <RadioButton.Item label={i18n.t('screens.home')} value="Home" style={{color: "#fff"}}/>
137
+                <RadioButton.Item label={i18n.t('screens.planning')} value="Planning"/>
138
+                <RadioButton.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
139
+                <RadioButton.Item label={i18n.t('screens.proximo')} value="Proximo"/>
140
+                <RadioButton.Item label={'Planex'} value="Planex"/>
141
+            </RadioButton.Group>
152 142
         );
153 143
     }
154 144
 
@@ -158,19 +148,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
158 148
     onToggleNightMode() {
159 149
         ThemeManager.getInstance().setNightMode(!this.state.nightMode);
160 150
         this.setState({nightMode: !this.state.nightMode});
161
-        this.resetStack();
162
-    }
163
-
164
-    /**
165
-     * Reset react navigation stack to allow for a theme reset
166
-     */
167
-    resetStack() {
168
-        const resetAction = StackActions.reset({
169
-            index: 0,
170
-            key: null,
171
-            actions: [NavigationActions.navigate({routeName: 'Main'})],
172
-        });
173
-        this.props.navigation.dispatch(resetAction);
174 151
     }
175 152
 
176 153
     /**
@@ -184,57 +161,47 @@ export default class SettingsScreen extends React.Component<Props, State> {
184 161
      */
185 162
     getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) {
186 163
         return (
187
-            <ListItem
188
-                button
189
-                thumbnail
190
-                onPress={onPressCallback}
191
-            >
192
-                <Left>
193
-                    <MaterialCommunityIcons
194
-                        name={icon}
195
-                        size={26}
196
-                        color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
197
-                </Left>
198
-                <Body>
199
-                    <Text>
200
-                        {title}
201
-                    </Text>
202
-                    <Text note>
203
-                        {subtitle}
204
-                    </Text>
205
-                </Body>
206
-                <Right>
207
-                    <CheckBox
208
-                        checked={this.state.nightMode}
209
-                        onPress={onPressCallback}
210
-                        style={{marginRight: 20}}/>
211
-                </Right>
212
-            </ListItem>
164
+            <List.Item
165
+                title={title}
166
+                description={subtitle}
167
+                left={props => <List.Icon {...props} icon={icon}/>}
168
+                right={props =>
169
+                    <Switch
170
+                        value={this.state.nightMode}
171
+                        onValueChange={onPressCallback}
172
+                    />}
173
+            />
213 174
         );
214 175
     }
215 176
 
216 177
     render() {
217 178
         return (
218
-            <Content padder>
219
-                <Card>
220
-                    <CardItem header>
221
-                        <Text>{i18n.t('settingsScreen.generalCard')}</Text>
222
-                    </CardItem>
223
-                    <List>
179
+            <ScrollView>
180
+                <Card style={{margin: 5}}>
181
+                    <Card.Title title={i18n.t('settingsScreen.generalCard')}/>
182
+                    <List.Section>
224 183
                         {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
225
-                        {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
226
-                    </List>
184
+                        <List.Accordion
185
+                            title={i18n.t('settingsScreen.startScreen')}
186
+                            description={i18n.t('settingsScreen.startScreenSub')}
187
+                            left={props => <List.Icon {...props} icon="power" />}
188
+                        >
189
+                            {this.getStartScreenPicker()}
190
+                        </List.Accordion>
191
+                    </List.Section>
227 192
                 </Card>
228
-                <Card>
229
-                    <CardItem header>
230
-                        <Text>Proxiwash</Text>
231
-                    </CardItem>
232
-                    <List>
233
-                        {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))}
234
-                    </List>
193
+                <Card style={{margin: 5}}>
194
+                    <Card.Title title="Proxiwash"/>
195
+                    <List.Accordion
196
+                        title={i18n.t('settingsScreen.proxiwashNotifReminder')}
197
+                        description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
198
+                        left={props => <List.Icon {...props} icon="washing-machine" />}
199
+                    >
200
+                        {this.getProxiwashNotifPicker()}
201
+                    </List.Accordion>
235 202
                 </Card>
236
-            </Content>
237 203
 
204
+            </ScrollView>
238 205
         );
239 206
     }
240 207
 }

+ 97
- 27
utils/ThemeManager.js View File

@@ -1,10 +1,8 @@
1 1
 // @flow
2 2
 
3
-import platform from '../native-base-theme/variables/platform';
4
-import platformDark from '../native-base-theme/variables/platformDark';
5
-import getTheme from '../native-base-theme/components';
6 3
 import AsyncStorageManager from "./AsyncStorageManager";
7
-
4
+// import {DarkTheme as NavDarkTheme, DefaultTheme as NavDefaultTheme} from '@react-navigation/native';
5
+import {DarkTheme, DefaultTheme} from 'react-native-paper';
8 6
 /**
9 7
  * Singleton class used to manage themes
10 8
  */
@@ -17,6 +15,78 @@ export default class ThemeManager {
17 15
         this.updateThemeCallback = null;
18 16
     }
19 17
 
18
+    static getWhiteTheme() {
19
+        return {
20
+            ...DefaultTheme,
21
+            colors: {
22
+                ...DefaultTheme.colors,
23
+                primary: '#be1522',
24
+                accent: '#be1522',
25
+                card: "rgb(255, 255, 255)",
26
+                dividerBackground: '#e2e2e2',
27
+                textDisabled: '#c1c1c1',
28
+                icon: '#5d5d5d',
29
+                success: "#5cb85c",
30
+                warning: "#f0ad4e",
31
+                danger: "#d9534f",
32
+
33
+                // Calendar/Agenda
34
+                agendaBackgroundColor: '#f3f3f4',
35
+                agendaDayTextColor: '#636363',
36
+
37
+                // PROXIWASH
38
+                proxiwashFinishedColor: "rgba(54,165,22,0.31)",
39
+                proxiwashReadyColor: "transparent",
40
+                proxiwashRunningColor: "rgba(94,104,241,0.3)",
41
+                proxiwashBrokenColor: "rgba(162,162,162,0.31)",
42
+                proxiwashErrorColor: "rgba(204,7,0,0.31)",
43
+
44
+                // Screens
45
+                planningColor: '#d9b10a',
46
+                proximoColor: '#ec5904',
47
+                proxiwashColor: '#1fa5ee',
48
+                menuColor: '#e91314',
49
+                tutorinsaColor: '#f93943',
50
+            },
51
+        };
52
+    }
53
+
54
+    static getDarkTheme() {
55
+        return {
56
+            ...DarkTheme,
57
+            colors: {
58
+                ...DarkTheme.colors,
59
+                primary: '#be1522',
60
+                accent: '#be1522',
61
+                card: "rgb(18, 18, 18)",
62
+                dividerBackground: '#222222',
63
+                textDisabled: '#5b5b5b',
64
+                icon: '#b3b3b3',
65
+                success: "#5cb85c",
66
+                warning: "#f0ad4e",
67
+                danger: "#d9534f",
68
+
69
+                // Calendar/Agenda
70
+                agendaBackgroundColor: '#171717',
71
+                agendaDayTextColor: '#6d6d6d',
72
+
73
+                // PROXIWASH
74
+                proxiwashFinishedColor: "rgba(17,149,32,0.53)",
75
+                proxiwashReadyColor: "transparent",
76
+                proxiwashRunningColor: "rgba(29,59,175,0.65)",
77
+                proxiwashBrokenColor: "#000000",
78
+                proxiwashErrorColor: "rgba(213,8,0,0.57)",
79
+
80
+                // Screens
81
+                planningColor: '#d99e09',
82
+                proximoColor: '#ec5904',
83
+                proxiwashColor: '#1fa5ee',
84
+                menuColor: '#b81213',
85
+                tutorinsaColor: '#f93943',
86
+            },
87
+        };
88
+    }
89
+
20 90
     /**
21 91
      * Get this class instance or create one if none is found
22 92
      * @returns {ThemeManager}
@@ -28,26 +98,6 @@ export default class ThemeManager {
28 98
     }
29 99
 
30 100
     /**
31
-     * Set the function to be called when the theme is changed (allows for general reload of the app)
32
-     * @param callback Function to call after theme change
33
-     */
34
-    setUpdateThemeCallback(callback: ?Function) {
35
-        this.updateThemeCallback = callback;
36
-    }
37
-
38
-    /**
39
-     * Set night mode and save it to preferences
40
-     *
41
-     * @param isNightMode Whether to enable night mode
42
-     */
43
-    setNightMode(isNightMode: boolean) {
44
-        let nightModeKey = AsyncStorageManager.getInstance().preferences.nightMode.key;
45
-        AsyncStorageManager.getInstance().savePref(nightModeKey, isNightMode ? '1' : '0');
46
-        if (this.updateThemeCallback !== null)
47
-            this.updateThemeCallback();
48
-    }
49
-
50
-    /**
51 101
      * @returns {boolean} Night mode state
52 102
      */
53 103
     static getNightMode(): boolean {
@@ -60,9 +110,9 @@ export default class ThemeManager {
60 110
      */
61 111
     static getCurrentTheme(): Object {
62 112
         if (ThemeManager.getNightMode())
63
-            return getTheme(platformDark);
113
+            return ThemeManager.getDarkTheme();
64 114
         else
65
-            return getTheme(platform);
115
+            return ThemeManager.getWhiteTheme();
66 116
     }
67 117
 
68 118
     /**
@@ -70,7 +120,27 @@ export default class ThemeManager {
70 120
      * @returns {Object}
71 121
      */
72 122
     static getCurrentThemeVariables(): Object {
73
-        return ThemeManager.getCurrentTheme().variables;
123
+        return ThemeManager.getCurrentTheme().colors;
124
+    }
125
+
126
+    /**
127
+     * Set the function to be called when the theme is changed (allows for general reload of the app)
128
+     * @param callback Function to call after theme change
129
+     */
130
+    setUpdateThemeCallback(callback: ?Function) {
131
+        this.updateThemeCallback = callback;
132
+    }
133
+
134
+    /**
135
+     * Set night mode and save it to preferences
136
+     *
137
+     * @param isNightMode Whether to enable night mode
138
+     */
139
+    setNightMode(isNightMode: boolean) {
140
+        let nightModeKey = AsyncStorageManager.getInstance().preferences.nightMode.key;
141
+        AsyncStorageManager.getInstance().savePref(nightModeKey, isNightMode ? '1' : '0');
142
+        if (this.updateThemeCallback !== null)
143
+            this.updateThemeCallback();
74 144
     }
75 145
 
76 146
 };

+ 9
- 10
utils/WebDataManager.js View File

@@ -1,4 +1,3 @@
1
-import {Toast} from "native-base";
2 1
 
3 2
 /**
4 3
  * Class used to get json data from the web
@@ -48,15 +47,15 @@ export default class WebDataManager {
48 47
      * @param errorString
49 48
      */
50 49
     showUpdateToast(errorString) {
51
-        let isSuccess = this.isDataObjectValid();
52
-        if (!isSuccess) {
53
-            Toast.show({
54
-                text: errorString,
55
-                buttonText: 'OK',
56
-                type: isSuccess ? "success" : "danger",
57
-                duration: 2000
58
-            });
59
-        }
50
+        // let isSuccess = this.isDataObjectValid();
51
+        // if (!isSuccess) {
52
+        //     Toast.show({
53
+        //         text: errorString,
54
+        //         buttonText: 'OK',
55
+        //         type: isSuccess ? "success" : "danger",
56
+        //         duration: 2000
57
+        //     });
58
+        // }
60 59
     }
61 60
 
62 61
 }

Loading…
Cancel
Save