Browse Source

Merge branch 'dev'

keplyx 2 years ago
parent
commit
ff0f8737a4
70 changed files with 2728 additions and 2261 deletions
  1. 4
    5
      App.js
  2. 2
    2
      app.json
  3. 1
    0
      clear-node-cache.sh
  4. 66
    46
      components/BaseContainer.js
  5. 42
    4
      components/CustomHeader.js
  6. 1
    1
      components/DashboardItem.js
  7. 54
    51
      components/Sidebar.js
  8. 3
    54
      components/WebViewScreen.js
  9. 17
    16
      native-base-theme/components/Badge.js
  10. 2
    4
      native-base-theme/components/Body.js
  11. 165
    175
      native-base-theme/components/Button.js
  12. 7
    7
      native-base-theme/components/Card.js
  13. 69
    67
      native-base-theme/components/CardItem.js
  14. 10
    10
      native-base-theme/components/CheckBox.js
  15. 6
    5
      native-base-theme/components/Container.js
  16. 4
    6
      native-base-theme/components/Content.js
  17. 12
    16
      native-base-theme/components/Fab.js
  18. 35
    34
      native-base-theme/components/Footer.js
  19. 26
    26
      native-base-theme/components/FooterTab.js
  20. 26
    30
      native-base-theme/components/Form.js
  21. 3
    3
      native-base-theme/components/H1.js
  22. 3
    3
      native-base-theme/components/H2.js
  23. 2
    2
      native-base-theme/components/H3.js
  24. 174
    149
      native-base-theme/components/Header.js
  25. 3
    3
      native-base-theme/components/Icon.js
  26. 2
    2
      native-base-theme/components/Input.js
  27. 34
    34
      native-base-theme/components/InputGroup.js
  28. 72
    71
      native-base-theme/components/Item.js
  29. 2
    4
      native-base-theme/components/Label.js
  30. 2
    4
      native-base-theme/components/Left.js
  31. 163
    161
      native-base-theme/components/ListItem.js
  32. 3
    5
      native-base-theme/components/Picker.android.js
  33. 1
    3
      native-base-theme/components/Picker.ios.js
  34. 3
    5
      native-base-theme/components/Picker.js
  35. 19
    16
      native-base-theme/components/Radio.js
  36. 3
    5
      native-base-theme/components/Right.js
  37. 19
    18
      native-base-theme/components/Segment.js
  38. 10
    10
      native-base-theme/components/Separator.js
  39. 1
    3
      native-base-theme/components/Spinner.js
  40. 7
    6
      native-base-theme/components/Subtitle.js
  41. 25
    27
      native-base-theme/components/SwipeRow.js
  42. 2
    4
      native-base-theme/components/Switch.js
  43. 2
    4
      native-base-theme/components/Tab.js
  44. 22
    22
      native-base-theme/components/TabBar.js
  45. 13
    13
      native-base-theme/components/TabContainer.js
  46. 16
    15
      native-base-theme/components/TabHeading.js
  47. 4
    4
      native-base-theme/components/Text.js
  48. 5
    5
      native-base-theme/components/Textarea.js
  49. 9
    11
      native-base-theme/components/Thumbnail.js
  50. 8
    7
      native-base-theme/components/Title.js
  51. 16
    15
      native-base-theme/components/Toast.js
  52. 3
    3
      native-base-theme/components/View.js
  53. 103
    96
      native-base-theme/components/index.js
  54. 149
    121
      native-base-theme/variables/commonColor.js
  55. 121
    100
      native-base-theme/variables/material.js
  56. 349
    298
      native-base-theme/variables/platform.js
  57. 349
    298
      native-base-theme/variables/platformDark.js
  58. 2
    0
      navigation/AppNavigator.js
  59. 7
    5
      navigation/MainTabNavigator.js
  60. 17
    19
      package.json
  61. 56
    10
      screens/About/AboutScreen.js
  62. 1
    1
      screens/DebugScreen.js
  63. 39
    0
      screens/ElusEtudScreen.js
  64. 60
    5
      screens/PlanexScreen.js
  65. 64
    6
      screens/PlanningScreen.js
  66. 110
    69
      screens/Proximo/ProximoListScreen.js
  67. 73
    19
      screens/Proximo/ProximoMainScreen.js
  68. 0
    1
      screens/SettingsScreen.js
  69. 8
    4
      translations/en.json
  70. 17
    13
      translations/fr.json

+ 4
- 5
App.js View File

@@ -1,15 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {StatusBar, Platform } from 'react-native';
4
+import {StatusBar, Platform} from 'react-native';
5 5
 import {Root, StyleProvider} from 'native-base';
6 6
 import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
7 7
 import ThemeManager from './utils/ThemeManager';
8 8
 import LocaleManager from './utils/LocaleManager';
9 9
 import * as Font from 'expo-font';
10
-// edited native-base-shoutem-theme according to
11
-// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
12
-// to allow for dynamic theme switching
13 10
 import {clearThemeCache} from 'native-base-shoutem-theme';
14 11
 import AsyncStorageManager from "./utils/AsyncStorageManager";
15 12
 import CustomIntroSlider from "./components/CustomIntroSlider";
@@ -81,6 +78,7 @@ export default class App extends React.Component<Props, State> {
81 78
         await Font.loadAsync({
82 79
             'Roboto': require('native-base/Fonts/Roboto.ttf'),
83 80
             'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
81
+            'material-community': require('native-base/Fonts/MaterialCommunityIcons.ttf'),
84 82
         });
85 83
         await AsyncStorageManager.getInstance().loadPreferences();
86 84
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
@@ -118,7 +116,8 @@ export default class App extends React.Component<Props, State> {
118 116
             );
119 117
         }
120 118
         if (this.state.showIntro || this.state.showUpdate) {
121
-            return <CustomIntroSlider onDone={() => this.onIntroDone()} isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
119
+            return <CustomIntroSlider onDone={() => this.onIntroDone()}
120
+                                      isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
122 121
         } else {
123 122
             const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
124 123
             return (

+ 2
- 2
app.json View File

@@ -4,13 +4,13 @@
4 4
     "description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.",
5 5
     "slug": "application-amicale",
6 6
     "privacy": "public",
7
-    "sdkVersion": "33.0.0",
7
+    "sdkVersion": "36.0.0",
8 8
     "platforms": [
9 9
       "ios",
10 10
       "android",
11 11
       "web"
12 12
     ],
13
-    "version": "1.3.1",
13
+    "version": "1.3.3",
14 14
     "orientation": "portrait",
15 15
     "primaryColor": "#be1522",
16 16
     "icon": "./assets/android.icon.png",

+ 1
- 0
clear-node-cache.sh View File

@@ -0,0 +1 @@
1
+rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c

+ 66
- 46
components/BaseContainer.js View File

@@ -1,13 +1,15 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Container, Right} from "native-base";
4
+import {Container} from "native-base";
5 5
 import CustomHeader from "./CustomHeader";
6 6
 import CustomSideMenu from "./CustomSideMenu";
7 7
 import CustomMaterialIcon from "./CustomMaterialIcon";
8 8
 import {Platform, View} from "react-native";
9 9
 import ThemeManager from "../utils/ThemeManager";
10 10
 import Touchable from "react-native-platform-touchable";
11
+import {ScreenOrientation} from "expo";
12
+import {NavigationActions} from "react-navigation";
11 13
 
12 14
 
13 15
 type Props = {
@@ -18,29 +20,34 @@ type Props = {
18 20
     hasTabs: boolean,
19 21
     hasBackButton: boolean,
20 22
     hasSideMenu: boolean,
21
-    isHeaderVisible: boolean
23
+    enableRotation: boolean,
24
+    hideHeaderOnLandscape: boolean,
22 25
 }
23 26
 
24 27
 type State = {
25
-    isOpen: boolean
28
+    isOpen: boolean,
29
+    isHeaderVisible: boolean
26 30
 }
27 31
 
28 32
 
29 33
 export default class BaseContainer extends React.Component<Props, State> {
30 34
 
31 35
     willBlurSubscription: function;
36
+    willFocusSubscription: function;
32 37
 
33 38
     static defaultProps = {
34 39
         headerRightButton: <View/>,
35 40
         hasTabs: false,
36 41
         hasBackButton: false,
37 42
         hasSideMenu: true,
38
-        isHeaderVisible: true,
43
+        enableRotation: false,
44
+        hideHeaderOnLandscape: false,
39 45
     };
40 46
 
41 47
 
42 48
     state = {
43 49
         isOpen: false,
50
+        isHeaderVisible: true,
44 51
     };
45 52
 
46 53
     toggle() {
@@ -57,9 +64,31 @@ export default class BaseContainer extends React.Component<Props, State> {
57 64
      * Register for blur event to close side menu on screen change
58 65
      */
59 66
     componentDidMount() {
67
+        this.willFocusSubscription = this.props.navigation.addListener(
68
+            'willFocus',
69
+            payload => {
70
+                if (this.props.enableRotation) {
71
+                    ScreenOrientation.unlockAsync();
72
+                    ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
73
+                        if (this.props.hideHeaderOnLandscape) {
74
+                            let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
75
+                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
76
+                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
77
+                            this.setState({isHeaderVisible: !isLandscape});
78
+                            const setParamsAction = NavigationActions.setParams({
79
+                                params: {showTabBar: !isLandscape},
80
+                                key: this.props.navigation.state.key,
81
+                            });
82
+                            this.props.navigation.dispatch(setParamsAction);
83
+                        }
84
+                    });
85
+                }
86
+            });
60 87
         this.willBlurSubscription = this.props.navigation.addListener(
61 88
             'willBlur',
62 89
             payload => {
90
+                if (this.props.enableRotation)
91
+                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
63 92
                 this.setState({isOpen: false});
64 93
             }
65 94
         );
@@ -71,25 +100,29 @@ export default class BaseContainer extends React.Component<Props, State> {
71 100
     componentWillUnmount() {
72 101
         if (this.willBlurSubscription !== undefined)
73 102
             this.willBlurSubscription.remove();
103
+        if (this.willFocusSubscription !== undefined)
104
+            this.willFocusSubscription.remove();
74 105
     }
75 106
 
76 107
     getMainContainer() {
77 108
         return (
78 109
             <Container>
79
-                <CustomHeader
80
-                    navigation={this.props.navigation} title={this.props.headerTitle}
81
-                    leftButton={
82
-                        <Touchable
83
-                            style={{padding: 6}}
84
-                            onPress={() => this.toggle()}>
85
-                            <CustomMaterialIcon
86
-                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
87
-                                icon="menu"/>
88
-                        </Touchable>
89
-                    }
90
-                    rightButton={this.props.headerRightButton}
91
-                    hasTabs={this.props.hasTabs}
92
-                    hasBackButton={this.props.hasBackButton}/>
110
+                {this.state.isHeaderVisible ?
111
+                    <CustomHeader
112
+                        navigation={this.props.navigation} title={this.props.headerTitle}
113
+                        leftButton={
114
+                            <Touchable
115
+                                style={{padding: 6}}
116
+                                onPress={() => this.toggle()}>
117
+                                <CustomMaterialIcon
118
+                                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
119
+                                    icon="menu"/>
120
+                            </Touchable>
121
+                        }
122
+                        rightButton={this.props.headerRightButton}
123
+                        hasTabs={this.props.hasTabs}
124
+                        hasBackButton={this.props.hasBackButton}/>
125
+                    : <View style={{paddingTop: 20}}/>}
93 126
                 {this.props.children}
94 127
             </Container>
95 128
         );
@@ -97,33 +130,20 @@ export default class BaseContainer extends React.Component<Props, State> {
97 130
 
98 131
 
99 132
     render() {
100
-        if (this.props.isHeaderVisible) {
101
-            return (
102
-                <View style={{
103
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
104
-                    width: '100%',
105
-                    height: '100%'
106
-                }}>
107
-                    {this.props.hasSideMenu ?
108
-                        <CustomSideMenu
109
-                            navigation={this.props.navigation} isOpen={this.state.isOpen}
110
-                            onChange={(isOpen) => this.updateMenuState(isOpen)}>
111
-                            {this.getMainContainer()}
112
-                        </CustomSideMenu> :
113
-                        this.getMainContainer()}
114
-                </View>
115
-            );
116
-        } else {
117
-            return (
118
-                <View style={{
119
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
120
-                    width: '100%',
121
-                    height: '100%'
122
-                }}>
123
-                    {this.props.children}
124
-                </View>
125
-            );
126
-        }
127
-
133
+        return (
134
+            <View style={{
135
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
136
+                width: '100%',
137
+                height: '100%'
138
+            }}>
139
+                {this.props.hasSideMenu ?
140
+                    <CustomSideMenu
141
+                        navigation={this.props.navigation} isOpen={this.state.isOpen}
142
+                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
143
+                        {this.getMainContainer()}
144
+                    </CustomSideMenu> :
145
+                    this.getMainContainer()}
146
+            </View>
147
+        );
128 148
     }
129 149
 }

+ 42
- 4
components/CustomHeader.js View File

@@ -1,15 +1,19 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from "react";
4
-import {Body, Header, Left, Right, Title} from "native-base";
4
+import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
5 5
 import {Platform, StyleSheet, View} from "react-native";
6 6
 import {getStatusBarHeight} from "react-native-status-bar-height";
7 7
 import Touchable from 'react-native-platform-touchable';
8 8
 import ThemeManager from "../utils/ThemeManager";
9 9
 import CustomMaterialIcon from "./CustomMaterialIcon";
10
+import i18n from "i18n-js";
10 11
 
11 12
 type Props = {
12 13
     hasBackButton: boolean,
14
+    hasSearchField: boolean,
15
+    searchCallback: Function,
16
+    shouldFocusSearchBar: boolean,
13 17
     leftButton: React.Node,
14 18
     rightButton: React.Node,
15 19
     title: string,
@@ -29,11 +33,41 @@ export default class CustomHeader extends React.Component<Props> {
29 33
 
30 34
     static defaultProps = {
31 35
         hasBackButton: false,
36
+        hasSearchField: false,
37
+        searchCallback: () => null,
38
+        shouldFocusSearchBar: false,
39
+        title: '',
32 40
         leftButton: <View/>,
33 41
         rightButton: <View/>,
34 42
         hasTabs: false,
35 43
     };
36 44
 
45
+    componentDidMount() {
46
+        if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
47
+            // does not work if called to early for some reason...
48
+            setTimeout(() => this.refs.searchInput._root.focus(), 500);
49
+        }
50
+    }
51
+
52
+    getSearchBar() {
53
+        return (
54
+            <Item
55
+                style={{
56
+                    width: '100%',
57
+                    marginBottom: 7
58
+                }}>
59
+                <CustomMaterialIcon
60
+                    icon={'magnify'}
61
+                    color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
62
+                <Input
63
+                    ref="searchInput"
64
+                    placeholder={i18n.t('proximoScreen.search')}
65
+                    placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
66
+                    onChangeText={(text) => this.props.searchCallback(text)}/>
67
+            </Item>
68
+        );
69
+    }
70
+
37 71
     render() {
38 72
         let button;
39 73
         // Does the app have a back button or a burger menu ?
@@ -52,13 +86,17 @@ export default class CustomHeader extends React.Component<Props> {
52 86
         return (
53 87
             <Header style={styles.header}
54 88
                     hasTabs={this.props.hasTabs}>
55
-                <Left>
89
+                <Left style={{flex: 0}}>
56 90
                     {button}
57 91
                 </Left>
58 92
                 <Body>
59
-                    <Title>{this.props.title}</Title>
93
+                    {this.props.hasSearchField ?
94
+                        this.getSearchBar() :
95
+                        <Title style={{
96
+                            paddingLeft: 10
97
+                        }}>{this.props.title}</Title>}
60 98
                 </Body>
61
-                <Right>
99
+                <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
62 100
                     {this.props.rightButton}
63 101
                     {this.props.hasBackButton ? <View/> :
64 102
                         <Touchable

+ 1
- 1
components/DashboardItem.js View File

@@ -101,7 +101,7 @@ export default class DashboardItem extends React.Component<Props> {
101 101
                                       div: {color: ThemeManager.getCurrentThemeVariables().textColor},
102 102
                                   }}/>
103 103
                             <LinearGradient
104
-                                colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
104
+                                colors={['rgba(255,255,255,0)', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
105 105
                                 start={{x: 0, y: 0}}
106 106
                                 end={{x: 0, y: 0.6}}
107 107
                                 // end={[0, 0.6]}

+ 54
- 51
components/Sidebar.js View File

@@ -8,6 +8,7 @@ import CustomMaterialIcon from '../components/CustomMaterialIcon';
8 8
 import ThemeManager from "../utils/ThemeManager";
9 9
 
10 10
 const deviceHeight = Dimensions.get("window").height;
11
+const deviceWidth = Dimensions.get("window").width;
11 12
 
12 13
 const drawerCover = require("../assets/drawer-cover.png");
13 14
 
@@ -46,6 +47,11 @@ export default class SideBar extends React.Component<Props, State> {
46 47
                 icon: "web",
47 48
             },
48 49
             {
50
+                name: "Élus Étudiants",
51
+                route: "ElusEtudScreen",
52
+                icon: "alpha-e-box",
53
+            },
54
+            {
49 55
                 name: "Wiketud",
50 56
                 route: "WiketudScreen",
51 57
                 icon: "wikipedia",
@@ -78,55 +84,52 @@ export default class SideBar extends React.Component<Props, State> {
78 84
 
79 85
     render() {
80 86
         return (
81
-            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
82
-                <Content
83
-                    bounces={false}
84
-                    style={{flex: 1, top: -1}}
85
-                >
86
-                    <Image source={drawerCover} style={styles.drawerCover}/>
87
-                    <FlatList
88
-                        data={this.dataSet}
89
-                        extraData={this.state}
90
-                        keyExtractor={(item) => item.route}
91
-                        renderItem={({item}) =>
92
-                            <ListItem
93
-                                button
94
-                                noBorder
95
-                                selected={this.state.active === item.route}
96
-                                onPress={() => {
97
-                                    if (item.link !== undefined)
98
-                                        Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
99
-                                    else
100
-                                        this.navigateToScreen(item.route);
101
-                                }}
102
-                            >
103
-                                <Left>
104
-                                    <CustomMaterialIcon
105
-                                        icon={item.icon}
106
-                                        active={this.state.active === item.route}
107
-                                    />
108
-                                    <Text style={styles.text}>
109
-                                        {item.name}
110
-                                    </Text>
111
-                                </Left>
112
-                                {item.types &&
113
-                                <Right style={{flex: 1}}>
114
-                                    <Badge
115
-                                        style={{
116
-                                            borderRadius: 3,
117
-                                            height: 25,
118
-                                            width: 72,
119
-                                            backgroundColor: item.bg
120
-                                        }}
121
-                                    >
122
-                                        <Text
123
-                                            style={styles.badgeText}
124
-                                        >{`${item.types} Types`}</Text>
125
-                                    </Badge>
126
-                                </Right>}
127
-                            </ListItem>}
128
-                    />
129
-                </Content>
87
+            <Container style={{
88
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
89
+            }}>
90
+                <Image source={drawerCover} style={styles.drawerCover}/>
91
+                <FlatList
92
+                    data={this.dataSet}
93
+                    extraData={this.state}
94
+                    keyExtractor={(item) => item.route}
95
+                    renderItem={({item}) =>
96
+                        <ListItem
97
+                            button
98
+                            noBorder
99
+                            selected={this.state.active === item.route}
100
+                            onPress={() => {
101
+                                if (item.link !== undefined)
102
+                                    Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
103
+                                else
104
+                                    this.navigateToScreen(item.route);
105
+                            }}
106
+                        >
107
+                            <Left>
108
+                                <CustomMaterialIcon
109
+                                    icon={item.icon}
110
+                                    active={this.state.active === item.route}
111
+                                />
112
+                                <Text style={styles.text}>
113
+                                    {item.name}
114
+                                </Text>
115
+                            </Left>
116
+                            {item.types &&
117
+                            <Right style={{flex: 1}}>
118
+                                <Badge
119
+                                    style={{
120
+                                        borderRadius: 3,
121
+                                        height: 25,
122
+                                        width: 72,
123
+                                        backgroundColor: item.bg
124
+                                    }}
125
+                                >
126
+                                    <Text
127
+                                        style={styles.badgeText}
128
+                                    >{`${item.types} Types`}</Text>
129
+                                </Badge>
130
+                            </Right>}
131
+                        </ListItem>}
132
+                />
130 133
             </Container>
131 134
         );
132 135
     }
@@ -134,8 +137,8 @@ export default class SideBar extends React.Component<Props, State> {
134 137
 
135 138
 const styles = StyleSheet.create({
136 139
     drawerCover: {
137
-        height: deviceHeight / 5,
138
-        width: null,
140
+        height: deviceWidth / 3,
141
+        width: 2 * deviceWidth / 3,
139 142
         position: "relative",
140 143
         marginBottom: 10,
141 144
         marginTop: 20

+ 3
- 54
components/WebViewScreen.js View File

@@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable";
8 8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
9 9
 import ThemeManager from "../utils/ThemeManager";
10 10
 import BaseContainer from "../components/BaseContainer";
11
-import {ScreenOrientation} from 'expo';
12 11
 import {NavigationActions} from 'react-navigation';
13 12
 
14 13
 type Props = {
@@ -25,67 +24,17 @@ type Props = {
25 24
     hasFooter: boolean,
26 25
 }
27 26
 
28
-type State = {
29
-    isLandscape: boolean,
30
-}
31
-
32 27
 /**
33 28
  * Class defining a webview screen.
34 29
  */
35
-export default class WebViewScreen extends React.Component<Props, State> {
30
+export default class WebViewScreen extends React.Component<Props> {
36 31
 
37 32
     static defaultProps = {
38 33
         hasBackButton: false,
39 34
         hasSideMenu: true,
40 35
         hasFooter: true,
41 36
     };
42
-
43
-    state = {
44
-        isLandscape: false,
45
-    };
46
-
47 37
     webviewArray: Array<WebView> = [];
48
-    willFocusSubscription: function;
49
-    willBlurSubscription: function;
50
-
51
-    /**
52
-     * Register for blur event to close side menu on screen change
53
-     */
54
-    componentDidMount() {
55
-        this.willFocusSubscription = this.props.navigation.addListener(
56
-            'willFocus',
57
-            payload => {
58
-                ScreenOrientation.unlockAsync();
59
-                ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
60
-                    let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
61
-                        OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
62
-                        OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
63
-                    this.setState({isLandscape: isLandscape});
64
-                    const setParamsAction = NavigationActions.setParams({
65
-                        params: {showTabBar: !isLandscape},
66
-                        key: this.props.navigation.state.key,
67
-                    });
68
-                    this.props.navigation.dispatch(setParamsAction);
69
-                });
70
-            }
71
-        );
72
-        this.willBlurSubscription = this.props.navigation.addListener(
73
-            'willBlur',
74
-            payload => {
75
-                ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
76
-            }
77
-        );
78
-    }
79
-
80
-    /**
81
-     * Unregister from event when un-mounting components
82
-     */
83
-    componentWillUnmount() {
84
-        if (this.willBlurSubscription !== undefined)
85
-            this.willBlurSubscription.remove();
86
-        if (this.willFocusSubscription !== undefined)
87
-            this.willFocusSubscription.remove();
88
-    }
89 38
 
90 39
     openWebLink(url: string) {
91 40
         Linking.openURL(url).catch((err) => console.error('Error opening link', err));
@@ -190,7 +139,8 @@ export default class WebViewScreen extends React.Component<Props, State> {
190 139
                 headerRightButton={this.getRefreshButton()}
191 140
                 hasBackButton={this.props.hasHeaderBackButton}
192 141
                 hasSideMenu={this.props.hasSideMenu}
193
-                isHeaderVisible={!this.state.isLandscape}>
142
+                enableRotation={true}
143
+                hideHeaderOnLandscape={true}>
194 144
                 {this.props.data.length === 1 ?
195 145
                     this.getWebview(this.props.data[0]) :
196 146
                     <Tabs
@@ -199,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
199 149
                         }}
200 150
                         locked={true}
201 151
                         style = {{
202
-                            paddingTop: this.state.isLandscape ? 20 : 0,
203 152
                             backgroundColor: Platform.OS === 'ios' ?
204 153
                                 ThemeManager.getCurrentThemeVariables().tabDefaultBg :
205 154
                                 ThemeManager.getCurrentThemeVariables().brandPrimary

+ 17
- 16
native-base-theme/components/Badge.js View File

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

+ 2
- 4
native-base-theme/components/Body.js View File

@@ -1,12 +1,10 @@
1 1
 // @flow
2 2
 
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const bodyTheme = {
7 5
     flex: 1,
8 6
     alignItems: 'center',
9
-    alignSelf: 'center',
7
+    alignSelf: 'center'
10 8
   };
11 9
 
12 10
   return bodyTheme;

+ 165
- 175
native-base-theme/components/Button.js View File

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

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

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

+ 69
- 67
native-base-theme/components/CardItem.js View File

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

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

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

+ 6
- 5
native-base-theme/components/Container.js View File

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

+ 4
- 6
native-base-theme/components/Content.js View File

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

+ 12
- 16
native-base-theme/components/Fab.js View File

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

+ 35
- 34
native-base-theme/components/Footer.js View File

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

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

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

+ 26
- 30
native-base-theme/components/Form.js View File

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

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

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

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

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

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

@@ -1,8 +1,8 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const h3Theme = {
7 7
     color: variables.textColor,
8 8
     fontSize: variables.fontSizeH3,

+ 174
- 149
native-base-theme/components/Header.js View File

@@ -1,65 +1,70 @@
1 1
 // @flow
2 2
 
3
-import { PixelRatio, StatusBar } from "react-native";
3
+import { PixelRatio, StatusBar } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const platformStyle = variables.platformStyle;
9 10
   const platform = variables.platform;
10 11
 
11 12
   const headerTheme = {
12
-    ".span": {
13
+    '.span': {
13 14
       height: 128,
14
-      "NativeBase.Left": {
15
-        alignSelf: "flex-start"
15
+      'NativeBase.Left': {
16
+        alignSelf: 'flex-start'
16 17
       },
17
-      "NativeBase.Body": {
18
-        alignSelf: "flex-end",
19
-        alignItems: "flex-start",
20
-        justifyContent: "center",
18
+      'NativeBase.Body': {
19
+        alignSelf: 'flex-end',
20
+        alignItems: 'flex-start',
21
+        justifyContent: 'center',
21 22
         paddingBottom: 26
22 23
       },
23
-      "NativeBase.Right": {
24
-        alignSelf: "flex-start"
24
+      'NativeBase.Right': {
25
+        alignSelf: 'flex-start'
25 26
       }
26 27
     },
27
-    ".hasSubtitle": {
28
-      "NativeBase.Body": {
29
-        "NativeBase.Title": {
28
+    '.hasSubtitle': {
29
+      'NativeBase.Body': {
30
+        'NativeBase.Title': {
30 31
           fontSize: variables.titleFontSize - 2,
31 32
           fontFamily: variables.titleFontfamily,
32
-          textAlign: "center",
33
-          fontWeight: "500",
33
+          textAlign: 'center',
34
+          fontWeight: '500',
34 35
           paddingBottom: 3
35 36
         },
36
-        "NativeBase.Subtitle": {
37
+        'NativeBase.Subtitle': {
37 38
           fontSize: variables.subTitleFontSize,
38 39
           fontFamily: variables.titleFontfamily,
39 40
           color: variables.subtitleColor,
40
-          textAlign: "center"
41
+          textAlign: 'center'
41 42
         }
42 43
       }
43 44
     },
44
-    ".transparent": {
45
-      backgroundColor: "transparent",
46
-      borderBottomColor: "transparent",
45
+    '.transparent': {
46
+      backgroundColor: 'transparent',
47
+      borderBottomColor: 'transparent',
47 48
       elevation: 0,
48 49
       shadowColor: null,
49 50
       shadowOffset: null,
50 51
       shadowRadius: null,
51 52
       shadowOpacity: null,
52
-      paddingTop: platform === "android" ? StatusBar.currentHeight : undefined,
53
-      height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight
53
+      paddingTop:
54
+        platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
55
+      height:
56
+        platform === PLATFORM.ANDROID
57
+          ? variables.toolbarHeight + StatusBar.currentHeight
58
+          : variables.toolbarHeight
54 59
     },
55
-    ".noShadow": {
60
+    '.noShadow': {
56 61
       elevation: 0,
57 62
       shadowColor: null,
58 63
       shadowOffset: null,
59 64
       shadowRadius: null,
60 65
       shadowOpacity: null
61 66
     },
62
-    ".hasTabs": {
67
+    '.hasTabs': {
63 68
       elevation: 0,
64 69
       shadowColor: null,
65 70
       shadowOffset: null,
@@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => {
67 72
       shadowOpacity: null,
68 73
       borderBottomWidth: null
69 74
     },
70
-    ".hasSegment": {
75
+    '.hasSegment': {
71 76
       elevation: 0,
72 77
       shadowColor: null,
73 78
       shadowOffset: null,
74 79
       shadowRadius: null,
75 80
       shadowOpacity: null,
76 81
       borderBottomWidth: null,
77
-      "NativeBase.Left": {
82
+      'NativeBase.Left': {
78 83
         flex: 0.3
79 84
       },
80
-      "NativeBase.Right": {
85
+      'NativeBase.Right': {
81 86
         flex: 0.3
82 87
       },
83
-      "NativeBase.Body": {
88
+      'NativeBase.Body': {
84 89
         flex: 1,
85
-        "NativeBase.Segment": {
90
+        'NativeBase.Segment': {
86 91
           marginRight: 0,
87
-          alignSelf: "center",
88
-          "NativeBase.Button": {
92
+          alignSelf: 'center',
93
+          'NativeBase.Button': {
89 94
             paddingLeft: 0,
90 95
             paddingRight: 0
91 96
           }
92 97
         }
93 98
       }
94 99
     },
95
-    ".noLeft": {
96
-      "NativeBase.Left": {
97
-        width: platform === "ios" ? undefined : 0,
98
-        flex: platform === "ios" ? 1 : 0
100
+    '.noLeft': {
101
+      'NativeBase.Left': {
102
+        width: platform === PLATFORM.IOS ? undefined : 0,
103
+        flex: platform === PLATFORM.IOS ? 1 : 0
99 104
       },
100
-      "NativeBase.Body": {
101
-        "NativeBase.Title": {
102
-          paddingLeft: platform === "ios" ? undefined : 10
105
+      'NativeBase.Body': {
106
+        'NativeBase.Title': {
107
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
103 108
         },
104
-        "NativeBase.Subtitle": {
105
-          paddingLeft: platform === "ios" ? undefined : 10
109
+        'NativeBase.Subtitle': {
110
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
106 111
         }
107 112
       }
108 113
     },
109
-    "NativeBase.Button": {
110
-      justifyContent: "center",
111
-      alignSelf: "center",
112
-      alignItems: "center",
113
-      ".transparent": {
114
-        "NativeBase.Text": {
114
+    'NativeBase.Button': {
115
+      justifyContent: 'center',
116
+      alignSelf: 'center',
117
+      alignItems: 'center',
118
+      '.transparent': {
119
+        'NativeBase.Text': {
115 120
           color: variables.toolbarBtnTextColor,
116
-          fontWeight: "600"
121
+          fontWeight: '600'
117 122
         },
118
-        "NativeBase.Icon": {
123
+        'NativeBase.Icon': {
119 124
           color: variables.toolbarBtnColor
120 125
         },
121
-        "NativeBase.IconNB": {
126
+        'NativeBase.IconNB': {
122 127
           color: variables.toolbarBtnColor
123 128
         },
124 129
         paddingHorizontal: variables.buttonPadding
125 130
       },
126 131
       paddingHorizontal: 15
127 132
     },
128
-    ".searchBar": {
129
-      "NativeBase.Item": {
130
-        "NativeBase.Icon": {
131
-          backgroundColor: "transparent",
133
+    '.searchBar': {
134
+      'NativeBase.Item': {
135
+        'NativeBase.Icon': {
136
+          backgroundColor: 'transparent',
132 137
           color: variables.dropdownLinkColor,
133 138
           fontSize: variables.toolbarSearchIconSize,
134
-          alignItems: "center",
139
+          alignItems: 'center',
135 140
           marginTop: 2,
136 141
           paddingRight: 10,
137 142
           paddingLeft: 10
138 143
         },
139
-        "NativeBase.IconNB": {
140
-          backgroundColor: "transparent",
144
+        'NativeBase.IconNB': {
145
+          backgroundColor: 'transparent',
141 146
           color: null,
142
-          alignSelf: "center"
147
+          alignSelf: 'center'
143 148
         },
144
-        "NativeBase.Input": {
145
-          alignSelf: "center",
149
+        'NativeBase.Input': {
150
+          alignSelf: 'center',
146 151
           lineHeight: null,
147 152
           height: variables.searchBarInputHeight
148 153
         },
149
-        alignSelf: "center",
150
-        alignItems: "center",
151
-        justifyContent: "flex-start",
154
+        alignSelf: 'center',
155
+        alignItems: 'center',
156
+        justifyContent: 'flex-start',
152 157
         flex: 1,
153 158
         height: variables.searchBarHeight,
154
-        borderColor: "transparent",
159
+        borderColor: 'transparent',
155 160
         backgroundColor: variables.toolbarInputColor
156 161
       },
157
-      "NativeBase.Button": {
158
-        ".transparent": {
159
-          "NativeBase.Text": {
160
-            fontWeight: "500"
162
+      'NativeBase.Button': {
163
+        '.transparent': {
164
+          'NativeBase.Text': {
165
+            fontWeight: '500'
161 166
           },
162 167
           paddingHorizontal: null,
163
-          paddingLeft: platform === "ios" ? 10 : null
168
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
164 169
         },
165
-        paddingHorizontal: platform === "ios" ? undefined : null,
166
-        width: platform === "ios" ? undefined : 0,
167
-        height: platform === "ios" ? undefined : 0
170
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
171
+        width: platform === PLATFORM.IOS ? undefined : 0,
172
+        height: platform === PLATFORM.IOS ? undefined : 0
168 173
       }
169 174
     },
170
-    ".rounded": {
171
-      "NativeBase.Item": {
175
+    '.rounded': {
176
+      'NativeBase.Item': {
172 177
         borderRadius:
173
-          platform === "ios" && platformStyle !== "material" ? 25 : 3
178
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
179
+            ? 25
180
+            : 3
174 181
       }
175 182
     },
176
-    "NativeBase.Left": {
177
-      "NativeBase.Button": {
178
-        ".hasText": {
183
+    'NativeBase.Left': {
184
+      'NativeBase.Button': {
185
+        '.hasText': {
179 186
           marginLeft: -10,
180 187
           height: 30,
181
-          "NativeBase.Icon": {
188
+          'NativeBase.Icon': {
182 189
             color: variables.toolbarBtnColor,
183 190
             fontSize: variables.iconHeaderSize,
184 191
             marginTop: 2,
185 192
             marginRight: 5,
186 193
             marginLeft: 2
187 194
           },
188
-          "NativeBase.Text": {
195
+          'NativeBase.Text': {
189 196
             color: variables.toolbarBtnTextColor,
190
-            fontSize: platform === "ios" ? 17 : 0,
197
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
191 198
             marginLeft: 7,
192 199
             lineHeight: 19.5
193 200
           },
194
-          "NativeBase.IconNB": {
201
+          'NativeBase.IconNB': {
195 202
             color: variables.toolbarBtnColor,
196 203
             fontSize: variables.iconHeaderSize,
197 204
             marginTop: 2,
@@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => {
199 206
             marginLeft: 2
200 207
           }
201 208
         },
202
-        ".transparent": {
209
+        '.transparent': {
203 210
           marginLeft:
204
-            platform === "ios" && platformStyle !== "material" ? -3 : 0,
205
-          "NativeBase.Icon": {
211
+            platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
212
+              ? -3
213
+              : 0,
214
+          'NativeBase.Icon': {
206 215
             color: variables.toolbarBtnColor,
207 216
             fontSize:
208
-              platform === "ios" && variables.platformStyle !== "material"
217
+              platform === PLATFORM.IOS &&
218
+              variables.platformStyle !== PLATFORM.MATERIAL
209 219
                 ? variables.iconHeaderSize + 1
210 220
                 : variables.iconHeaderSize,
211 221
             marginTop: 0,
@@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => {
213 223
             marginLeft: 1,
214 224
             paddingTop: 1
215 225
           },
216
-          "NativeBase.IconNB": {
226
+          'NativeBase.IconNB': {
217 227
             color: variables.toolbarBtnColor,
218 228
             fontSize:
219
-              platform === "ios" && variables.platformStyle !== "material"
229
+              platform === PLATFORM.IOS &&
230
+              variables.platformStyle !== PLATFORM.MATERIAL
220 231
                 ? variables.iconHeaderSize + 1
221 232
                 : variables.iconHeaderSize - 2,
222 233