├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .watchmanconfig ├── App.js ├── App.test.js ├── README.md ├── app.json ├── config.js ├── img ├── drawer-cover.png ├── icon2.png ├── sidebar-sh.png ├── svg │ ├── noun_585090_cc.svg │ ├── swipe_left.svg │ ├── swipe_right.svg │ └── upvote.svg ├── swipe_left.png ├── swipe_right.png └── upvote.png ├── js ├── App.js ├── Thumb.js ├── deckswiper │ ├── card.js │ ├── index.js │ ├── swiper.js │ └── timer.js ├── list │ ├── index.js │ ├── item.js │ └── list.js ├── onboarding │ └── index.js ├── page.js └── sidebar │ ├── index.js │ └── style.js ├── native-base-theme ├── components │ ├── Badge.js │ ├── Body.js │ ├── Button.js │ ├── Card.js │ ├── CardItem.js │ ├── CheckBox.js │ ├── Container.js │ ├── Content.js │ ├── Fab.js │ ├── Footer.js │ ├── FooterTab.js │ ├── Form.js │ ├── H1.js │ ├── H2.js │ ├── H3.js │ ├── Header.js │ ├── Icon.js │ ├── Input.js │ ├── InputGroup.js │ ├── Item.js │ ├── Label.js │ ├── Left.js │ ├── ListItem.js │ ├── Picker.android.js │ ├── Picker.ios.js │ ├── Radio.js │ ├── Right.js │ ├── Segment.js │ ├── Separator.js │ ├── Spinner.js │ ├── Subtitle.js │ ├── SwipeRow.js │ ├── Switch.js │ ├── Tab.js │ ├── TabBar.js │ ├── TabContainer.js │ ├── TabHeading.js │ ├── Text.js │ ├── Textarea.js │ ├── Thumbnail.js │ ├── Title.js │ ├── Toast.js │ ├── View.js │ └── index.js └── variables │ ├── commonColor.js │ ├── material.js │ └── platform.js ├── package.json ├── policy.md ├── storybook ├── addons.js ├── data.js ├── index.js └── stories │ └── index.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | storybook/data.js 2 | native-base-theme 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "globals": { 8 | "__DEV__": true 9 | }, 10 | "plugins": [ 11 | "react" 12 | ], 13 | "extends": [ 14 | "eslint:recommended", 15 | "plugin:react/recommended" 16 | ], 17 | "rules": { 18 | quotes: ["error", "single"], 19 | object-curly-spacing: ["error", "never"], 20 | "react/prop-types": "off" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | keystore/ 5 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import Expo from 'expo'; 2 | import React from 'react'; 3 | import {AsyncStorage} from 'react-native'; 4 | import {StyleProvider, Root} from 'native-base'; 5 | 6 | import getTheme from './native-base-theme/components'; 7 | import material from './native-base-theme/variables/material'; 8 | 9 | import config from './config'; 10 | import Onboarding from './js/onboarding'; 11 | import App from './js/App'; 12 | import StoryBook from './storybook'; 13 | 14 | // XXX change false -> true if you want sb 15 | const AppToLoad = false ? StoryBook : App; //eslint-disable-line 16 | 17 | class App1 extends React.Component { 18 | state = { 19 | ready: false, 20 | onboarding: true 21 | }; 22 | 23 | async componentWillMount() { 24 | if (__DEV__) await AsyncStorage.multiRemove(['onboardingDone', 'session', 'liked']); 25 | 26 | const onboardingDone = await AsyncStorage.getItem('onboardingDone'); 27 | 28 | await Expo.Font.loadAsync({ 29 | Roboto: require('native-base/Fonts/Roboto.ttf'), 30 | Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), 31 | Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf') 32 | }); 33 | 34 | if (!__DEV__) Expo.Amplitude.initialize(config.AMPLITUDE_KEY); 35 | 36 | Expo.Amplitude.logEvent('Load'); 37 | 38 | if (onboardingDone === null) { 39 | Expo.Amplitude.logEvent('Onboarding.Start'); 40 | } 41 | 42 | this.setState({ 43 | ready: true, 44 | onboarding: onboardingDone === null 45 | }); 46 | } 47 | 48 | onOnboardingDone = () => { 49 | Expo.Amplitude.logEvent('Onboarding.Done'); 50 | AsyncStorage.setItem('onboardingDone', '1'); 51 | this.setState({onboarding: false}); 52 | } 53 | 54 | render() { 55 | if (!this.state.ready) return ; 56 | 57 | if (this.state.onboarding) return ; 58 | 59 | return ( 60 | 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | } 68 | 69 | export default App1; 70 | -------------------------------------------------------------------------------- /App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | 4 | import renderer from 'react-test-renderer'; 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON(); 8 | expect(rendered).toBeTruthy(); 9 | }); 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SwipeHunt 2 | 3 | SwipeHunt is a minimalistic application to discover product on product hunt in a tinder-like funny way. Yup / Nope to prefilter featured project. 4 | 5 | ![image](https://user-images.githubusercontent.com/1775047/28575541-878db25a-7151-11e7-86c4-7a1755516caf.png) 6 | ![image](https://user-images.githubusercontent.com/1775047/28575561-929adace-7151-11e7-8d97-20c5b7c06012.png) 7 | 8 | 9 | # Stack 10 | 11 | This is my first react-native project. I try to keep it as simple as possible. Hope it can help other people to get started with react-native project. 12 | 13 | Using : 14 | 15 | * Bootstrapped with Expo + CRNA https://github.com/react-community/create-react-native-app 16 | * native-base : UI base elements https://github.com/GeekyAnts/NativeBase 17 | * react-navigation : https://github.com/react-community/react-navigation 18 | * react-native-app-intro : Onboarding component https://github.com/FuYaoDe/react-native-app-intro 19 | 20 | Easy Launch : 21 | 22 | ``` 23 | yarn 24 | yarn start 25 | ``` 26 | 27 | Scan the QR code with Expo installed on your phone 28 | 29 | # Contribute 30 | 31 | Do not hesitate to open an issue for any reason. 32 | 33 | ##### 34 | 35 | _Images credits :_ 36 | 37 | * drawer-cover from https://github.com/GeekyAnts/NativeBase-KitchenSink 38 | * Line Graph by Travis Avery from the Noun Project 39 | * Swipe Right by Web Icon Set from the Noun Project 40 | * Swipe Left by Web Icon Set from the Noun Project 41 | * up arrow by Bluetip Design from the Noun Project 42 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "SwipeHunt for Product Hunt", 4 | "icon" : "./img/icon2.png", 5 | "version": "0.0.2", 6 | "slug": "hunty-ph", 7 | "sdkVersion": "18.0.0", 8 | "ios": { 9 | "bundleIdentifier": "com.devanco.hunty" 10 | }, 11 | "android": { 12 | "package": "com.devanco.hunty" 13 | }, 14 | "orientation": "portrait", 15 | "primaryColor": "#cccccc", 16 | "androidStatusBarColor": "#da552f", 17 | "androidStatusBar": { 18 | "barStyle": "light-content", 19 | "backgroundColor": "#da552f" 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | LATEST_ENDPOINT: 'https://hunty.now.sh/', 3 | AMPLITUDE_KEY: 'XXX' 4 | }; 5 | -------------------------------------------------------------------------------- /img/drawer-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notifme/swipehunt/e95ccb762df13a8aabb119f01e0eab33d3d6ae38/img/drawer-cover.png -------------------------------------------------------------------------------- /img/icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notifme/swipehunt/e95ccb762df13a8aabb119f01e0eab33d3d6ae38/img/icon2.png -------------------------------------------------------------------------------- /img/sidebar-sh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notifme/swipehunt/e95ccb762df13a8aabb119f01e0eab33d3d6ae38/img/sidebar-sh.png -------------------------------------------------------------------------------- /img/svg/noun_585090_cc.svg: -------------------------------------------------------------------------------- 1 | Created by Travis Averyfrom the Noun Project -------------------------------------------------------------------------------- /img/svg/swipe_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/svg/swipe_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/svg/upvote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /img/swipe_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notifme/swipehunt/e95ccb762df13a8aabb119f01e0eab33d3d6ae38/img/swipe_left.png -------------------------------------------------------------------------------- /img/swipe_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notifme/swipehunt/e95ccb762df13a8aabb119f01e0eab33d3d6ae38/img/swipe_right.png -------------------------------------------------------------------------------- /img/upvote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notifme/swipehunt/e95ccb762df13a8aabb119f01e0eab33d3d6ae38/img/upvote.png -------------------------------------------------------------------------------- /js/App.js: -------------------------------------------------------------------------------- 1 | import {DrawerNavigator} from 'react-navigation'; 2 | import SideBar from './sidebar'; 3 | import PageList from './list'; 4 | import DeckSwiper from './deckswiper'; 5 | 6 | const DrawerExample = DrawerNavigator( 7 | { 8 | Swiper: {screen: DeckSwiper}, 9 | List: {screen: PageList}, 10 | }, 11 | { 12 | initialRouteName: 'Swiper', 13 | contentOptions: { 14 | activeTintColor: '#e91e63' 15 | }, 16 | contentComponent: SideBar 17 | } 18 | ); 19 | 20 | export default DrawerExample; 21 | -------------------------------------------------------------------------------- /js/Thumb.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Thumbnail} from 'native-base'; 3 | 4 | const Thumb = ({uri}) => { 5 | let newUri = uri.split('?')[0]; 6 | const modifier = 'auto=format&auto=compress&codec=mozjpeg&cs=strip&w=80&h=80&fit=crop'; 7 | 8 | return ; 9 | } 10 | 11 | export default Thumb; 12 | -------------------------------------------------------------------------------- /js/deckswiper/card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image} from 'react-native'; 3 | import Thumb from '../Thumb'; 4 | 5 | import { 6 | Badge, 7 | Card, 8 | CardItem, 9 | Text, 10 | Left, 11 | Body 12 | } from 'native-base'; 13 | 14 | const ProductCard = ({ 15 | name, 16 | screenshot_url, 17 | tagline, 18 | thumbnail, 19 | topics 20 | }) => ( 21 | 22 | 23 | 24 | 25 | 26 | {name} 27 | {tagline} 28 | 29 | 30 | 31 | 32 | 41 | 42 | 43 | {topics.map(({name, id}) => ( 44 | 51 | {name.toUpperCase()} 52 | 53 | ))} 54 | 55 | 56 | ); 57 | 58 | 59 | 60 | 61 | export default ProductCard; 62 | -------------------------------------------------------------------------------- /js/deckswiper/index.js: -------------------------------------------------------------------------------- 1 | import Expo from 'expo'; 2 | import React from 'react'; 3 | import {AsyncStorage} from 'react-native'; 4 | import {Toast} from 'native-base'; 5 | 6 | 7 | import config from '../../config'; 8 | import Page from '../page'; 9 | import Swiper from './swiper'; 10 | 11 | class PageSwiper extends React.Component { 12 | state = { 13 | loading: true, 14 | posts: [], 15 | itemNumberCurrent: 0, 16 | itemNumberTotal: 0 17 | }; 18 | session = null; 19 | liked = null; 20 | 21 | saveSession = () => { 22 | AsyncStorage.setItem('session', JSON.stringify(this.session)); 23 | } 24 | 25 | resetSession = (day) => { 26 | this.session = { 27 | day: day, 28 | swiped: [] // not implemented with shift because the order & the number of posts could change 29 | } 30 | 31 | this.saveSession() 32 | } 33 | 34 | async componentDidMount() { 35 | try { 36 | const fetched = await fetch(config.LATEST_ENDPOINT); 37 | const json = await fetched.json(); 38 | const session = await AsyncStorage.getItem('session'); 39 | const liked = await AsyncStorage.getItem('liked'); 40 | 41 | if (!json || !json.posts || json.posts.length === 0) { 42 | throw new Error('No posts'); 43 | } 44 | 45 | if (session === null) { 46 | this.resetSession(json.posts[0].day); 47 | } else { 48 | this.session = JSON.parse(session); 49 | 50 | if (this.session.day !== json.posts[0].day) { // new day => new session 51 | this.resetSession(json.posts[0].day); 52 | } 53 | } 54 | 55 | if (liked === null) { 56 | this.liked = {news: [], archived: []}; 57 | } else { 58 | this.liked = JSON.parse(liked); 59 | } 60 | 61 | Expo.Amplitude.logEventWithProperties('Swiper.Load', { 62 | itemNumberCurrent: this.session.swiped.length + 1, 63 | itemNumberTotal: json.posts.length 64 | }); 65 | 66 | this.setState({ 67 | posts: json.posts.filter(p => this.session.swiped.indexOf(p.id) === -1), 68 | loading: false, 69 | itemNumberCurrent: this.session.swiped.length + 1, 70 | itemNumberTotal: json.posts.length 71 | }); 72 | } catch(error) { 73 | Toast.show({ 74 | text: 'Verify your internet connection and retry', 75 | position: 'bottom', 76 | buttonText: 'OKAY' 77 | }) 78 | } 79 | } 80 | 81 | onSwipe = (o) => { 82 | this.session.swiped.push(o.id); 83 | this.saveSession(); 84 | 85 | if (this.state.posts.indexOf(o) === this.state.posts.length - 1) { 86 | this.setState({posts: []}); 87 | } else { 88 | this.setState({itemNumberCurrent: this.state.itemNumberCurrent + 1}); 89 | } 90 | } 91 | 92 | onSwipeLeft = (o) => { 93 | Expo.Amplitude.logEventWithProperties('Swiper.Swipe', { 94 | direction: 'left', 95 | productId: o.id 96 | }); 97 | this.onSwipe(o); 98 | } 99 | 100 | onSwipeRight = (o) => { 101 | Expo.Amplitude.logEventWithProperties('Swiper.Swipe', { 102 | direction: 'right', 103 | productId: o.id 104 | }); 105 | this.onSwipe(o); 106 | this.liked.news.push(o); 107 | AsyncStorage.setItem('liked', JSON.stringify(this.liked)); 108 | } 109 | 110 | renderSwiper() { 111 | const nextDay = (new Date(`${this.session.day}T07:15:00Z`)).getTime() + 24 * 60 * 60 * 1000; 112 | 113 | return ( 114 | { 122 | Expo.Amplitude.logEvent('Swiper.LikePress'); 123 | this.props.navigation.navigate('List'); 124 | }} 125 | onTimeout={() => { 126 | /* TODO reload */ 127 | Expo.Amplitude.logEvent('Swiper.Tiemout'); 128 | }} 129 | /> 130 | ); 131 | } 132 | 133 | render() { 134 | return ( 135 | 136 | {this.state.loading ? null : this.renderSwiper()} 137 | 138 | ); 139 | 140 | } 141 | } 142 | 143 | export default PageSwiper; 144 | -------------------------------------------------------------------------------- /js/deckswiper/swiper.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {DeckSwiper, Button, Text, Footer} from 'native-base'; 3 | import {View, Image} from 'react-native'; 4 | 5 | import Timer from './timer'; 6 | import ProductCard from './card'; 7 | 8 | 9 | const img = require('../../img/drawer-cover.png'); 10 | 11 | const Empty = ({onTimeout, remaining, onPressLikes}) => ( 12 | 13 | 14 | 15 | until the next session 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | ); 26 | 27 | class PureSwiper extends React.PureComponent { 28 | render() { 29 | return ; 30 | } 31 | } 32 | 33 | const renderItem = (item) => ; 34 | 35 | const Swiper = ({ 36 | items, 37 | onSwipeRight, 38 | onSwipeLeft, 39 | onTimeout, 40 | itemNumberCurrent, 41 | itemNumberTotal, 42 | nextTime, 43 | onPressLikes 44 | }) => items.length > 0 ? ( 45 | 46 | 47 | 54 | 55 |
56 | {itemNumberCurrent} / {itemNumberTotal} 57 |
58 | 59 | ) 60 | : 64 | ; 65 | 66 | export default Swiper; 67 | -------------------------------------------------------------------------------- /js/deckswiper/timer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text} from 'react-native'; 3 | 4 | const pad = (str) => (str.length < 2) ? `0${str}` : str; 5 | 6 | class Timer extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | remaining: props.remaining 12 | }; 13 | } 14 | 15 | tick = () => { 16 | const {remaining} = this.state; 17 | 18 | if (remaining > 0) { 19 | this.setState({remaining: remaining - 1}); 20 | 21 | if (remaining === 1) this.props.onTimeout(); 22 | } 23 | } 24 | 25 | componentDidMount() { 26 | this.interval = setInterval(this.tick, 1000); 27 | } 28 | 29 | componentWillUnmount() { 30 | clearInterval(this.interval); 31 | } 32 | 33 | render() { 34 | const hours = Math.floor(this.state.remaining / 3600); 35 | const minutes = Math.floor((this.state.remaining - hours * 3600) / 60); 36 | const seconds = this.state.remaining - hours * 3600 - minutes * 60; 37 | 38 | return ( 39 | 40 | {pad(String(hours))}:{pad(String(minutes))}:{pad(String(seconds))} 41 | 42 | ); 43 | } 44 | } 45 | 46 | export default Timer; 47 | -------------------------------------------------------------------------------- /js/list/index.js: -------------------------------------------------------------------------------- 1 | import Expo from 'expo'; 2 | import React from 'react'; 3 | import {Linking, AsyncStorage} from 'react-native'; 4 | 5 | import Page from '../page'; 6 | import ProductList from './list'; 7 | 8 | class PageList extends React.Component { 9 | state = { 10 | liked: { 11 | news: [], 12 | archived: [] 13 | }, 14 | loading: true 15 | }; 16 | 17 | async componentDidMount() { 18 | const liked = await AsyncStorage.getItem('liked'); 19 | 20 | const newState = {loading: false}; 21 | if (liked !== null) newState.liked = JSON.parse(liked); 22 | 23 | Expo.Amplitude.logEventWithProperties('List.Load', { 24 | likedNews: newState.liked ? newState.liked.news.length : 0, 25 | likedArchived: newState.liked ? newState.liked.archived.length : 0 26 | }); 27 | 28 | this.setState(newState); 29 | } 30 | 31 | onView = (product) => { 32 | Expo.Amplitude.logEventWithProperties('List.View', { 33 | productId: product.id 34 | }); 35 | 36 | Linking.openURL(product.discussion_url); 37 | 38 | const {liked} = this.state; 39 | if (liked.news.some(p => p.id === product.id)) { 40 | const newLiked = { 41 | news: liked.news.filter(p => p.id !== product.id), 42 | archived: [product, ...liked.archived.slice(0, 49)] // 50 max 43 | }; 44 | this.setState({liked: newLiked}); 45 | AsyncStorage.setItem('liked', JSON.stringify(newLiked)); 46 | } 47 | } 48 | 49 | render() { 50 | return ( 51 | 52 | 56 | 57 | ); 58 | } 59 | } 60 | 61 | export default PageList; 62 | -------------------------------------------------------------------------------- /js/list/item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Button, ListItem, Text, Left, Body, Right} from 'native-base'; 3 | 4 | import Thumb from '../Thumb'; 5 | 6 | const Item = ({ 7 | name, 8 | tagline, 9 | thumbnail, 10 | onView 11 | }) => ( 12 | 13 | 14 | 15 | 16 | 17 | {name} 18 | {tagline} 19 | 20 | 21 | 24 | 25 | 26 | ) 27 | 28 | export default Item; 29 | -------------------------------------------------------------------------------- /js/list/list.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Content, List, Text, Body, Separator} from 'native-base'; 3 | 4 | import Item from './item'; 5 | 6 | const ProductList = ({news, archived, onView}) => ( 7 | 8 | 9 | NEWS 10 | 11 | onView(item)} />} 14 | /> 15 | { 16 | news.length === 0 ? ( 17 | 18 | No new linked 19 | 20 | ) : null 21 | } 22 | 23 | ARCHIVED (50 max) 24 | 25 | onView(item)} />} 28 | /> 29 | { 30 | archived.length === 0 ? ( 31 | 32 | No archived yet 33 | 34 | ) : null 35 | } 36 | 37 | ); 38 | 39 | export default ProductList; 40 | -------------------------------------------------------------------------------- /js/onboarding/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AppIntro from 'react-native-app-intro'; 3 | 4 | const Onboarding = ({onDone}) => { 5 | const pageArray = [{ 6 | title: 'Yup', 7 | description: 'Swipe right when you like a product and want to know more. You will find it later in your "liked projects" list.', 8 | img: require('../../img/swipe_right.png'), 9 | imgStyle: { 10 | height: 200, 11 | width: 200, 12 | }, 13 | backgroundColor: '#fa931d', 14 | fontColor: '#fff', 15 | level: 10, 16 | }, { 17 | title: 'Nope', 18 | description: 'Swipe left to pass a product.', 19 | img: require('../../img/swipe_left.png'), 20 | imgStyle: { 21 | height: 200, 22 | width: 200, 23 | }, 24 | backgroundColor: '#e17a04', 25 | fontColor: '#fff', 26 | level: 10, 27 | }, 28 | { 29 | title: 'View on PH', 30 | description: 'Remember to upvote your favorite projects on Product Hunt from your "liked projects" list.', 31 | img: require('../../img/upvote.png'), 32 | imgStyle: { 33 | height: 200, 34 | width: 200, 35 | }, 36 | backgroundColor: '#c76000', 37 | fontColor: '#fff', 38 | level: 10, 39 | }]; 40 | return ( 41 | 52 | ); 53 | } 54 | 55 | export default Onboarding; 56 | -------------------------------------------------------------------------------- /js/page.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Container, Header, Title, Button, Icon, Left, Right, Body, Spinner} from 'native-base'; 3 | 4 | const Page = ({title, children, navigation, loading}) => ( 5 | 6 |
7 | 8 | 14 | 15 | 16 | {title} 17 | 18 | 19 |
20 | 21 | {loading ? : children} 22 | 23 | ); 24 | 25 | export default Page; 26 | -------------------------------------------------------------------------------- /js/sidebar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image} from 'react-native'; 3 | 4 | import { 5 | Content, 6 | Text, 7 | List, 8 | ListItem, 9 | Icon, 10 | Container, 11 | Left, 12 | } from 'native-base'; 13 | 14 | import styles from './style'; 15 | 16 | const drawerCover = require('../../img/drawer-cover.png'); 17 | const drawerImage = require('../../img/sidebar-sh.png'); 18 | 19 | const datas = [ 20 | { 21 | name: 'Today Featured', 22 | route: 'Swiper', 23 | icon: 'md-swap', 24 | }, 25 | { 26 | name: 'My Likes', 27 | route: 'List', 28 | icon: 'md-heart-outline', 29 | } 30 | ]; 31 | 32 | const SideBar = ({navigation}) => ( 33 | 34 | 38 | 39 | 40 | 41 | 44 | navigation.navigate(data.route)} 48 | > 49 | 50 | 55 | {data.name} 56 | 57 | } 58 | /> 59 | 60 | 61 | 62 | ); 63 | 64 | export default SideBar; 65 | -------------------------------------------------------------------------------- /js/sidebar/style.js: -------------------------------------------------------------------------------- 1 | const React = require('react-native'); 2 | 3 | const {Platform, Dimensions} = React; 4 | 5 | const deviceHeight = Dimensions.get('window').height; 6 | const deviceWidth = Dimensions.get('window').width; 7 | 8 | export default { 9 | sidebar: { 10 | flex: 1, 11 | backgroundColor: '#fff' 12 | }, 13 | drawerCover: { 14 | alignSelf: 'stretch', 15 | // resizeMode: 'cover', 16 | height: deviceHeight / 3.5, 17 | width: null, 18 | position: 'relative', 19 | marginBottom: 10 20 | }, 21 | drawerImage: { 22 | position: 'absolute', 23 | // left: (Platform.OS === 'android') ? 30 : 40, 24 | left: Platform.OS === 'android' ? deviceWidth / 10 : deviceWidth / 9, 25 | // top: (Platform.OS === 'android') ? 45 : 55, 26 | top: Platform.OS === 'android' ? deviceHeight / 13 : deviceHeight / 12, 27 | width: 210, 28 | height: 75, 29 | resizeMode: 'cover' 30 | }, 31 | listItemContainer: { 32 | flexDirection: 'row', 33 | justifyContent: 'flex-start', 34 | alignItems: 'center' 35 | }, 36 | iconContainer: { 37 | width: 37, 38 | height: 37, 39 | borderRadius: 18, 40 | marginRight: 12, 41 | paddingTop: Platform.OS === 'android' ? 7 : 5 42 | }, 43 | sidebarIcon: { 44 | fontSize: 21, 45 | color: '#fff', 46 | lineHeight: Platform.OS === 'android' ? 21 : 25, 47 | backgroundColor: 'transparent', 48 | alignSelf: 'center' 49 | }, 50 | text: { 51 | fontWeight: Platform.OS === 'ios' ? '500' : '400', 52 | fontSize: 16, 53 | marginLeft: 20 54 | }, 55 | badgeText: { 56 | fontSize: Platform.OS === 'ios' ? 13 : 11, 57 | fontWeight: '400', 58 | textAlign: 'center', 59 | marginTop: Platform.OS === 'android' ? -3 : undefined 60 | } 61 | }; 62 | -------------------------------------------------------------------------------- /native-base-theme/components/Badge.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const badgeTheme = { 5 | ".primary": { 6 | backgroundColor: variables.btnPrimaryBg 7 | }, 8 | ".warning": { 9 | backgroundColor: variables.btnWarningBg 10 | }, 11 | ".info": { 12 | backgroundColor: variables.btnInfoBg 13 | }, 14 | ".success": { 15 | backgroundColor: variables.btnSuccessBg 16 | }, 17 | ".danger": { 18 | backgroundColor: variables.btnDangerBg 19 | }, 20 | "NativeBase.Text": { 21 | color: variables.badgeColor, 22 | fontSize: variables.fontSizeBase, 23 | lineHeight: variables.lineHeight - 1, 24 | textAlign: "center", 25 | paddingHorizontal: 3 26 | }, 27 | backgroundColor: variables.badgeBg, 28 | padding: variables.badgePadding, 29 | paddingHorizontal: 6, 30 | alignSelf: "flex-start", 31 | borderRadius: 13.5, 32 | height: 27 33 | }; 34 | return badgeTheme; 35 | }; 36 | -------------------------------------------------------------------------------- /native-base-theme/components/Body.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const bodyTheme = { 5 | flex: 1, 6 | alignItems: 'center', 7 | alignSelf: 'center', 8 | }; 9 | 10 | return bodyTheme; 11 | }; 12 | -------------------------------------------------------------------------------- /native-base-theme/components/Button.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platformStyle = variables.platformStyle; 5 | const platform = variables.platform; 6 | 7 | const buttonTheme = { 8 | ".disabled": { 9 | backgroundColor: variables.btnDisabledBg 10 | }, 11 | ".bordered": { 12 | ".dark": { 13 | "NativeBase.Text": { 14 | color: "#000" 15 | }, 16 | "NativeBase.Icon": { 17 | color: "#000" 18 | }, 19 | "NativeBase.IconNB": { 20 | color: "#000" 21 | }, 22 | backgroundColor: "transparent", 23 | borderColor: "#000", 24 | borderWidth: variables.borderWidth * 2 25 | }, 26 | ".light": { 27 | "NativeBase.Text": { 28 | color: "#f4f4f4" 29 | }, 30 | "NativeBase.Icon": { 31 | color: "#f4f4f4" 32 | }, 33 | "NativeBase.IconNB": { 34 | color: "#f4f4f4" 35 | }, 36 | backgroundColor: "transparent", 37 | borderColor: "#f4f4f4", 38 | borderWidth: variables.borderWidth * 2 39 | }, 40 | ".primary": { 41 | "NativeBase.Text": { 42 | color: variables.btnPrimaryBg 43 | }, 44 | "NativeBase.Icon": { 45 | color: variables.btnPrimaryBg 46 | }, 47 | "NativeBase.IconNB": { 48 | color: variables.btnPrimaryBg 49 | }, 50 | backgroundColor: "transparent", 51 | borderColor: variables.btnPrimaryBg, 52 | borderWidth: variables.borderWidth * 2 53 | }, 54 | ".success": { 55 | "NativeBase.Text": { 56 | color: variables.btnSuccessBg 57 | }, 58 | "NativeBase.Icon": { 59 | color: variables.btnSuccessBg 60 | }, 61 | "NativeBase.IconNB": { 62 | color: variables.btnSuccessBg 63 | }, 64 | backgroundColor: "transparent", 65 | borderColor: variables.btnSuccessBg, 66 | borderWidth: variables.borderWidth * 2 67 | }, 68 | ".info": { 69 | "NativeBase.Text": { 70 | color: variables.btnInfoBg 71 | }, 72 | "NativeBase.Icon": { 73 | color: variables.btnInfoBg 74 | }, 75 | "NativeBase.IconNB": { 76 | color: variables.btnInfoBg 77 | }, 78 | backgroundColor: "transparent", 79 | borderColor: variables.btnInfoBg, 80 | borderWidth: variables.borderWidth * 2 81 | }, 82 | ".warning": { 83 | "NativeBase.Text": { 84 | color: variables.btnWarningBg 85 | }, 86 | "NativeBase.Icon": { 87 | color: variables.btnWarningBg 88 | }, 89 | "NativeBase.IconNB": { 90 | color: variables.btnWarningBg 91 | }, 92 | backgroundColor: "transparent", 93 | borderColor: variables.btnWarningBg, 94 | borderWidth: variables.borderWidth * 2 95 | }, 96 | ".danger": { 97 | "NativeBase.Text": { 98 | color: variables.btnDangerBg 99 | }, 100 | "NativeBase.Icon": { 101 | color: variables.btnDangerBg 102 | }, 103 | "NativeBase.IconNB": { 104 | color: variables.btnDangerBg 105 | }, 106 | backgroundColor: "transparent", 107 | borderColor: variables.btnDangerBg, 108 | borderWidth: variables.borderWidth * 2 109 | }, 110 | ".disabled": { 111 | backgroundColor: null, 112 | borderColor: variables.btnDisabledBg, 113 | borderWidth: variables.borderWidth * 2, 114 | "NativeBase.Text": { 115 | color: variables.btnDisabledBg 116 | } 117 | }, 118 | "NativeBase.Text": { 119 | color: variables.btnPrimaryBg 120 | }, 121 | "NativeBase.Icon": { 122 | color: variables.btnPrimaryBg 123 | }, 124 | "NativeBase.IconNB": { 125 | color: variables.btnPrimaryBg 126 | }, 127 | borderWidth: variables.borderWidth * 2, 128 | elevation: null, 129 | shadowColor: null, 130 | shadowOffset: null, 131 | shadowOpacity: null, 132 | shadowRadius: null, 133 | backgroundColor: "transparent" 134 | }, 135 | 136 | ".dark": { 137 | ".bordered": { 138 | "NativeBase.Text": { 139 | color: "#000" 140 | }, 141 | "NativeBase.Icon": { 142 | color: "#000" 143 | }, 144 | "NativeBase.IconNB": { 145 | color: "#000" 146 | } 147 | }, 148 | backgroundColor: "#000" 149 | }, 150 | ".light": { 151 | ".transparent": { 152 | "NativeBase.Text": { 153 | color: "#f4f4f4" 154 | }, 155 | "NativeBase.Icon": { 156 | color: "#f4f4f4" 157 | }, 158 | "NativeBase.IconNB": { 159 | color: "#f4f4f4" 160 | }, 161 | backgroundColor: null 162 | }, 163 | ".bordered": { 164 | "NativeBase.Text": { 165 | color: "#f4f4f4" 166 | }, 167 | "NativeBase.Icon": { 168 | color: "#f4f4f4" 169 | }, 170 | "NativeBase.IconNB": { 171 | color: "#f4f4f4" 172 | } 173 | }, 174 | "NativeBase.Text": { 175 | color: "#000" 176 | }, 177 | "NativeBase.Icon": { 178 | color: "#000" 179 | }, 180 | "NativeBase.IconNB": { 181 | color: "#000" 182 | }, 183 | backgroundColor: "#f4f4f4" 184 | }, 185 | 186 | ".primary": { 187 | ".bordered": { 188 | "NativeBase.Text": { 189 | color: variables.btnPrimaryBg 190 | }, 191 | "NativeBase.Icon": { 192 | color: variables.btnPrimaryBg 193 | }, 194 | "NativeBase.IconNB": { 195 | color: variables.btnPrimaryBg 196 | } 197 | }, 198 | backgroundColor: variables.btnPrimaryBg 199 | }, 200 | 201 | ".success": { 202 | ".bordered": { 203 | "NativeBase.Text": { 204 | color: variables.btnSuccessBg 205 | }, 206 | "NativeBase.Icon": { 207 | color: variables.btnSuccessBg 208 | }, 209 | "NativeBase.IconNB": { 210 | color: variables.btnSuccessBg 211 | } 212 | }, 213 | backgroundColor: variables.btnSuccessBg 214 | }, 215 | 216 | ".info": { 217 | ".bordered": { 218 | "NativeBase.Text": { 219 | color: variables.btnInfoBg 220 | }, 221 | "NativeBase.Icon": { 222 | color: variables.btnInfoBg 223 | }, 224 | "NativeBase.IconNB": { 225 | color: variables.btnInfoBg 226 | } 227 | }, 228 | backgroundColor: variables.btnInfoBg 229 | }, 230 | 231 | ".warning": { 232 | ".bordered": { 233 | "NativeBase.Text": { 234 | color: variables.btnWarningBg 235 | }, 236 | "NativeBase.Icon": { 237 | color: variables.btnWarningBg 238 | }, 239 | "NativeBase.IconNB": { 240 | color: variables.btnWarningBg 241 | } 242 | }, 243 | backgroundColor: variables.btnWarningBg 244 | }, 245 | 246 | ".danger": { 247 | ".bordered": { 248 | "NativeBase.Text": { 249 | color: variables.btnDangerBg 250 | }, 251 | "NativeBase.Icon": { 252 | color: variables.btnDangerBg 253 | }, 254 | "NativeBase.IconNB": { 255 | color: variables.btnDangerBg 256 | } 257 | }, 258 | backgroundColor: variables.btnDangerBg 259 | }, 260 | 261 | ".block": { 262 | justifyContent: "center", 263 | alignSelf: "stretch" 264 | }, 265 | 266 | ".full": { 267 | justifyContent: "center", 268 | alignSelf: "stretch", 269 | borderRadius: 0 270 | }, 271 | 272 | ".rounded": { 273 | paddingHorizontal: variables.buttonPadding + 20, 274 | borderRadius: variables.borderRadiusLarge 275 | }, 276 | 277 | ".transparent": { 278 | backgroundColor: "transparent", 279 | elevation: 0, 280 | shadowColor: null, 281 | shadowOffset: null, 282 | shadowRadius: null, 283 | shadowOpacity: null, 284 | 285 | "NativeBase.Text": { 286 | color: variables.btnPrimaryBg 287 | }, 288 | "NativeBase.Icon": { 289 | color: variables.btnPrimaryBg 290 | }, 291 | "NativeBase.IconNB": { 292 | color: variables.btnPrimaryBg 293 | }, 294 | ".dark": { 295 | "NativeBase.Text": { 296 | color: "#000" 297 | }, 298 | "NativeBase.IconNB": { 299 | color: "#000" 300 | }, 301 | "NativeBase.Icon": { 302 | color: "#000" 303 | }, 304 | backgroundColor: null 305 | }, 306 | ".danger": { 307 | "NativeBase.Text": { 308 | color: variables.btnDangerBg 309 | }, 310 | "NativeBase.IconNB": { 311 | color: variables.btnDangerBg 312 | }, 313 | "NativeBase.Icon": { 314 | color: variables.btnDangerBg 315 | }, 316 | backgroundColor: null 317 | }, 318 | ".warning": { 319 | "NativeBase.Text": { 320 | color: variables.btnWarningBg 321 | }, 322 | "NativeBase.IconNB": { 323 | color: variables.btnWarningBg 324 | }, 325 | "NativeBase.Icon": { 326 | color: variables.btnWarningBg 327 | }, 328 | backgroundColor: null 329 | }, 330 | ".info": { 331 | "NativeBase.Text": { 332 | color: variables.btnInfoBg 333 | }, 334 | "NativeBase.IconNB": { 335 | color: variables.btnInfoBg 336 | }, 337 | "NativeBase.Icon": { 338 | color: variables.btnInfoBg 339 | }, 340 | backgroundColor: null 341 | }, 342 | ".primary": { 343 | "NativeBase.Text": { 344 | color: variables.btnPrimaryBg 345 | }, 346 | "NativeBase.IconNB": { 347 | color: variables.btnPrimaryBg 348 | }, 349 | "NativeBase.Icon": { 350 | color: variables.btnPrimaryBg 351 | }, 352 | backgroundColor: null 353 | }, 354 | ".success": { 355 | "NativeBase.Text": { 356 | color: variables.btnSuccessBg 357 | }, 358 | "NativeBase.IconNB": { 359 | color: variables.btnSuccessBg 360 | }, 361 | "NativeBase.Icon": { 362 | color: variables.btnSuccessBg 363 | }, 364 | backgroundColor: null 365 | }, 366 | ".light": { 367 | "NativeBase.Text": { 368 | color: "#f4f4f4" 369 | }, 370 | "NativeBase.IconNB": { 371 | color: "#f4f4f4" 372 | }, 373 | "NativeBase.Icon": { 374 | color: "#f4f4f4" 375 | }, 376 | backgroundColor: null 377 | } 378 | }, 379 | 380 | ".small": { 381 | height: 30, 382 | "NativeBase.Text": { 383 | fontSize: 14 384 | } 385 | }, 386 | 387 | ".large": { 388 | height: 60, 389 | "NativeBase.Text": { 390 | fontSize: 22, 391 | lineHeight: 32 392 | } 393 | }, 394 | 395 | ".capitalize": {}, 396 | 397 | ".vertical": { 398 | flexDirection: "column", 399 | height: null 400 | }, 401 | 402 | "NativeBase.Text": { 403 | fontFamily: variables.btnFontFamily, 404 | marginLeft: 0, 405 | marginRight: 0, 406 | color: variables.inverseTextColor, 407 | fontSize: variables.btnTextSize, 408 | lineHeight: variables.btnLineHeight 409 | // childPosition: 1 410 | }, 411 | 412 | "NativeBase.Icon": { 413 | color: variables.inverseTextColor, 414 | fontSize: 24, 415 | marginHorizontal: 5, 416 | paddingTop: platform === "ios" ? 2 : undefined 417 | }, 418 | "NativeBase.IconNB": { 419 | color: variables.inverseTextColor, 420 | fontSize: 24, 421 | marginHorizontal: 5, 422 | paddingTop: platform === "ios" ? 2 : undefined 423 | }, 424 | 425 | ".iconLeft": { 426 | "NativeBase.Text": { 427 | marginLeft: variables.buttonPadding 428 | }, 429 | "NativeBase.IconNB": { 430 | marginRight: 10, 431 | marginLeft: 0 432 | }, 433 | "NativeBase.Icon": { 434 | marginRight: 10, 435 | marginLeft: 0 436 | } 437 | }, 438 | ".iconRight": { 439 | "NativeBase.Text": { 440 | marginRight: variables.buttonPadding 441 | }, 442 | "NativeBase.IconNB": { 443 | marginLeft: 10, 444 | marginRight: 0 445 | }, 446 | "NativeBase.Icon": { 447 | marginLeft: 10, 448 | marginRight: 0 449 | } 450 | }, 451 | ".picker": { 452 | "NativeBase.Text": { 453 | ".note": { 454 | fontSize: 16, 455 | lineHeight: null 456 | } 457 | } 458 | }, 459 | 460 | paddingVertical: variables.buttonPadding, 461 | paddingHorizontal: variables.buttonPadding + 10, 462 | backgroundColor: variables.btnPrimaryBg, 463 | borderRadius: variables.borderRadiusBase, 464 | borderColor: variables.btnPrimaryBg, 465 | borderWidth: null, 466 | height: 45, 467 | alignSelf: "flex-start", 468 | flexDirection: "row", 469 | elevation: 2, 470 | shadowColor: platformStyle === "material" ? "#000" : undefined, 471 | shadowOffset: 472 | platformStyle === "material" ? { width: 0, height: 2 } : undefined, 473 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 474 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 475 | alignItems: "center", 476 | justifyContent: "space-between" 477 | }; 478 | return buttonTheme; 479 | }; 480 | -------------------------------------------------------------------------------- /native-base-theme/components/Card.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const cardTheme = { 5 | ".transparent": { 6 | shadowColor: null, 7 | shadowOffset: null, 8 | shadowOpacity: null, 9 | shadowRadius: null, 10 | elevation: null 11 | }, 12 | marginVertical: 5, 13 | marginHorizontal: 2, 14 | flex: 1, 15 | borderWidth: variables.borderWidth, 16 | borderRadius: 2, 17 | borderColor: variables.cardBorderColor, 18 | flexWrap: "wrap", 19 | backgroundColor: variables.cardDefaultBg, 20 | shadowColor: "#000", 21 | shadowOffset: { width: 0, height: 2 }, 22 | shadowOpacity: 0.1, 23 | shadowRadius: 1.5, 24 | elevation: 3 25 | }; 26 | 27 | return cardTheme; 28 | }; 29 | -------------------------------------------------------------------------------- /native-base-theme/components/CardItem.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const cardItemTheme = { 7 | 'NativeBase.Left': { 8 | 'NativeBase.Body': { 9 | 'NativeBase.Text': { 10 | '.note': { 11 | color: variables.listNoteColor, 12 | fontWeight: '400', 13 | marginRight: 20, 14 | }, 15 | }, 16 | flex: 1, 17 | marginLeft: 10, 18 | alignItems: null, 19 | }, 20 | 'NativeBase.Icon': { 21 | fontSize: variables.iconFontSize, 22 | }, 23 | 'NativeBase.IconNB': { 24 | fontSize: variables.iconFontSize, 25 | }, 26 | 'NativeBase.Text': { 27 | marginLeft: 10, 28 | alignSelf: 'center', 29 | }, 30 | 'NativeBase.Button': { 31 | '.transparent': { 32 | 'NativeBase.Text': { 33 | fontSize: variables.DefaultFontSize - 4, 34 | color: variables.sTabBarActiveTextColor, 35 | }, 36 | 'NativeBase.Icon': { 37 | fontSize: variables.iconFontSize - 10, 38 | color: variables.sTabBarActiveTextColor, 39 | marginHorizontal: null, 40 | }, 41 | 'NativeBase.IconNB': { 42 | fontSize: variables.iconFontSize - 10, 43 | color: variables.sTabBarActiveTextColor, 44 | }, 45 | paddingVertical: null, 46 | paddingHorizontal: null, 47 | paddingRight: variables.listItemPadding + 5, 48 | }, 49 | }, 50 | flex: 1, 51 | flexDirection: 'row', 52 | alignItems: 'center', 53 | }, 54 | 55 | '.content': { 56 | 'NativeBase.Text': { 57 | color: platform === 'ios' ? '#555' : '#222', 58 | fontSize: variables.DefaultFontSize - 3, 59 | }, 60 | }, 61 | '.cardBody': { 62 | padding: -5, 63 | 'NativeBase.Text': { 64 | marginTop: 5, 65 | }, 66 | }, 67 | 'NativeBase.Body': { 68 | 'NativeBase.Text': { 69 | '.note': { 70 | color: variables.listNoteColor, 71 | fontWeight: '200', 72 | marginRight: 20, 73 | }, 74 | }, 75 | 'NativeBase.Button': { 76 | '.transparent': { 77 | 'NativeBase.Text': { 78 | fontSize: variables.DefaultFontSize - 4, 79 | color: variables.sTabBarActiveTextColor, 80 | }, 81 | 'NativeBase.Icon': { 82 | fontSize: variables.iconFontSize - 10, 83 | color: variables.sTabBarActiveTextColor, 84 | marginHorizontal: null, 85 | }, 86 | 'NativeBase.IconNB': { 87 | fontSize: variables.iconFontSize - 10, 88 | color: variables.sTabBarActiveTextColor, 89 | }, 90 | paddingVertical: null, 91 | paddingHorizontal: null, 92 | paddingRight: variables.listItemPadding + 5, 93 | alignSelf: 'stretch', 94 | }, 95 | }, 96 | flex: 1, 97 | alignSelf: 'stretch', 98 | alignItems: 'flex-start', 99 | }, 100 | 'NativeBase.Right': { 101 | 'NativeBase.Badge': { 102 | alignSelf: null, 103 | }, 104 | 'NativeBase.Button': { 105 | '.transparent': { 106 | 'NativeBase.Text': { 107 | fontSize: variables.DefaultFontSize - 4, 108 | color: variables.sTabBarActiveTextColor, 109 | }, 110 | 'NativeBase.Icon': { 111 | fontSize: variables.iconFontSize - 10, 112 | color: variables.sTabBarActiveTextColor, 113 | marginHorizontal: null, 114 | }, 115 | 'NativeBase.IconNB': { 116 | fontSize: variables.iconFontSize - 10, 117 | color: variables.sTabBarActiveTextColor, 118 | }, 119 | paddingVertical: null, 120 | paddingHorizontal: null, 121 | }, 122 | alignSelf: null, 123 | }, 124 | 'NativeBase.Icon': { 125 | alignSelf: null, 126 | fontSize: variables.iconFontSize - 8, 127 | color: variables.cardBorderColor, 128 | }, 129 | 'NativeBase.IconNB': { 130 | alignSelf: null, 131 | fontSize: variables.iconFontSize - 8, 132 | color: variables.cardBorderColor, 133 | }, 134 | 'NativeBase.Text': { 135 | fontSize: variables.DefaultFontSize - 2, 136 | alignSelf: null, 137 | }, 138 | 'NativeBase.Thumbnail': { 139 | alignSelf: null, 140 | }, 141 | 'NativeBase.Image': { 142 | alignSelf: null, 143 | }, 144 | 'NativeBase.Radio': { 145 | alignSelf: null, 146 | }, 147 | 'NativeBase.Checkbox': { 148 | alignSelf: null, 149 | }, 150 | 'NativeBase.Switch': { 151 | alignSelf: null, 152 | }, 153 | flex: 0.8, 154 | }, 155 | '.header': { 156 | 'NativeBase.Text': { 157 | fontSize: 16, 158 | fontWeight: platform === 'ios' ? '500' : undefined, 159 | }, 160 | '.bordered': { 161 | 'NativeBase.Text': { 162 | color: variables.sTabBarActiveTextColor, 163 | fontWeight: platform === 'ios' ? '500' : undefined, 164 | }, 165 | borderBottomWidth: platform === 'ios' ? variables.borderWidth : null, 166 | }, 167 | borderBottomWidth: null, 168 | paddingVertical: variables.listItemPadding + 5, 169 | }, 170 | '.footer': { 171 | 'NativeBase.Text': { 172 | fontSize: 16, 173 | fontWeight: platform === 'ios' ? '500' : undefined, 174 | }, 175 | '.bordered': { 176 | 'NativeBase.Text': { 177 | color: variables.activeTab, 178 | fontWeight: '500', 179 | }, 180 | borderTopWidth: platform === 'ios' ? variables.borderWidth : null, 181 | }, 182 | borderBottomWidth: null, 183 | }, 184 | 'NativeBase.Text': { 185 | '.note': { 186 | color: variables.listNoteColor, 187 | fontWeight: '200', 188 | }, 189 | }, 190 | 191 | 'NativeBase.Icon': { 192 | width: variables.iconFontSize + 5, 193 | fontSize: variables.iconFontSize - 2, 194 | }, 195 | 'NativeBase.IconNB': { 196 | width: variables.iconFontSize + 5, 197 | fontSize: variables.iconFontSize - 2, 198 | }, 199 | 200 | '.bordered': { 201 | borderBottomWidth: variables.borderWidth, 202 | borderColor: variables.cardBorderColor, 203 | }, 204 | flexDirection: 'row', 205 | alignItems: 'center', 206 | borderRadius: 2, 207 | padding: variables.listItemPadding + 5, 208 | paddingVertical: variables.listItemPadding, 209 | backgroundColor: variables.cardDefaultBg, 210 | }; 211 | 212 | return cardItemTheme; 213 | }; 214 | -------------------------------------------------------------------------------- /native-base-theme/components/CheckBox.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const checkBoxTheme = { 5 | ".checked": { 6 | "NativeBase.Icon": { 7 | color: variables.checkboxTickColor 8 | }, 9 | "NativeBase.IconNB": { 10 | color: variables.checkboxTickColor 11 | } 12 | }, 13 | "NativeBase.Icon": { 14 | color: "transparent", 15 | lineHeight: variables.CheckboxIconSize, 16 | marginTop: variables.CheckboxIconMarginTop, 17 | fontSize: variables.CheckboxFontSize 18 | }, 19 | "NativeBase.IconNB": { 20 | color: "transparent", 21 | lineHeight: variables.CheckboxIconSize, 22 | marginTop: variables.CheckboxIconMarginTop, 23 | fontSize: variables.CheckboxFontSize 24 | }, 25 | borderRadius: variables.CheckboxRadius, 26 | overflow: "hidden", 27 | width: variables.checkboxSize, 28 | height: variables.checkboxSize, 29 | borderWidth: variables.CheckboxBorderWidth, 30 | paddingLeft: variables.CheckboxPaddingLeft - 1, 31 | paddingBottom: variables.CheckboxPaddingBottom, 32 | left: 10 33 | }; 34 | 35 | return checkBoxTheme; 36 | }; 37 | -------------------------------------------------------------------------------- /native-base-theme/components/Container.js: -------------------------------------------------------------------------------- 1 | import { Platform, Dimensions } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | export default (variables = variable) => { 7 | const theme = { 8 | flex: 1, 9 | height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20 10 | }; 11 | 12 | return theme; 13 | }; 14 | -------------------------------------------------------------------------------- /native-base-theme/components/Content.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const contentTheme = { 5 | ".padder": { 6 | padding: variables.contentPadding 7 | }, 8 | flex: 1, 9 | backgroundColor: "transparent", 10 | "NativeBase.Segment": { 11 | borderWidth: 0, 12 | backgroundColor: "transparent" 13 | } 14 | }; 15 | 16 | return contentTheme; 17 | }; 18 | -------------------------------------------------------------------------------- /native-base-theme/components/Fab.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const fabTheme = { 7 | "NativeBase.Button": { 8 | alignItems: "center", 9 | padding: null, 10 | justifyContent: "center", 11 | "NativeBase.Icon": { 12 | alignSelf: "center" 13 | }, 14 | "NativeBase.IconNB": { 15 | alignSelf: "center", 16 | fontSize: 20, 17 | lineHeight: platform === "ios" ? 24 : undefined 18 | } 19 | } 20 | }; 21 | 22 | return fabTheme; 23 | }; 24 | -------------------------------------------------------------------------------- /native-base-theme/components/Footer.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platformStyle = variables.platformStyle; 5 | const platform = variables.platform; 6 | 7 | const footerTheme = { 8 | "NativeBase.Left": { 9 | "NativeBase.Button": { 10 | ".transparent": { 11 | backgroundColor: "transparent", 12 | borderColor: null, 13 | elevation: 0, 14 | shadowColor: null, 15 | shadowOffset: null, 16 | shadowRadius: null, 17 | shadowOpacity: null 18 | }, 19 | "NativeBase.Icon": { 20 | color: variables.topTabBarActiveTextColor 21 | }, 22 | "NativeBase.IconNB": { 23 | color: variables.topTabBarActiveTextColor 24 | }, 25 | alignSelf: null 26 | }, 27 | flex: 1, 28 | alignSelf: "center", 29 | alignItems: "flex-start" 30 | }, 31 | "NativeBase.Body": { 32 | flex: 1, 33 | alignItems: "center", 34 | alignSelf: "center", 35 | flexDirection: "row", 36 | "NativeBase.Button": { 37 | alignSelf: "center", 38 | ".transparent": { 39 | backgroundColor: "transparent", 40 | borderColor: null, 41 | elevation: 0, 42 | shadowColor: null, 43 | shadowOffset: null, 44 | shadowRadius: null, 45 | shadowOpacity: null 46 | }, 47 | ".full": { 48 | height: variables.footerHeight, 49 | flex: 1 50 | }, 51 | "NativeBase.Icon": { 52 | color: variables.topTabBarActiveTextColor 53 | }, 54 | "NativeBase.IconNB": { 55 | color: variables.topTabBarActiveTextColor 56 | } 57 | } 58 | }, 59 | "NativeBase.Right": { 60 | "NativeBase.Button": { 61 | ".transparent": { 62 | backgroundColor: "transparent", 63 | borderColor: null, 64 | elevation: 0, 65 | shadowColor: null, 66 | shadowOffset: null, 67 | shadowRadius: null, 68 | shadowOpacity: null 69 | }, 70 | "NativeBase.Icon": { 71 | color: variables.topTabBarActiveTextColor 72 | }, 73 | "NativeBase.IconNB": { 74 | color: variables.topTabBarActiveTextColor 75 | }, 76 | alignSelf: null 77 | }, 78 | flex: 1, 79 | alignSelf: "center", 80 | alignItems: "flex-end" 81 | }, 82 | backgroundColor: variables.footerDefaultBg, 83 | flexDirection: "row", 84 | justifyContent: "center", 85 | borderTopWidth: platform === "ios" && platformStyle !== "material" 86 | ? variables.borderWidth 87 | : undefined, 88 | borderColor: platform === "ios" && platformStyle !== "material" 89 | ? "#cbcbcb" 90 | : undefined, 91 | height: variables.footerHeight, 92 | elevation: 3, 93 | left: 0, 94 | right: 0 95 | }; 96 | 97 | return footerTheme; 98 | }; 99 | -------------------------------------------------------------------------------- /native-base-theme/components/FooterTab.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const platform = variables.platform; 7 | 8 | const footerTabTheme = { 9 | "NativeBase.Button": { 10 | ".active": { 11 | "NativeBase.Text": { 12 | color: variables.tabBarActiveTextColor, 13 | fontSize: variables.tabBarTextSize, 14 | lineHeight: 16 15 | }, 16 | "NativeBase.Icon": { 17 | color: variables.tabBarActiveTextColor 18 | }, 19 | "NativeBase.IconNB": { 20 | color: variables.tabBarActiveTextColor 21 | }, 22 | backgroundColor: variables.tabActiveBgColor 23 | }, 24 | flexDirection: null, 25 | backgroundColor: "transparent", 26 | borderColor: null, 27 | elevation: 0, 28 | shadowColor: null, 29 | shadowOffset: null, 30 | shadowRadius: null, 31 | shadowOpacity: null, 32 | alignSelf: "center", 33 | flex: 1, 34 | height: variables.footerHeight, 35 | justifyContent: "center", 36 | ".badge": { 37 | "NativeBase.Badge": { 38 | "NativeBase.Text": { 39 | fontSize: 11, 40 | fontWeight: platform === "ios" ? "600" : undefined, 41 | lineHeight: 14 42 | }, 43 | top: -3, 44 | alignSelf: "center", 45 | left: 10, 46 | zIndex: 99, 47 | height: 18, 48 | padding: 1.7, 49 | paddingHorizontal: 3 50 | }, 51 | "NativeBase.Icon": { 52 | marginTop: -18 53 | } 54 | }, 55 | "NativeBase.Icon": { 56 | color: variables.tabBarTextColor 57 | }, 58 | "NativeBase.IconNB": { 59 | color: variables.tabBarTextColor 60 | }, 61 | "NativeBase.Text": { 62 | color: variables.tabBarTextColor, 63 | fontSize: variables.tabBarTextSize, 64 | lineHeight: 16 65 | } 66 | }, 67 | backgroundColor: Platform.OS === "android" 68 | ? variables.tabActiveBgColor 69 | : undefined, 70 | flexDirection: "row", 71 | justifyContent: "space-between", 72 | flex: 1, 73 | alignSelf: "stretch" 74 | }; 75 | 76 | return footerTabTheme; 77 | }; 78 | -------------------------------------------------------------------------------- /native-base-theme/components/Form.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const theme = { 7 | "NativeBase.Item": { 8 | ".fixedLabel": { 9 | "NativeBase.Label": { 10 | paddingLeft: null 11 | }, 12 | marginLeft: 15 13 | }, 14 | ".inlineLabel": { 15 | "NativeBase.Label": { 16 | paddingLeft: null 17 | }, 18 | marginLeft: 15 19 | }, 20 | ".placeholderLabel": { 21 | "NativeBase.Input": {} 22 | }, 23 | ".stackedLabel": { 24 | "NativeBase.Label": { 25 | top: 5, 26 | paddingLeft: null 27 | }, 28 | "NativeBase.Input": { 29 | paddingLeft: null, 30 | marginLeft: platform === "ios" ? undefined : -5 31 | }, 32 | "NativeBase.Icon": { 33 | marginTop: 36 34 | }, 35 | marginLeft: 15 36 | }, 37 | ".floatingLabel": { 38 | "NativeBase.Input": { 39 | paddingLeft: null, 40 | top: 10, 41 | marginLeft: platform === "ios" ? undefined : -5 42 | }, 43 | "NativeBase.Label": { 44 | left: 0, 45 | top: 8 46 | }, 47 | "NativeBase.Icon": { 48 | top: 6 49 | }, 50 | marginTop: 15, 51 | marginLeft: 15 52 | }, 53 | ".regular": { 54 | "NativeBase.Label": { 55 | left: 0 56 | }, 57 | marginLeft: 0 58 | }, 59 | ".rounded": { 60 | "NativeBase.Label": { 61 | left: 0 62 | }, 63 | marginLeft: 0 64 | }, 65 | ".underline": { 66 | "NativeBase.Label": { 67 | left: 0, 68 | top: 0, 69 | position: "relative" 70 | }, 71 | "NativeBase.Input": { 72 | left: -15 73 | }, 74 | marginLeft: 15 75 | }, 76 | ".last": { 77 | marginLeft: 0, 78 | paddingLeft: 15 79 | }, 80 | "NativeBase.Label": { 81 | paddingRight: 5 82 | }, 83 | marginLeft: 15 84 | } 85 | }; 86 | 87 | return theme; 88 | }; 89 | -------------------------------------------------------------------------------- /native-base-theme/components/H1.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const h1Theme = { 5 | color: variables.textColor, 6 | fontSize: variables.fontSizeH1, 7 | lineHeight: variables.lineHeightH1, 8 | }; 9 | 10 | return h1Theme; 11 | }; 12 | -------------------------------------------------------------------------------- /native-base-theme/components/H2.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const h2Theme = { 5 | color: variables.textColor, 6 | fontSize: variables.fontSizeH2, 7 | lineHeight: variables.lineHeightH2, 8 | }; 9 | 10 | return h2Theme; 11 | }; 12 | -------------------------------------------------------------------------------- /native-base-theme/components/H3.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const h3Theme = { 5 | color: variables.textColor, 6 | fontSize: variables.fontSizeH3, 7 | lineHeight: variables.lineHeightH3 8 | }; 9 | 10 | return h3Theme; 11 | }; 12 | -------------------------------------------------------------------------------- /native-base-theme/components/Header.js: -------------------------------------------------------------------------------- 1 | import { PixelRatio } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const platformStyle = variables.platformStyle; 7 | const platform = variables.platform; 8 | 9 | const headerTheme = { 10 | ".span": { 11 | height: 128, 12 | "NativeBase.Left": { 13 | alignSelf: "flex-start" 14 | }, 15 | "NativeBase.Body": { 16 | alignSelf: "flex-end", 17 | alignItems: "flex-start", 18 | justifyContent: "center", 19 | paddingBottom: 26 20 | }, 21 | "NativeBase.Right": { 22 | alignSelf: "flex-start" 23 | } 24 | }, 25 | ".hasSubtitle": { 26 | "NativeBase.Body": { 27 | "NativeBase.Title": { 28 | fontSize: variables.titleFontSize - 2, 29 | fontFamily: variables.titleFontfamily, 30 | textAlign: "center" 31 | }, 32 | "NativeBase.Subtitle": { 33 | fontSize: variables.subTitleFontSize, 34 | fontFamily: variables.titleFontfamily, 35 | color: variables.subtitleColor, 36 | textAlign: "center" 37 | } 38 | } 39 | }, 40 | ".noShadow": { 41 | elevation: 0, 42 | shadowColor: null, 43 | shadowOffset: null, 44 | shadowRadius: null, 45 | shadowOpacity: null 46 | }, 47 | ".hasTabs": { 48 | elevation: 0, 49 | shadowColor: null, 50 | shadowOffset: null, 51 | shadowRadius: null, 52 | shadowOpacity: null, 53 | borderBottomWidth: null 54 | }, 55 | ".hasSegment": { 56 | elevation: 0, 57 | shadowColor: null, 58 | shadowOffset: null, 59 | shadowRadius: null, 60 | shadowOpacity: null, 61 | borderBottomWidth: null 62 | }, 63 | "NativeBase.Button": { 64 | justifyContent: "center", 65 | alignSelf: "center", 66 | alignItems: "center", 67 | ".transparent": { 68 | "NativeBase.Text": { 69 | color: variables.toolbarBtnColor, 70 | fontWeight: "600" 71 | }, 72 | "NativeBase.Icon": { 73 | color: variables.toolbarBtnColor 74 | }, 75 | "NativeBase.IconNB": { 76 | color: variables.toolbarBtnColor 77 | }, 78 | paddingHorizontal: variables.buttonPadding 79 | }, 80 | paddingHorizontal: 15 81 | }, 82 | ".searchBar": { 83 | "NativeBase.Item": { 84 | "NativeBase.Icon": { 85 | backgroundColor: "transparent", 86 | color: variables.dropdownLinkColor, 87 | fontSize: variables.toolbarSearchIconSize, 88 | alignItems: "center", 89 | marginTop: 2, 90 | paddingRight: 10, 91 | paddingLeft: 10 92 | }, 93 | "NativeBase.IconNB": { 94 | backgroundColor: "transparent", 95 | color: null, 96 | alignSelf: "center" 97 | }, 98 | "NativeBase.Input": { 99 | alignSelf: "center", 100 | lineHeight: 24, 101 | height: variables.searchBarHeight 102 | }, 103 | alignSelf: "center", 104 | alignItems: "center", 105 | justifyContent: "flex-start", 106 | flex: 1, 107 | height: variables.searchBarHeight, 108 | borderColor: "transparent", 109 | backgroundColor: variables.toolbarInputColor 110 | }, 111 | "NativeBase.Button": { 112 | ".transparent": { 113 | "NativeBase.Text": { 114 | fontWeight: "500" 115 | }, 116 | paddingHorizontal: null, 117 | paddingLeft: platform === "ios" ? 10 : null 118 | }, 119 | paddingHorizontal: platform === "ios" ? undefined : null, 120 | width: platform === "ios" ? undefined : 0, 121 | height: platform === "ios" ? undefined : 0 122 | } 123 | }, 124 | ".rounded": { 125 | "NativeBase.Item": { 126 | borderRadius: platform === "ios" && platformStyle !== "material" 127 | ? 25 128 | : 3 129 | } 130 | }, 131 | "NativeBase.Left": { 132 | "NativeBase.Button": { 133 | ".hasText": { 134 | marginLeft: -10, 135 | height: 30, 136 | "NativeBase.Icon": { 137 | color: variables.toolbarBtnColor, 138 | fontSize: variables.iconHeaderSize, 139 | marginTop: 2, 140 | marginRight: 5, 141 | marginLeft: 2 142 | }, 143 | "NativeBase.Text": { 144 | color: variables.toolbarBtnColor, 145 | fontSize: 17, 146 | marginLeft: 2, 147 | lineHeight: 21 148 | }, 149 | "NativeBase.IconNB": { 150 | color: variables.toolbarBtnColor, 151 | fontSize: variables.iconHeaderSize, 152 | marginTop: 2, 153 | marginRight: 5, 154 | marginLeft: 2 155 | } 156 | }, 157 | ".transparent": { 158 | marginLeft: -3, 159 | "NativeBase.Icon": { 160 | color: variables.toolbarBtnColor, 161 | fontSize: variables.iconHeaderSize, 162 | marginTop: 2, 163 | marginRight: 2, 164 | marginLeft: 2 165 | }, 166 | "NativeBase.IconNB": { 167 | color: variables.toolbarBtnColor, 168 | fontSize: variables.iconHeaderSize, 169 | marginTop: 2, 170 | marginRight: 2, 171 | marginLeft: 2 172 | }, 173 | "NativeBase.Text": { 174 | color: variables.toolbarBtnColor, 175 | fontSize: 17, 176 | top: platform === "ios" ? undefined : -1.5 177 | }, 178 | backgroundColor: "transparent", 179 | borderColor: null, 180 | elevation: 0, 181 | shadowColor: null, 182 | shadowOffset: null, 183 | shadowRadius: null, 184 | shadowOpacity: null 185 | }, 186 | "NativeBase.Icon": { 187 | color: variables.toolbarBtnColor 188 | }, 189 | "NativeBase.IconNB": { 190 | color: variables.toolbarBtnColor 191 | }, 192 | alignSelf: null, 193 | paddingHorizontal: variables.buttonPadding 194 | }, 195 | flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5, 196 | alignSelf: "center", 197 | alignItems: "flex-start" 198 | }, 199 | "NativeBase.Body": { 200 | flex: 1, 201 | alignItems: platform === "ios" && platformStyle !== "material" 202 | ? "center" 203 | : "flex-start", 204 | alignSelf: "center", 205 | "NativeBase.Segment": { 206 | borderWidth: 0, 207 | alignSelf: "flex-end", 208 | marginRight: platform === "ios" ? -40 : -55 209 | }, 210 | "NativeBase.Button": { 211 | alignSelf: "center", 212 | ".transparent": { 213 | backgroundColor: "transparent" 214 | }, 215 | "NativeBase.Icon": { 216 | color: variables.toolbarBtnColor 217 | }, 218 | "NativeBase.IconNB": { 219 | color: variables.toolbarBtnColor 220 | }, 221 | "NativeBase.Text": { 222 | color: variables.inverseTextColor, 223 | backgroundColor: "transparent" 224 | } 225 | } 226 | }, 227 | "NativeBase.Right": { 228 | "NativeBase.Button": { 229 | ".hasText": { 230 | height: 30, 231 | "NativeBase.Icon": { 232 | color: variables.toolbarBtnColor, 233 | fontSize: variables.iconHeaderSize - 2, 234 | marginTop: 2, 235 | marginRight: 2, 236 | marginLeft: 5 237 | }, 238 | "NativeBase.Text": { 239 | color: variables.toolbarBtnColor, 240 | fontSize: 17, 241 | lineHeight: 21 242 | }, 243 | "NativeBase.IconNB": { 244 | color: variables.toolbarBtnColor, 245 | fontSize: variables.iconHeaderSize - 2, 246 | marginTop: 2, 247 | marginRight: 2, 248 | marginLeft: 5 249 | } 250 | }, 251 | ".transparent": { 252 | marginRight: -8, 253 | paddingHorizontal: 15, 254 | borderRadius: 50, 255 | "NativeBase.Icon": { 256 | color: variables.toolbarBtnColor, 257 | fontSize: platform === "ios" 258 | ? variables.iconHeaderSize - 6 259 | : variables.iconHeaderSize - 2, 260 | marginTop: 2, 261 | marginLeft: 2, 262 | marginRight: 2 263 | }, 264 | "NativeBase.IconNB": { 265 | color: variables.toolbarBtnColor, 266 | fontSize: platform === "ios" 267 | ? variables.iconHeaderSize - 6 268 | : variables.iconHeaderSize - 2, 269 | marginTop: 2, 270 | marginLeft: 2, 271 | marginRight: 2 272 | }, 273 | "NativeBase.Text": { 274 | color: variables.toolbarBtnColor, 275 | fontSize: 17, 276 | top: platform === "ios" ? undefined : -1.5 277 | }, 278 | backgroundColor: "transparent", 279 | borderColor: null, 280 | elevation: 0, 281 | shadowColor: null, 282 | shadowOffset: null, 283 | shadowRadius: null, 284 | shadowOpacity: null 285 | }, 286 | "NativeBase.Icon": { 287 | color: variables.toolbarBtnColor 288 | }, 289 | "NativeBase.IconNB": { 290 | color: variables.toolbarBtnColor 291 | }, 292 | alignSelf: null, 293 | paddingHorizontal: variables.buttonPadding 294 | }, 295 | flex: 1, 296 | alignSelf: "center", 297 | alignItems: "flex-end", 298 | flexDirection: "row", 299 | justifyContent: "flex-end" 300 | }, 301 | backgroundColor: variables.toolbarDefaultBg, 302 | flexDirection: "row", 303 | paddingHorizontal: 10, 304 | justifyContent: "center", 305 | paddingTop: platform === "ios" ? 15 : 0, 306 | borderBottomWidth: platform === "ios" 307 | ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) 308 | : 0, 309 | borderBottomColor: variables.toolbarDefaultBorder, 310 | height: variables.toolbarHeight, 311 | elevation: 3, 312 | shadowColor: platformStyle === "material" ? "#000" : undefined, 313 | shadowOffset: platformStyle === "material" 314 | ? { width: 0, height: 2 } 315 | : undefined, 316 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 317 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 318 | top: 0, 319 | left: 0, 320 | right: 0 321 | }; 322 | 323 | return headerTheme; 324 | }; 325 | -------------------------------------------------------------------------------- /native-base-theme/components/Icon.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const iconTheme = { 5 | fontSize: variables.iconFontSize, 6 | color: "#000" 7 | }; 8 | 9 | return iconTheme; 10 | }; 11 | -------------------------------------------------------------------------------- /native-base-theme/components/Input.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const inputTheme = { 5 | '.multiline': { 6 | height: null, 7 | }, 8 | height: variables.inputHeightBase, 9 | color: variables.inputColor, 10 | paddingLeft: 5, 11 | paddingRight: 5, 12 | flex: 1, 13 | fontSize: variables.inputFontSize, 14 | lineHeight: variables.inputLineHeight, 15 | }; 16 | 17 | return inputTheme; 18 | }; 19 | -------------------------------------------------------------------------------- /native-base-theme/components/InputGroup.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const inputGroupTheme = { 5 | "NativeBase.Icon": { 6 | fontSize: 24, 7 | color: variables.sTabBarActiveTextColor, 8 | paddingHorizontal: 5 9 | }, 10 | "NativeBase.IconNB": { 11 | fontSize: 24, 12 | color: variables.sTabBarActiveTextColor, 13 | paddingHorizontal: 5 14 | }, 15 | "NativeBase.Input": { 16 | height: variables.inputHeightBase, 17 | color: variables.inputColor, 18 | paddingLeft: 5, 19 | paddingRight: 5, 20 | flex: 1, 21 | fontSize: variables.inputFontSize, 22 | lineHeight: variables.inputLineHeight 23 | }, 24 | ".underline": { 25 | ".success": { 26 | borderColor: variables.inputSuccessBorderColor 27 | }, 28 | ".error": { 29 | borderColor: variables.inputErrorBorderColor 30 | }, 31 | paddingLeft: 5, 32 | borderWidth: variables.borderWidth, 33 | borderTopWidth: 0, 34 | borderRightWidth: 0, 35 | borderLeftWidth: 0, 36 | borderColor: variables.inputBorderColor 37 | }, 38 | ".regular": { 39 | ".success": { 40 | borderColor: variables.inputSuccessBorderColor 41 | }, 42 | ".error": { 43 | borderColor: variables.inputErrorBorderColor 44 | }, 45 | paddingLeft: 5, 46 | borderWidth: variables.borderWidth, 47 | borderColor: variables.inputBorderColor 48 | }, 49 | ".rounded": { 50 | ".success": { 51 | borderColor: variables.inputSuccessBorderColor 52 | }, 53 | ".error": { 54 | borderColor: variables.inputErrorBorderColor 55 | }, 56 | paddingLeft: 5, 57 | borderWidth: variables.borderWidth, 58 | borderRadius: variables.inputGroupRoundedBorderRadius, 59 | borderColor: variables.inputBorderColor 60 | }, 61 | 62 | ".success": { 63 | "NativeBase.Icon": { 64 | color: variables.inputSuccessBorderColor 65 | }, 66 | "NativeBase.IconNB": { 67 | color: variables.inputSuccessBorderColor 68 | }, 69 | ".rounded": { 70 | borderRadius: 30, 71 | borderColor: variables.inputSuccessBorderColor 72 | }, 73 | ".regular": { 74 | borderColor: variables.inputSuccessBorderColor 75 | }, 76 | ".underline": { 77 | borderWidth: variables.borderWidth, 78 | borderTopWidth: 0, 79 | borderRightWidth: 0, 80 | borderLeftWidth: 0, 81 | borderColor: variables.inputSuccessBorderColor 82 | }, 83 | borderColor: variables.inputSuccessBorderColor 84 | }, 85 | 86 | ".error": { 87 | "NativeBase.Icon": { 88 | color: variables.inputErrorBorderColor 89 | }, 90 | "NativeBase.IconNB": { 91 | color: variables.inputErrorBorderColor 92 | }, 93 | ".rounded": { 94 | borderRadius: 30, 95 | borderColor: variables.inputErrorBorderColor 96 | }, 97 | ".regular": { 98 | borderColor: variables.inputErrorBorderColor 99 | }, 100 | ".underline": { 101 | borderWidth: variables.borderWidth, 102 | borderTopWidth: 0, 103 | borderRightWidth: 0, 104 | borderLeftWidth: 0, 105 | borderColor: variables.inputErrorBorderColor 106 | }, 107 | borderColor: variables.inputErrorBorderColor 108 | }, 109 | ".disabled": { 110 | "NativeBase.Icon": { 111 | color: "#384850" 112 | }, 113 | "NativeBase.IconNB": { 114 | color: "#384850" 115 | } 116 | }, 117 | 118 | paddingLeft: 5, 119 | borderWidth: variables.borderWidth, 120 | borderTopWidth: 0, 121 | borderRightWidth: 0, 122 | borderLeftWidth: 0, 123 | borderColor: variables.inputBorderColor, 124 | backgroundColor: "transparent", 125 | flexDirection: "row", 126 | alignItems: "center" 127 | }; 128 | 129 | return inputGroupTheme; 130 | }; 131 | -------------------------------------------------------------------------------- /native-base-theme/components/Item.js: -------------------------------------------------------------------------------- 1 | import { Platform } from 'react-native'; 2 | 3 | import variable from './../variables/platform'; 4 | 5 | export default (variables = variable) => { 6 | const itemTheme = { 7 | '.floatingLabel': { 8 | 'NativeBase.Input': { 9 | height: 60, 10 | top: 8, 11 | }, 12 | 'NativeBase.Label': { 13 | top: 8, 14 | }, 15 | 'NativeBase.Icon': { 16 | top: 6, 17 | }, 18 | }, 19 | '.fixedLabel': { 20 | 'NativeBase.Label': { 21 | position: null, 22 | top: null, 23 | left: null, 24 | right: null, 25 | flex: 1, 26 | height: null, 27 | width: null, 28 | fontSize: variables.inputFontSize, 29 | }, 30 | 'NativeBase.Input': { 31 | flex: 2, 32 | fontSize: variables.inputFontSize, 33 | }, 34 | }, 35 | '.stackedLabel': { 36 | 'NativeBase.Label': { 37 | position: null, 38 | top: null, 39 | left: null, 40 | right: null, 41 | paddingTop: 5, 42 | alignSelf: 'flex-start', 43 | fontSize: variables.inputFontSize - 2, 44 | }, 45 | 'NativeBase.Icon': { 46 | marginTop: 36, 47 | }, 48 | 'NativeBase.Input': { 49 | alignSelf: Platform.OS === 'ios' ? 'stretch' : 'flex-start', 50 | flex: 1, 51 | width: Platform.OS === 'ios' ? null : variables.deviceWidth - 25, 52 | fontSize: variables.inputFontSize, 53 | }, 54 | flexDirection: null, 55 | }, 56 | '.inlineLabel': { 57 | 'NativeBase.Label': { 58 | position: null, 59 | top: null, 60 | left: null, 61 | right: null, 62 | paddingRight: 20, 63 | height: null, 64 | width: null, 65 | fontSize: variables.inputFontSize, 66 | }, 67 | 'NativeBase.Input': { 68 | paddingLeft: 5, 69 | fontSize: variables.inputFontSize, 70 | }, 71 | flexDirection: 'row', 72 | }, 73 | 'NativeBase.Label': { 74 | fontSize: variables.inputFontSize, 75 | color: variables.inputColorPlaceholder, 76 | paddingRight: 5, 77 | }, 78 | 'NativeBase.Icon': { 79 | fontSize: 24, 80 | paddingRight: 8, 81 | }, 82 | 'NativeBase.IconNB': { 83 | fontSize: 24, 84 | paddingRight: 8, 85 | }, 86 | 'NativeBase.Input': { 87 | '.multiline': { 88 | height: null, 89 | }, 90 | height: variables.inputHeightBase, 91 | color: variables.inputColor, 92 | flex: 1, 93 | top: Platform.OS === 'ios' ? 1.5 : undefined, 94 | fontSize: variables.inputFontSize, 95 | lineHeight: variables.inputLineHeight, 96 | }, 97 | '.underline': { 98 | 'NativeBase.Input': { 99 | paddingLeft: 15, 100 | }, 101 | '.success': { 102 | borderColor: variables.inputSuccessBorderColor, 103 | }, 104 | '.error': { 105 | borderColor: variables.inputErrorBorderColor, 106 | }, 107 | borderWidth: variables.borderWidth * 2, 108 | borderTopWidth: 0, 109 | borderRightWidth: 0, 110 | borderLeftWidth: 0, 111 | borderColor: variables.inputBorderColor, 112 | }, 113 | '.regular': { 114 | 'NativeBase.Input': { 115 | paddingLeft: 8, 116 | }, 117 | 'NativeBase.Icon': { 118 | paddingLeft: 10, 119 | }, 120 | '.success': { 121 | borderColor: variables.inputSuccessBorderColor, 122 | }, 123 | '.error': { 124 | borderColor: variables.inputErrorBorderColor, 125 | }, 126 | borderWidth: variables.borderWidth * 2, 127 | borderColor: variables.inputBorderColor, 128 | }, 129 | '.rounded': { 130 | 'NativeBase.Input': { 131 | paddingLeft: 8, 132 | }, 133 | 'NativeBase.Icon': { 134 | paddingLeft: 10, 135 | }, 136 | '.success': { 137 | borderColor: variables.inputSuccessBorderColor, 138 | }, 139 | '.error': { 140 | borderColor: variables.inputErrorBorderColor, 141 | }, 142 | borderWidth: variables.borderWidth * 2, 143 | borderRadius: 30, 144 | borderColor: variables.inputBorderColor, 145 | }, 146 | 147 | '.success': { 148 | 'NativeBase.Icon': { 149 | color: variables.inputSuccessBorderColor, 150 | }, 151 | 'NativeBase.IconNB': { 152 | color: variables.inputSuccessBorderColor, 153 | }, 154 | '.rounded': { 155 | borderRadius: 30, 156 | borderColor: variables.inputSuccessBorderColor, 157 | }, 158 | '.regular': { 159 | borderColor: variables.inputSuccessBorderColor, 160 | }, 161 | '.underline': { 162 | borderWidth: variables.borderWidth * 2, 163 | borderTopWidth: 0, 164 | borderRightWidth: 0, 165 | borderLeftWidth: 0, 166 | borderColor: variables.inputSuccessBorderColor, 167 | }, 168 | borderColor: variables.inputSuccessBorderColor, 169 | }, 170 | 171 | '.error': { 172 | 'NativeBase.Icon': { 173 | color: variables.inputErrorBorderColor, 174 | }, 175 | 'NativeBase.IconNB': { 176 | color: variables.inputErrorBorderColor, 177 | }, 178 | '.rounded': { 179 | borderRadius: 30, 180 | borderColor: variables.inputErrorBorderColor, 181 | }, 182 | '.regular': { 183 | borderColor: variables.inputErrorBorderColor, 184 | }, 185 | '.underline': { 186 | borderWidth: variables.borderWidth * 2, 187 | borderTopWidth: 0, 188 | borderRightWidth: 0, 189 | borderLeftWidth: 0, 190 | borderColor: variables.inputErrorBorderColor, 191 | }, 192 | borderColor: variables.inputErrorBorderColor, 193 | }, 194 | '.disabled': { 195 | 'NativeBase.Icon': { 196 | color: '#384850', 197 | }, 198 | 'NativeBase.IconNB': { 199 | color: '#384850', 200 | }, 201 | }, 202 | 203 | borderWidth: variables.borderWidth * 2, 204 | borderTopWidth: 0, 205 | borderRightWidth: 0, 206 | borderLeftWidth: 0, 207 | borderColor: variables.inputBorderColor, 208 | backgroundColor: 'transparent', 209 | flexDirection: 'row', 210 | alignItems: 'center', 211 | marginLeft: 2, 212 | }; 213 | 214 | return itemTheme; 215 | }; 216 | -------------------------------------------------------------------------------- /native-base-theme/components/Label.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const labelTheme = { 5 | ".focused": { 6 | width: 0 7 | }, 8 | fontSize: 17 9 | }; 10 | 11 | return labelTheme; 12 | }; 13 | -------------------------------------------------------------------------------- /native-base-theme/components/Left.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const leftTheme = { 5 | flex: 1, 6 | alignSelf: 'center', 7 | alignItems: 'flex-start', 8 | }; 9 | 10 | return leftTheme; 11 | }; 12 | -------------------------------------------------------------------------------- /native-base-theme/components/ListItem.js: -------------------------------------------------------------------------------- 1 | import { Platform, PixelRatio } from "react-native"; 2 | 3 | import pickerTheme from "./Picker"; 4 | import variable from "./../variables/platform"; 5 | 6 | export default (variables = variable) => { 7 | const platform = variables.platform; 8 | 9 | const listItemTheme = { 10 | "NativeBase.InputGroup": { 11 | "NativeBase.Icon": { 12 | paddingRight: 5 13 | }, 14 | "NativeBase.IconNB": { 15 | paddingRight: 5 16 | }, 17 | "NativeBase.Input": { 18 | paddingHorizontal: 5 19 | }, 20 | flex: 1, 21 | borderWidth: null, 22 | margin: -10, 23 | borderBottomColor: "transparent" 24 | }, 25 | ".searchBar": { 26 | "NativeBase.Item": { 27 | "NativeBase.Icon": { 28 | backgroundColor: "transparent", 29 | color: variables.dropdownLinkColor, 30 | fontSize: platform === "ios" 31 | ? variables.iconFontSize - 10 32 | : variables.iconFontSize - 5, 33 | alignItems: "center", 34 | marginTop: 2, 35 | paddingRight: 8 36 | }, 37 | "NativeBase.IconNB": { 38 | backgroundColor: "transparent", 39 | color: null, 40 | alignSelf: "center" 41 | }, 42 | "NativeBase.Input": { 43 | alignSelf: "center" 44 | }, 45 | alignSelf: "center", 46 | alignItems: "center", 47 | justifyContent: "flex-start", 48 | flex: 1, 49 | height: platform === "ios" ? 30 : 40, 50 | borderColor: "transparent", 51 | backgroundColor: "#fff", 52 | borderRadius: 5 53 | }, 54 | "NativeBase.Button": { 55 | ".transparent": { 56 | "NativeBase.Text": { 57 | fontWeight: "500" 58 | }, 59 | paddingHorizontal: null, 60 | paddingLeft: platform === "ios" ? 10 : null 61 | }, 62 | paddingHorizontal: platform === "ios" ? undefined : null, 63 | width: platform === "ios" ? undefined : 0, 64 | height: platform === "ios" ? undefined : 0 65 | }, 66 | backgroundColor: variables.toolbarInputColor, 67 | padding: 10, 68 | marginLeft: null 69 | }, 70 | "NativeBase.CheckBox": { 71 | marginLeft: -10, 72 | marginRight: 10, 73 | }, 74 | ".first": { 75 | ".itemHeader": { 76 | paddingTop: variables.listItemPadding + 3 77 | } 78 | }, 79 | ".itemHeader": { 80 | ".first": { 81 | paddingTop: variables.listItemPadding + 3 82 | }, 83 | borderBottomWidth: platform === "ios" ? variables.borderWidth : null, 84 | marginLeft: null, 85 | padding: variables.listItemPadding, 86 | paddingLeft: variables.listItemPadding + 5, 87 | paddingTop: platform === "ios" 88 | ? variables.listItemPadding + 25 89 | : undefined, 90 | paddingBottom: platform === "android" 91 | ? variables.listItemPadding + 20 92 | : undefined, 93 | flexDirection: "row", 94 | borderColor: variables.listBorderColor, 95 | "NativeBase.Text": { 96 | fontSize: 14, 97 | color: platform === "ios" ? undefined : variables.listNoteColor 98 | } 99 | }, 100 | ".itemDivider": { 101 | borderBottomWidth: null, 102 | marginLeft: null, 103 | padding: variables.listItemPadding, 104 | paddingLeft: variables.listItemPadding + 5, 105 | backgroundColor: variables.listDividerBg, 106 | flexDirection: "row", 107 | borderColor: variables.listBorderColor 108 | }, 109 | ".selected": { 110 | "NativeBase.Left": { 111 | "NativeBase.Text": { 112 | color: variables.brandPrimary 113 | } 114 | }, 115 | "NativeBase.Text": { 116 | color: variables.brandPrimary 117 | } 118 | }, 119 | "NativeBase.Left": { 120 | "NativeBase.Body": { 121 | "NativeBase.Text": { 122 | ".note": { 123 | color: variables.listNoteColor, 124 | fontWeight: "200" 125 | }, 126 | fontWeight: "600" 127 | }, 128 | marginLeft: 10, 129 | alignItems: null, 130 | alignSelf: null 131 | }, 132 | "NativeBase.Icon": { 133 | width: variables.iconFontSize - 10, 134 | fontSize: variables.iconFontSize - 10 135 | }, 136 | "NativeBase.IconNB": { 137 | width: variables.iconFontSize - 10, 138 | fontSize: variables.iconFontSize - 10 139 | }, 140 | "NativeBase.Text": { 141 | marginLeft: 10, 142 | alignSelf: "center" 143 | }, 144 | flexDirection: "row" 145 | }, 146 | "NativeBase.Body": { 147 | "NativeBase.Text": { 148 | marginHorizontal: variables.listItemPadding, 149 | ".note": { 150 | color: variables.listNoteColor, 151 | fontWeight: "200" 152 | } 153 | }, 154 | alignSelf: null, 155 | alignItems: null 156 | }, 157 | "NativeBase.Right": { 158 | "NativeBase.Badge": { 159 | alignSelf: null 160 | }, 161 | "NativeBase.PickerNB": { 162 | "NativeBase.Button": { 163 | marginRight: -15, 164 | "NativeBase.Text": { 165 | color: variables.topTabBarActiveTextColor 166 | } 167 | } 168 | }, 169 | "NativeBase.Button": { 170 | alignSelf: null, 171 | ".transparent": { 172 | "NativeBase.Text": { 173 | color: variables.topTabBarActiveTextColor 174 | } 175 | } 176 | }, 177 | "NativeBase.Icon": { 178 | alignSelf: null, 179 | fontSize: variables.iconFontSize - 8, 180 | color: "#c9c8cd" 181 | }, 182 | "NativeBase.IconNB": { 183 | alignSelf: null, 184 | fontSize: variables.iconFontSize - 8, 185 | color: "#c9c8cd" 186 | }, 187 | "NativeBase.Text": { 188 | ".note": { 189 | color: variables.listNoteColor, 190 | fontWeight: "200" 191 | }, 192 | alignSelf: null 193 | }, 194 | "NativeBase.Thumbnail": { 195 | alignSelf: null 196 | }, 197 | "NativeBase.Image": { 198 | alignSelf: null 199 | }, 200 | "NativeBase.Radio": { 201 | alignSelf: null 202 | }, 203 | "NativeBase.Checkbox": { 204 | alignSelf: null 205 | }, 206 | "NativeBase.Switch": { 207 | alignSelf: null 208 | }, 209 | padding: null, 210 | flex: 0.28 211 | }, 212 | "NativeBase.Text": { 213 | ".note": { 214 | color: variables.listNoteColor, 215 | fontWeight: "200" 216 | }, 217 | alignSelf: 'center' 218 | }, 219 | 220 | ".last": { 221 | marginLeft: -(variables.listItemPadding + 5), 222 | paddingLeft: (variables.listItemPadding + 5) * 2, 223 | top: 1 224 | }, 225 | 226 | ".avatar": { 227 | "NativeBase.Left": { 228 | flex: 0 229 | }, 230 | "NativeBase.Body": { 231 | "NativeBase.Text": { 232 | marginLeft: null 233 | }, 234 | flex: 1, 235 | paddingVertical: variables.listItemPadding, 236 | borderBottomWidth: variables.borderWidth, 237 | borderColor: variables.listBorderColor, 238 | marginLeft: variables.listItemPadding + 5 239 | }, 240 | "NativeBase.Right": { 241 | "NativeBase.Text": { 242 | ".note": { 243 | fontSize: variables.noteFontSize - 2 244 | } 245 | }, 246 | flex: 0, 247 | paddingRight: variables.listItemPadding + 5, 248 | alignSelf: "stretch", 249 | paddingVertical: variables.listItemPadding, 250 | borderBottomWidth: variables.borderWidth, 251 | borderColor: variables.listBorderColor 252 | }, 253 | borderBottomWidth: null, 254 | paddingVertical: null, 255 | paddingRight: null 256 | }, 257 | 258 | ".thumbnail": { 259 | "NativeBase.Left": { 260 | flex: 0 261 | }, 262 | "NativeBase.Body": { 263 | "NativeBase.Text": { 264 | marginLeft: null 265 | }, 266 | flex: 1, 267 | paddingVertical: variables.listItemPadding + 5, 268 | borderBottomWidth: variables.borderWidth, 269 | borderColor: variables.listBorderColor, 270 | marginLeft: variables.listItemPadding + 5 271 | }, 272 | "NativeBase.Right": { 273 | "NativeBase.Button": { 274 | ".transparent": { 275 | "NativeBase.Text": { 276 | fontSize: variables.listNoteSize, 277 | color: variables.sTabBarActiveTextColor 278 | } 279 | }, 280 | height: null 281 | }, 282 | flex: 0, 283 | justifyContent: "center", 284 | alignSelf: "stretch", 285 | paddingRight: variables.listItemPadding + 5, 286 | paddingVertical: variables.listItemPadding + 5, 287 | borderBottomWidth: variables.borderWidth, 288 | borderColor: variables.listBorderColor 289 | }, 290 | borderBottomWidth: null, 291 | paddingVertical: null, 292 | paddingRight: null 293 | }, 294 | 295 | ".icon": { 296 | ".last": { 297 | "NativeBase.Body": { 298 | borderBottomWidth: null 299 | }, 300 | "NativeBase.Right": { 301 | borderBottomWidth: null 302 | }, 303 | borderBottomWidth: variables.borderWidth, 304 | borderColor: variables.listBorderColor 305 | }, 306 | "NativeBase.Left": { 307 | "NativeBase.Button": { 308 | "NativeBase.IconNB": { 309 | marginHorizontal: null, 310 | fontSize: variables.iconFontSize - 5 311 | }, 312 | "NativeBase.Icon": { 313 | marginHorizontal: null, 314 | fontSize: variables.iconFontSize - 8 315 | }, 316 | alignSelf: "center", 317 | height: 29, 318 | width: 29, 319 | borderRadius: 6, 320 | paddingVertical: null, 321 | paddingHorizontal: null, 322 | alignItems: "center", 323 | justifyContent: "center" 324 | }, 325 | "NativeBase.Icon": { 326 | width: variables.iconFontSize - 5, 327 | fontSize: variables.iconFontSize - 2 328 | }, 329 | "NativeBase.IconNB": { 330 | width: variables.iconFontSize - 5, 331 | fontSize: variables.iconFontSize - 2 332 | }, 333 | paddingRight: variables.listItemPadding + 5, 334 | flex: 0, 335 | height: 44, 336 | justifyContent: "center", 337 | alignItems: "center" 338 | }, 339 | "NativeBase.Body": { 340 | "NativeBase.Text": { 341 | marginLeft: null, 342 | fontSize: 17 343 | }, 344 | flex: 1, 345 | height: 44, 346 | justifyContent: "center", 347 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 348 | borderColor: variables.listBorderColor 349 | }, 350 | "NativeBase.Right": { 351 | "NativeBase.Text": { 352 | textAlign: "center", 353 | color: "#8F8E95", 354 | fontSize: 17 355 | }, 356 | "NativeBase.IconNB": { 357 | color: "#C8C7CC", 358 | fontSize: variables.iconFontSize - 10, 359 | alignSelf: "center", 360 | paddingLeft: 10, 361 | paddingTop: 3 362 | }, 363 | "NativeBase.Icon": { 364 | color: "#C8C7CC", 365 | fontSize: variables.iconFontSize - 10, 366 | alignSelf: "center", 367 | paddingLeft: 10, 368 | paddingTop: 3 369 | }, 370 | "NativeBase.Switch": { 371 | marginRight: Platform.OS === "ios" ? undefined : -5, 372 | alignSelf: null 373 | }, 374 | "NativeBase.PickerNB": { 375 | ...pickerTheme() 376 | }, 377 | flexDirection: "row", 378 | alignItems: "center", 379 | flex: 0, 380 | alignSelf: "stretch", 381 | height: 44, 382 | justifyContent: "flex-end", 383 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 384 | borderColor: variables.listBorderColor, 385 | paddingRight: variables.listItemPadding + 5 386 | }, 387 | borderBottomWidth: null, 388 | paddingVertical: null, 389 | paddingRight: null, 390 | height: 44, 391 | justifyContent: "center" 392 | }, 393 | ".noBorder": { 394 | borderBottomWidth: null 395 | }, 396 | alignItems: "center", 397 | flexDirection: "row", 398 | paddingRight: variables.listItemPadding + 5, 399 | paddingVertical: variables.listItemPadding + 3, 400 | marginLeft: variables.listItemPadding + 5, 401 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 402 | backgroundColor: variables.listBg, 403 | borderColor: variables.listBorderColor 404 | }; 405 | 406 | return listItemTheme; 407 | }; 408 | -------------------------------------------------------------------------------- /native-base-theme/components/Picker.android.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const pickerTheme = { 5 | ".note": { 6 | color: "#8F8E95" 7 | }, 8 | width: 90, 9 | marginRight: -4 10 | }; 11 | 12 | return pickerTheme; 13 | }; 14 | -------------------------------------------------------------------------------- /native-base-theme/components/Picker.ios.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const pickerTheme = {}; 5 | 6 | return pickerTheme; 7 | }; 8 | -------------------------------------------------------------------------------- /native-base-theme/components/Radio.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const radioTheme = { 7 | ".selected": { 8 | "NativeBase.IconNB": { 9 | color: Platform.OS === "ios" 10 | ? variables.brandPrimary 11 | : variables.radioSelectedColorAndroid, 12 | lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight, 13 | height: Platform.OS === "ios" ? 20 : undefined 14 | } 15 | }, 16 | "NativeBase.IconNB": { 17 | color: Platform.OS === "ios" ? "transparent" : undefined, 18 | lineHeight: Platform.OS === "ios" 19 | ? undefined 20 | : variables.radioBtnLineHeight, 21 | fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize 22 | } 23 | }; 24 | 25 | return radioTheme; 26 | }; 27 | -------------------------------------------------------------------------------- /native-base-theme/components/Right.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 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 | }; 15 | -------------------------------------------------------------------------------- /native-base-theme/components/Segment.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const segmentTheme = { 7 | height: 45, 8 | borderColor: variables.segmentBorderColorMain, 9 | flexDirection: "row", 10 | justifyContent: "center", 11 | backgroundColor: variables.segmentBackgroundColor, 12 | "NativeBase.Button": { 13 | alignSelf: "center", 14 | borderRadius: 0, 15 | paddingHorizontal: 20, 16 | height: 30, 17 | backgroundColor: "transparent", 18 | borderWidth: 1, 19 | borderColor: variables.segmentBorderColor, 20 | elevation: 0, 21 | ".active": { 22 | backgroundColor: variables.segmentActiveBackgroundColor, 23 | "NativeBase.Text": { 24 | color: variables.segmentActiveTextColor 25 | } 26 | }, 27 | ".first": { 28 | borderTopLeftRadius: platform === "ios" ? 5 : undefined, 29 | borderBottomLeftRadius: platform === "ios" ? 5 : undefined, 30 | borderRightWidth: 0 31 | }, 32 | ".last": { 33 | borderTopRightRadius: platform === "ios" ? 5 : undefined, 34 | borderBottomRightRadius: platform === "ios" ? 5 : undefined, 35 | borderLeftWidth: 0 36 | }, 37 | "NativeBase.Text": { 38 | color: variables.segmentTextColor, 39 | fontSize: 14 40 | } 41 | } 42 | }; 43 | 44 | return segmentTheme; 45 | }; 46 | -------------------------------------------------------------------------------- /native-base-theme/components/Separator.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const theme = { 5 | '.group': { 6 | height: 50, 7 | paddingVertical: variables.listItemPadding - 8, 8 | paddingTop: variables.listItemPadding + 12, 9 | '.bordered': { 10 | height: 50, 11 | paddingVertical: variables.listItemPadding - 8, 12 | paddingTop: variables.listItemPadding + 12, 13 | }, 14 | }, 15 | '.bordered': { 16 | '.noTopBorder': { 17 | borderTopWidth: 0, 18 | }, 19 | '.noBottomBorder': { 20 | borderBottomWidth: 0, 21 | }, 22 | height: 35, 23 | paddingTop: variables.listItemPadding + 2, 24 | paddingBottom: variables.listItemPadding, 25 | borderBottomWidth: variables.borderWidth, 26 | borderTopWidth: variables.borderWidth, 27 | borderColor: variables.listBorderColor, 28 | }, 29 | 'NativeBase.Text': { 30 | fontSize: variables.tabBarTextSize - 2, 31 | color: '#777', 32 | }, 33 | '.noTopBorder': { 34 | borderTopWidth: 0, 35 | }, 36 | '.noBottomBorder': { 37 | borderBottomWidth: 0, 38 | }, 39 | height: 38, 40 | backgroundColor: '#F0EFF5', 41 | flex: 1, 42 | justifyContent: 'center', 43 | paddingLeft: variables.listItemPadding + 5, 44 | }; 45 | 46 | return theme; 47 | }; 48 | -------------------------------------------------------------------------------- /native-base-theme/components/Spinner.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const spinnerTheme = { 5 | height: 80 6 | }; 7 | 8 | return spinnerTheme; 9 | }; 10 | -------------------------------------------------------------------------------- /native-base-theme/components/Subtitle.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const subtitleTheme = { 5 | fontSize: variables.subTitleFontSize, 6 | fontFamily: variables.titleFontfamily, 7 | color: variables.subtitleColor, 8 | textAlign: 'center', 9 | }; 10 | 11 | return subtitleTheme; 12 | }; 13 | -------------------------------------------------------------------------------- /native-base-theme/components/SwipeRow.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const swipeRowTheme = { 5 | 'NativeBase.ListItem': { 6 | backgroundColor: '#FFF', 7 | marginLeft: 0, 8 | }, 9 | 'NativeBase.Left': { 10 | flex: 0, 11 | alignSelf: null, 12 | alignItems: null, 13 | 'NativeBase.Button': { 14 | alignItems: 'center', 15 | justifyContent: 'center', 16 | alignSelf: 'stretch', 17 | borderRadius: 0, 18 | }, 19 | }, 20 | 'NativeBase.Right': { 21 | flex: 0, 22 | alignSelf: null, 23 | alignItems: null, 24 | 'NativeBase.Button': { 25 | alignItems: 'center', 26 | justifyContent: 'center', 27 | alignSelf: 'stretch', 28 | borderRadius: 0, 29 | }, 30 | }, 31 | 'NativeBase.Button': { 32 | alignItems: 'center', 33 | justifyContent: 'center', 34 | alignSelf: 'stretch', 35 | borderRadius: 0, 36 | }, 37 | }; 38 | 39 | return swipeRowTheme; 40 | }; 41 | -------------------------------------------------------------------------------- /native-base-theme/components/Switch.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const switchTheme = { 5 | marginVertical: -5, 6 | }; 7 | 8 | return switchTheme; 9 | }; 10 | -------------------------------------------------------------------------------- /native-base-theme/components/Tab.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const tabTheme = { 5 | flex: 1, 6 | backgroundColor: "#FFF" 7 | }; 8 | 9 | return tabTheme; 10 | }; 11 | -------------------------------------------------------------------------------- /native-base-theme/components/TabBar.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const tabBarTheme = { 5 | ".tabIcon": { 6 | height: undefined 7 | }, 8 | ".vertical": { 9 | height: 60 10 | }, 11 | "NativeBase.Button": { 12 | ".transparent": { 13 | "NativeBase.Text": { 14 | fontSize: variables.tabFontSize, 15 | color: variables.sTabBarActiveTextColor, 16 | fontWeight: "400" 17 | }, 18 | "NativeBase.IconNB": { 19 | color: variables.sTabBarActiveTextColor 20 | } 21 | }, 22 | "NativeBase.IconNB": { 23 | color: variables.sTabBarActiveTextColor 24 | }, 25 | "NativeBase.Text": { 26 | fontSize: variables.tabFontSize, 27 | color: variables.sTabBarActiveTextColor, 28 | fontWeight: "400" 29 | }, 30 | ".isTabActive": { 31 | "NativeBase.Text": { 32 | fontWeight: "900" 33 | } 34 | }, 35 | flex: 1, 36 | alignSelf: "stretch", 37 | alignItems: "center", 38 | justifyContent: "center", 39 | borderRadius: null, 40 | borderBottomColor: "transparent", 41 | backgroundColor: variables.tabBgColor 42 | }, 43 | height: 45, 44 | flexDirection: "row", 45 | justifyContent: "space-around", 46 | borderWidth: 1, 47 | borderTopWidth: 0, 48 | borderLeftWidth: 0, 49 | borderRightWidth: 0, 50 | borderBottomColor: "#ccc", 51 | backgroundColor: variables.tabBgColor 52 | }; 53 | 54 | return tabBarTheme; 55 | }; 56 | -------------------------------------------------------------------------------- /native-base-theme/components/TabContainer.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | import { Platform } from "react-native"; 3 | 4 | export default (variables = variable) => { 5 | const platformStyle = variables.platformStyle; 6 | const platform = variables.platform; 7 | 8 | const tabContainerTheme = { 9 | elevation: 3, 10 | height: 50, 11 | flexDirection: "row", 12 | shadowColor: platformStyle === "material" ? "#000" : undefined, 13 | shadowOffset: platformStyle === "material" 14 | ? { width: 0, height: 2 } 15 | : undefined, 16 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 17 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 18 | justifyContent: "space-around", 19 | borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0, 20 | borderColor: variables.topTabBarBorderColor 21 | }; 22 | 23 | return tabContainerTheme; 24 | }; 25 | -------------------------------------------------------------------------------- /native-base-theme/components/TabHeading.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const tabHeadingTheme = { 7 | flexDirection: "row", 8 | backgroundColor: variables.tabDefaultBg, 9 | flex: 1, 10 | alignItems: "center", 11 | justifyContent: "center", 12 | ".scrollable": { 13 | paddingHorizontal: 20, 14 | flex: platform === "android" ? 0 : 1, 15 | minWidth: platform === "android" ? undefined : 60 16 | }, 17 | "NativeBase.Text": { 18 | color: variables.topTabBarTextColor, 19 | marginHorizontal: 7 20 | }, 21 | "NativeBase.Icon": { 22 | color: variables.topTabBarTextColor, 23 | fontSize: platform === "ios" ? 26 : undefined 24 | }, 25 | ".active": { 26 | "NativeBase.Text": { 27 | color: variables.topTabBarActiveTextColor, 28 | fontWeight: "600" 29 | }, 30 | "NativeBase.Icon": { 31 | color: variables.topTabBarActiveTextColor 32 | } 33 | } 34 | }; 35 | 36 | return tabHeadingTheme; 37 | }; 38 | -------------------------------------------------------------------------------- /native-base-theme/components/Text.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const textTheme = { 5 | fontSize: variables.DefaultFontSize - 1, 6 | fontFamily: variables.fontFamily, 7 | color: variables.textColor, 8 | ".note": { 9 | color: "#a7a7a7", 10 | fontSize: variables.noteFontSize 11 | } 12 | }; 13 | 14 | return textTheme; 15 | }; 16 | -------------------------------------------------------------------------------- /native-base-theme/components/Textarea.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const textAreaTheme = { 5 | ".underline": { 6 | borderBottomWidth: variables.borderWidth, 7 | marginTop: 5, 8 | borderColor: variables.inputBorderColor 9 | }, 10 | ".bordered": { 11 | borderWidth: 1, 12 | marginTop: 5, 13 | borderColor: variables.inputBorderColor 14 | }, 15 | color: variables.textColor, 16 | paddingLeft: 10, 17 | paddingRight: 5, 18 | fontSize: 15, 19 | textAlignVertical: "top" 20 | }; 21 | 22 | return textAreaTheme; 23 | }; 24 | -------------------------------------------------------------------------------- /native-base-theme/components/Thumbnail.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 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 | }; 41 | -------------------------------------------------------------------------------- /native-base-theme/components/Title.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const titleTheme = { 7 | fontSize: variables.titleFontSize, 8 | fontFamily: variables.titleFontfamily, 9 | color: variables.titleFontColor, 10 | fontWeight: Platform.OS === "ios" ? "600" : undefined, 11 | textAlign: "center" 12 | }; 13 | 14 | return titleTheme; 15 | }; 16 | -------------------------------------------------------------------------------- /native-base-theme/components/Toast.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const toastTheme = { 7 | ".danger": { 8 | backgroundColor: variables.brandDanger 9 | }, 10 | ".warning": { 11 | backgroundColor: variables.brandWarning 12 | }, 13 | ".success": { 14 | backgroundColor: variables.brandSuccess 15 | }, 16 | backgroundColor: "rgba(0,0,0,0.8)", 17 | borderRadius: platform === "ios" ? 5 : 0, 18 | flexDirection: "row", 19 | justifyContent: "space-between", 20 | alignItems: "center", 21 | padding: 10, 22 | minHeight: 50, 23 | "NativeBase.Text": { 24 | color: "#fff", 25 | flex: 1 26 | }, 27 | "NativeBase.Button": { 28 | backgroundColor: "transparent", 29 | height: 30, 30 | elevation: 0, 31 | "NativeBase.Text": { 32 | fontSize: 14 33 | } 34 | } 35 | }; 36 | 37 | return toastTheme; 38 | }; 39 | -------------------------------------------------------------------------------- /native-base-theme/components/View.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const viewTheme = { 5 | ".padder": { 6 | padding: variables.contentPadding 7 | } 8 | }; 9 | 10 | return viewTheme; 11 | }; 12 | -------------------------------------------------------------------------------- /native-base-theme/components/index.js: -------------------------------------------------------------------------------- 1 | import _ from "lodash"; 2 | import bodyTheme from "./Body"; 3 | import leftTheme from "./Left"; 4 | import rightTheme from "./Right"; 5 | import headerTheme from "./Header"; 6 | import switchTheme from "./Switch"; 7 | import thumbnailTheme from "./Thumbnail"; 8 | import containerTheme from "./Container"; 9 | import contentTheme from "./Content"; 10 | import buttonTheme from "./Button"; 11 | import titleTheme from "./Title"; 12 | import subtitleTheme from "./Subtitle"; 13 | import inputGroupTheme from "./InputGroup"; 14 | import badgeTheme from "./Badge"; 15 | import checkBoxTheme from "./CheckBox"; 16 | import cardTheme from "./Card"; 17 | import radioTheme from "./Radio"; 18 | import h3Theme from "./H3"; 19 | import h2Theme from "./H2"; 20 | import h1Theme from "./H1"; 21 | import footerTheme from "./Footer"; 22 | import footerTabTheme from "./FooterTab"; 23 | import fabTheme from "./Fab"; 24 | import itemTheme from "./Item"; 25 | import labelTheme from "./Label"; 26 | import textAreaTheme from "./Textarea"; 27 | import textTheme from "./Text"; 28 | import toastTheme from "./Toast"; 29 | import tabTheme from "./Tab"; 30 | import tabBarTheme from "./TabBar"; 31 | import tabContainerTheme from "./TabContainer"; 32 | import viewTheme from "./View"; 33 | import tabHeadingTheme from "./TabHeading"; 34 | import iconTheme from "./Icon"; 35 | import inputTheme from "./Input"; 36 | import swipeRowTheme from "./SwipeRow"; 37 | import segmentTheme from "./Segment"; 38 | import spinnerTheme from "./Spinner"; 39 | import cardItemTheme from "./CardItem"; 40 | import listItemTheme from "./ListItem"; 41 | import formTheme from "./Form"; 42 | import separatorTheme from "./Separator"; 43 | import variable from "./../variables/platform"; 44 | 45 | export default (variables = variable) => { 46 | const theme = { 47 | variables, 48 | "NativeBase.Left": { 49 | ...leftTheme(variables) 50 | }, 51 | "NativeBase.Right": { 52 | ...rightTheme(variables) 53 | }, 54 | "NativeBase.Body": { 55 | ...bodyTheme(variables) 56 | }, 57 | 58 | "NativeBase.Header": { 59 | ...headerTheme(variables) 60 | }, 61 | 62 | "NativeBase.Button": { 63 | ...buttonTheme(variables) 64 | }, 65 | 66 | "NativeBase.Title": { 67 | ...titleTheme(variables) 68 | }, 69 | "NativeBase.Subtitle": { 70 | ...subtitleTheme(variables) 71 | }, 72 | 73 | "NativeBase.InputGroup": { 74 | ...inputGroupTheme(variables) 75 | }, 76 | 77 | "NativeBase.Input": { 78 | ...inputTheme(variables) 79 | }, 80 | 81 | "NativeBase.Badge": { 82 | ...badgeTheme(variables) 83 | }, 84 | 85 | "NativeBase.CheckBox": { 86 | ...checkBoxTheme(variables) 87 | }, 88 | 89 | "NativeBase.Radio": { 90 | ...radioTheme(variables) 91 | }, 92 | 93 | "NativeBase.Card": { 94 | ...cardTheme() 95 | }, 96 | 97 | "NativeBase.CardItem": { 98 | ...cardItemTheme(variables) 99 | }, 100 | 101 | "NativeBase.Toast": { 102 | ...toastTheme(variables) 103 | }, 104 | 105 | "NativeBase.H1": { 106 | ...h1Theme(variables) 107 | }, 108 | "NativeBase.H2": { 109 | ...h2Theme(variables) 110 | }, 111 | "NativeBase.H3": { 112 | ...h3Theme(variables) 113 | }, 114 | "NativeBase.Form": { 115 | ...formTheme(variables) 116 | }, 117 | 118 | "NativeBase.Container": { 119 | ...containerTheme(variables) 120 | }, 121 | "NativeBase.Content": { 122 | ...contentTheme(variables) 123 | }, 124 | 125 | "NativeBase.Footer": { 126 | ...footerTheme(variables) 127 | }, 128 | 129 | "NativeBase.Tabs": { 130 | flex: 1 131 | }, 132 | 133 | "NativeBase.FooterTab": { 134 | ...footerTabTheme(variables) 135 | }, 136 | 137 | "NativeBase.ListItem": { 138 | ...listItemTheme(variables) 139 | }, 140 | 141 | "NativeBase.ListItem1": { 142 | ...listItemTheme(variables) 143 | }, 144 | 145 | "NativeBase.Icon": { 146 | ...iconTheme(variables) 147 | }, 148 | "NativeBase.IconNB": { 149 | ...iconTheme(variables) 150 | }, 151 | "NativeBase.Text": { 152 | ...textTheme(variables) 153 | }, 154 | "NativeBase.Spinner": { 155 | ...spinnerTheme(variables) 156 | }, 157 | 158 | "NativeBase.Fab": { 159 | ...fabTheme(variables) 160 | }, 161 | 162 | "NativeBase.Item": { 163 | ...itemTheme(variables) 164 | }, 165 | 166 | "NativeBase.Label": { 167 | ...labelTheme(variables) 168 | }, 169 | 170 | "NativeBase.Textarea": { 171 | ...textAreaTheme(variables) 172 | }, 173 | 174 | "NativeBase.PickerNB": { 175 | "NativeBase.Button": { 176 | "NativeBase.Text": {} 177 | } 178 | }, 179 | 180 | "NativeBase.Tab": { 181 | ...tabTheme(variables) 182 | }, 183 | 184 | "NativeBase.Segment": { 185 | ...segmentTheme(variables) 186 | }, 187 | 188 | "NativeBase.TabBar": { 189 | ...tabBarTheme(variables) 190 | }, 191 | "NativeBase.ViewNB": { 192 | ...viewTheme(variables) 193 | }, 194 | "NativeBase.TabHeading": { 195 | ...tabHeadingTheme(variables) 196 | }, 197 | "NativeBase.TabContainer": { 198 | ...tabContainerTheme(variables) 199 | }, 200 | "NativeBase.Switch": { 201 | ...switchTheme(variables) 202 | }, 203 | "NativeBase.Separator": { 204 | ...separatorTheme(variables) 205 | }, 206 | "NativeBase.SwipeRow": { 207 | ...swipeRowTheme(variables) 208 | }, 209 | "NativeBase.Thumbnail": { 210 | ...thumbnailTheme(variables) 211 | } 212 | }; 213 | 214 | const cssifyTheme = (grandparent, parent, parentKey) => { 215 | _.forEach(parent, (style, styleName) => { 216 | // console.log('styleName', styleName); 217 | // console.log('parentKey', parentKey); 218 | if ( 219 | styleName.indexOf(".") === 0 && 220 | parentKey && 221 | parentKey.indexOf(".") === 0 222 | ) { 223 | if (grandparent) { 224 | if (!grandparent[styleName]) { 225 | grandparent[styleName] = {}; 226 | } else { 227 | grandparent[styleName][parentKey] = style; 228 | } 229 | } 230 | } 231 | if (style && typeof style === "object") { 232 | cssifyTheme(parent, style, styleName); 233 | } 234 | }); 235 | }; 236 | 237 | cssifyTheme(null, theme, null); 238 | 239 | return theme; 240 | }; 241 | -------------------------------------------------------------------------------- /native-base-theme/variables/commonColor.js: -------------------------------------------------------------------------------- 1 | import color from "color"; 2 | 3 | import { Platform, Dimensions, PixelRatio } from "react-native"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | const deviceWidth = Dimensions.get("window").width; 7 | const platform = Platform.OS; 8 | const platformStyle = undefined; 9 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: platform === "ios" ? 13 : 0, 31 | CheckboxBorderWidth: platform === "ios" ? 1 : 2, 32 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 21 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: "#3F51B5", 44 | segmentActiveBackgroundColor: "#fff", 45 | segmentTextColor: "#fff", 46 | segmentActiveTextColor: "#3F51B5", 47 | segmentBorderColor: "#fff", 48 | segmentBorderColorMain: "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 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 | 110 | // Color 111 | brandPrimary: "#2874F0", 112 | brandInfo: "#62B1F6", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: platform === "ios" ? "System" : "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: "#2874F0", 135 | 136 | // FooterTab 137 | tabBarTextColor: "#8bb3f4", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: platform === "ios" ? "#007aff" : "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: "#fff", 142 | tabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, 143 | 144 | // Tab 145 | tabDefaultBg: "#2874F0", 146 | topTabBarTextColor: "#b3c7f9", 147 | topTabBarActiveTextColor: "#fff", 148 | topTabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, 149 | topTabBarBorderColor: "#fff", 150 | topTabBarActiveBorderColor: "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: "#fff", 154 | toolbarDefaultBg: "#2874F0", 155 | toolbarHeight: platform === "ios" ? 64 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: "#fff", 162 | iosStatusbar: "light-content", 163 | toolbarDefaultBorder: "#2874F0", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg).darken(0.2).hex(); 166 | }, 167 | 168 | // Icon 169 | iconFamily: "Ionicons", 170 | iconFontSize: platform === "ios" ? 30 : 28, 171 | iconMargin: 7, 172 | iconHeaderSize: platform === "ios" ? 33 : 24, 173 | 174 | // InputGroup 175 | inputFontSize: 17, 176 | inputBorderColor: "#D9D5DC", 177 | inputSuccessBorderColor: "#2b8339", 178 | inputErrorBorderColor: "#ed2f2f", 179 | 180 | get inputColor() { 181 | return this.textColor; 182 | }, 183 | get inputColorPlaceholder() { 184 | return "#575757"; 185 | }, 186 | 187 | inputGroupMarginBottom: 10, 188 | inputHeightBase: 50, 189 | inputPaddingLeft: 5, 190 | 191 | get inputPaddingLeftIcon() { 192 | return this.inputPaddingLeft * 8; 193 | }, 194 | 195 | // Line Height 196 | btnLineHeight: 19, 197 | lineHeightH1: 32, 198 | lineHeightH2: 27, 199 | lineHeightH3: 22, 200 | iconLineHeight: platform === "ios" ? 37 : 30, 201 | lineHeight: platform === "ios" ? 20 : 24, 202 | 203 | // List 204 | listBorderColor: "#c9c9c9", 205 | listDividerBg: "#f4f4f4", 206 | listItemHeight: 45, 207 | listBtnUnderlayColor: "#DDD", 208 | 209 | // Card 210 | cardBorderColor: "#ccc", 211 | 212 | // Changed Variable 213 | listItemPadding: platform === "ios" ? 10 : 12, 214 | 215 | listNoteColor: "#808080", 216 | listNoteSize: 13, 217 | 218 | // Progress Bar 219 | defaultProgressColor: "#E4202D", 220 | inverseProgressColor: "#1A191B", 221 | 222 | // Radio Button 223 | radioBtnSize: platform === "ios" ? 25 : 23, 224 | radioSelectedColorAndroid: "#5067FF", 225 | 226 | // New Variable 227 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 228 | 229 | radioColor: "#7e7e7e", 230 | 231 | get radioSelectedColor() { 232 | return color(this.radioColor).darken(0.2).hex(); 233 | }, 234 | 235 | // Spinner 236 | defaultSpinnerColor: "#45D56E", 237 | inverseSpinnerColor: "#1A191B", 238 | 239 | // Tabs 240 | tabBgColor: "#F8F8F8", 241 | tabFontSize: 15, 242 | tabTextColor: "#222222", 243 | 244 | // Text 245 | textColor: "#000", 246 | inverseTextColor: "#fff", 247 | noteFontSize: 14, 248 | 249 | // Title 250 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", 251 | titleFontSize: platform === "ios" ? 17 : 19, 252 | subTitleFontSize: platform === "ios" ? 12 : 14, 253 | subtitleColor: "#FFF", 254 | 255 | // New Variable 256 | titleFontColor: "#FFF", 257 | 258 | // Other 259 | borderRadiusBase: platform === "ios" ? 5 : 2, 260 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 261 | contentPadding: 10, 262 | 263 | get darkenHeader() { 264 | return color(this.tabBgColor).darken(0.03).hex(); 265 | }, 266 | 267 | dropdownBg: "#000", 268 | dropdownLinkColor: "#414142", 269 | inputLineHeight: 24, 270 | jumbotronBg: "#C9C9CE", 271 | jumbotronPadding: 30, 272 | deviceWidth, 273 | deviceHeight, 274 | 275 | // New Variable 276 | inputGroupRoundedBorderRadius: 30 277 | }; 278 | -------------------------------------------------------------------------------- /native-base-theme/variables/material.js: -------------------------------------------------------------------------------- 1 | import color from "color"; 2 | 3 | import { Platform, Dimensions, PixelRatio } from "react-native"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | const deviceWidth = Dimensions.get("window").width; 7 | const platform = Platform.OS; 8 | const platformStyle = "material"; 9 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "Roboto" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: 0, 31 | CheckboxBorderWidth: 2, 32 | CheckboxPaddingLeft: 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 18 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 21 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: "#da552f", 44 | segmentActiveBackgroundColor: "#fff", 45 | segmentTextColor: "#fff", 46 | segmentActiveTextColor: "#da552f", 47 | segmentBorderColor: "#fff", 48 | segmentBorderColorMain: "#da552f", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 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 | 110 | // Color 111 | brandPrimary: "#da552f", 112 | brandInfo: "#3F57D3", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: "#da552f", 135 | 136 | // FooterTab 137 | tabBarTextColor: "#b3c7f9", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: "#fff", 142 | tabActiveBgColor: undefined, 143 | 144 | // Tab 145 | tabDefaultBg: "#da552f", 146 | topTabBarTextColor: "#b3c7f9", 147 | topTabBarActiveTextColor: "#fff", 148 | topTabActiveBgColor: undefined, 149 | topTabBarBorderColor: "#fff", 150 | topTabBarActiveBorderColor: "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: "#fff", 154 | toolbarDefaultBg: "#da552f", 155 | toolbarHeight: platform === "ios" ? 76 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: "#fff", 162 | toolbarDefaultBorder: "#da552f", 163 | iosStatusbar: "light-content", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg).darken(0.2).hexString(); 166 | }, 167 | 168 | // Icon 169 | iconFamily: "Ionicons", 170 | iconFontSize: platform === "ios" ? 30 : 28, 171 | iconMargin: 7, 172 | iconHeaderSize: platform === "ios" ? 29 : 24, 173 | 174 | // InputGroup 175 | inputFontSize: 17, 176 | inputBorderColor: "#D9D5DC", 177 | inputSuccessBorderColor: "#2b8339", 178 | inputErrorBorderColor: "#ed2f2f", 179 | 180 | get inputColor() { 181 | return this.textColor; 182 | }, 183 | get inputColorPlaceholder() { 184 | return "#575757"; 185 | }, 186 | 187 | inputGroupMarginBottom: 10, 188 | inputHeightBase: 50, 189 | inputPaddingLeft: 5, 190 | 191 | get inputPaddingLeftIcon() { 192 | return this.inputPaddingLeft * 8; 193 | }, 194 | 195 | // Line Height 196 | btnLineHeight: 19, 197 | lineHeightH1: 32, 198 | lineHeightH2: 27, 199 | lineHeightH3: 22, 200 | iconLineHeight: platform === "ios" ? 37 : 30, 201 | lineHeight: platform === "ios" ? 20 : 24, 202 | 203 | // List 204 | listBorderColor: "#c9c9c9", 205 | listDividerBg: "#f4f4f4", 206 | listItemHeight: 45, 207 | listBtnUnderlayColor: "#DDD", 208 | 209 | // Card 210 | cardBorderColor: "#ccc", 211 | 212 | // Changed Variable 213 | listItemPadding: platform === "ios" ? 10 : 12, 214 | 215 | listNoteColor: "#808080", 216 | listNoteSize: 13, 217 | 218 | // Progress Bar 219 | defaultProgressColor: "#E4202D", 220 | inverseProgressColor: "#1A191B", 221 | 222 | // Radio Button 223 | radioBtnSize: platform === "ios" ? 25 : 23, 224 | radioSelectedColorAndroid: "#5067FF", 225 | 226 | // New Variable 227 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 228 | 229 | radioColor: "#7e7e7e", 230 | 231 | get radioSelectedColor() { 232 | return color(this.radioColor).darken(0.2).hexString(); 233 | }, 234 | 235 | // Spinner 236 | defaultSpinnerColor: "#45D56E", 237 | inverseSpinnerColor: "#1A191B", 238 | 239 | // Tabs 240 | tabBgColor: "#F8F8F8", 241 | tabFontSize: 15, 242 | tabTextColor: "#222222", 243 | 244 | // Text 245 | textColor: "#000", 246 | inverseTextColor: "#fff", 247 | noteFontSize: 14, 248 | 249 | // Title 250 | titleFontfamily: platform === "ios" ? "Roboto" : "Roboto_medium", 251 | titleFontSize: 19, 252 | subTitleFontSize: 14, 253 | subtitleColor: "#FFF", 254 | 255 | // New Variable 256 | titleFontColor: "#FFF", 257 | 258 | // Other 259 | borderRadiusBase: 2, 260 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 261 | contentPadding: 10, 262 | 263 | get darkenHeader() { 264 | return color(this.tabBgColor).darken(0.03).hexString(); 265 | }, 266 | 267 | dropdownBg: "#000", 268 | dropdownLinkColor: "#414142", 269 | inputLineHeight: 24, 270 | jumbotronBg: "#C9C9CE", 271 | jumbotronPadding: 30, 272 | deviceWidth, 273 | deviceHeight, 274 | 275 | // New Variable 276 | inputGroupRoundedBorderRadius: 30 277 | }; 278 | -------------------------------------------------------------------------------- /native-base-theme/variables/platform.js: -------------------------------------------------------------------------------- 1 | import color from "color"; 2 | 3 | import { Platform, Dimensions, PixelRatio } from "react-native"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | const deviceWidth = Dimensions.get("window").width; 7 | const platform = Platform.OS; 8 | const platformStyle = undefined; 9 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: platform === "ios" ? 13 : 0, 31 | CheckboxBorderWidth: platform === "ios" ? 1 : 2, 32 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 21 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", 44 | segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", 45 | segmentTextColor: platform === "ios" ? "#007aff" : "#fff", 46 | segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", 47 | segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", 48 | segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 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 | 110 | // Color 111 | brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", 112 | brandInfo: "#62B1F6", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: platform === "ios" ? "System" : "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#4179F7", 135 | 136 | // FooterTab 137 | tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: platform === "ios" ? "#007aff" : "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", 142 | tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", 143 | 144 | // Tab 145 | tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 146 | topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", 147 | topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", 148 | topTabActiveBgColor: platform === "ios" ? "#cde1f9" : undefined, 149 | topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", 150 | topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff", 154 | toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 155 | toolbarHeight: platform === "ios" ? 64 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: platform === "ios" ? "#000" : "#fff", 162 | toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", 163 | iosStatusbar: platform === "ios" ? "dark-content" : "light-content", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg).darken(0.2).hex(); 166 | }, 167 | 168 | // Icon 169 | iconFamily: "Ionicons", 170 | iconFontSize: platform === "ios" ? 30 : 28, 171 | iconMargin: 7, 172 | iconHeaderSize: platform === "ios" ? 33 : 24, 173 | 174 | // InputGroup 175 | inputFontSize: 17, 176 | inputBorderColor: "#D9D5DC", 177 | inputSuccessBorderColor: "#2b8339", 178 | inputErrorBorderColor: "#ed2f2f", 179 | 180 | get inputColor() { 181 | return this.textColor; 182 | }, 183 | get inputColorPlaceholder() { 184 | return "#575757"; 185 | }, 186 | 187 | inputGroupMarginBottom: 10, 188 | inputHeightBase: 50, 189 | inputPaddingLeft: 5, 190 | 191 | get inputPaddingLeftIcon() { 192 | return this.inputPaddingLeft * 8; 193 | }, 194 | 195 | // Line Height 196 | btnLineHeight: 19, 197 | lineHeightH1: 32, 198 | lineHeightH2: 27, 199 | lineHeightH3: 22, 200 | iconLineHeight: platform === "ios" ? 37 : 30, 201 | lineHeight: platform === "ios" ? 20 : 24, 202 | 203 | // List 204 | listBorderColor: "#c9c9c9", 205 | listDividerBg: "#f4f4f4", 206 | listItemHeight: 45, 207 | listBtnUnderlayColor: "#DDD", 208 | 209 | // Card 210 | cardBorderColor: "#ccc", 211 | 212 | // Changed Variable 213 | listItemPadding: platform === "ios" ? 10 : 12, 214 | 215 | listNoteColor: "#808080", 216 | listNoteSize: 13, 217 | 218 | // Progress Bar 219 | defaultProgressColor: "#E4202D", 220 | inverseProgressColor: "#1A191B", 221 | 222 | // Radio Button 223 | radioBtnSize: platform === "ios" ? 25 : 23, 224 | radioSelectedColorAndroid: "#3F51B5", 225 | 226 | // New Variable 227 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 228 | 229 | radioColor: "#7e7e7e", 230 | 231 | get radioSelectedColor() { 232 | return color(this.radioColor).darken(0.2).hex(); 233 | }, 234 | 235 | // Spinner 236 | defaultSpinnerColor: "#45D56E", 237 | inverseSpinnerColor: "#1A191B", 238 | 239 | // Tabs 240 | tabBgColor: "#F8F8F8", 241 | tabFontSize: 15, 242 | tabTextColor: "#222222", 243 | 244 | // Text 245 | textColor: "#000", 246 | inverseTextColor: "#fff", 247 | noteFontSize: 14, 248 | 249 | // Title 250 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", 251 | titleFontSize: platform === "ios" ? 17 : 19, 252 | subTitleFontSize: platform === "ios" ? 12 : 14, 253 | subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", 254 | 255 | // New Variable 256 | titleFontColor: platform === "ios" ? "#000" : "#FFF", 257 | 258 | // Other 259 | borderRadiusBase: platform === "ios" ? 5 : 2, 260 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 261 | contentPadding: 10, 262 | 263 | get darkenHeader() { 264 | return color(this.tabBgColor).darken(0.03).hex(); 265 | }, 266 | 267 | dropdownBg: "#000", 268 | dropdownLinkColor: "#414142", 269 | inputLineHeight: 24, 270 | jumbotronBg: "#C9C9CE", 271 | jumbotronPadding: 30, 272 | deviceWidth, 273 | deviceHeight, 274 | 275 | // New Variable 276 | inputGroupRoundedBorderRadius: 30 277 | }; 278 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@storybook/react-native": "^3.1.9", 7 | "babel-eslint": "^7.2.3", 8 | "eslint": "^4.2.0", 9 | "eslint-plugin-react": "^7.1.0", 10 | "jest-expo": "~18.0.0", 11 | "react-dom": "16.0.0-alpha.12", 12 | "react-native-scripts": "0.0.50", 13 | "react-test-renderer": "16.0.0-alpha.12" 14 | }, 15 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 16 | "scripts": { 17 | "start": "react-native-scripts start", 18 | "eject": "react-native-scripts eject", 19 | "android": "react-native-scripts android", 20 | "ios": "react-native-scripts ios", 21 | "test": "node node_modules/jest/bin/jest.js --watch", 22 | "storybook": "storybook start -p 7007" 23 | }, 24 | "jest": { 25 | "preset": "jest-expo" 26 | }, 27 | "dependencies": { 28 | "@expo/vector-icons": "^5.0.0", 29 | "expo": "^18.0.3", 30 | "native-base": "2.2.0", 31 | "react": "16.0.0-alpha.12", 32 | "react-native": "^0.45.1", 33 | "react-native-app-intro": "^1.1.5", 34 | "react-navigation": "^1.0.0-beta.11" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /policy.md: -------------------------------------------------------------------------------- 1 | # Politique de confidentialité de SwipeHunt 2 | 3 | Pour recevoir des informations sur les Données personnelles, les objectifs et les parties avec qui elles sont partagées, veuillez contacter le Propriétaire 4 | . 5 | Responsable des données et Propriétaire 6 | Devanco 7 | Adresse e-mail de contact du Propriétaire : julien@devanco.com 8 | 9 | Types de Données collectées 10 | Le propriétaire ne fournit pas de liste des types de Données personnelles collectées. 11 | Les détails complets sur chaque type de Données personnelles collectées sont fournis dans les parties dédiées de la présente politique de confidentialité ou par des textes d’explication spécifiques publiés avant la collecte des Données. 12 | Les Données personnelles peuvent être librement fournies par l’Utilisateur, ou, en cas de Données d’utilisation, collectées automatiquement lorsque vous utilisez cette Application. 13 | Toutes les Données demandées par cette Application sont obligatoires et leur absence peut rendre impossible la fourniture des services par cette Application. Dans le cas où cette Application précise que certaines Données ne sont pas obligatoires, les Utilisateurs sont libres de ne pas les communiquer sans entraîner de conséquences sur la disponibilité ou le fonctionnement du service. 14 | Les Utilisateurs qui ne sont pas sûrs de savoir quelles sont les Données personnelles obligatoires sont invités à contacter le Propriétaire. 15 | Toute utilisation des Cookies – ou d’autres outils de suivi – par cette Application ou par les propriétaires de services de tiers utilisés par cette Application a pour objectif de fournir le service requis par l’Utilisateur, en plus d’autres finalités décrites dans le présent document et dans la Politique relative aux cookies, si elle est disponible. 16 | Les Utilisateurs sont responsables de toute Donnée personnelle de tiers obtenue, publiée ou communiquée par l’intermédiaire de cette Application et confirment qu’ils obtiennent le consentement du tiers pour fournir les Données au Propriétaire. 17 | Mode et lieu de traitement des Données 18 | Méthodes de traitement 19 | Le Responsable des données traite les Données de l’Utilisateur d’une manière appropriée et prend toutes les mesures de sécurité nécessaires pour empêcher l’accès, la divulgation, la modification ou la destruction non autorisés des Données. Le Traitement des données est effectué à l’aide d’ordinateurs ou d’outils informatiques et en suivant les procédures et les modes organisationnels étroitement liés aux finalités indiquées. L’accès, outre celui réservé au Responsable du traitement des données, peut dans certains cas être accordé à certaines catégories de personnes en charge des opérations du site (administration, ventes, marketing, service juridique, administration du système) ou à des parties externes (telles que les fournisseurs tiers de services techniques, les services de messagerie, les fournisseurs d’hébergement, les entreprises informatiques, les agences de communication) désignées, le cas échéant, comme sous-traitants des Données par le Propriétaire. La liste mise à jour de ces parties peut être demandée à tout moment au Responsable du traitement des données. 20 | Lieu de traitement 21 | Les Données sont traitées au siège du Responsable des données et en tout autre lieu où les parties responsables du traitement sont situées. Veuillez contacter le Responsable des données pour de plus amples informations. 22 | Temps de conservation 23 | Les Données seront conservées le temps qu’il sera nécessaire pour fournir le service demandé par l’Utilisateur, ou tel qu’énoncé dans les objectifs décrits dans le présent document. L’Utilisateur peut toujours demander au Responsable des données leur suspension ou leur suppression. 24 | Informations supplémentaires sur le traitement et la collecte des Données 25 | Action en justice 26 | Les Données personnelles de l’Utilisateur peuvent être utilisées à des fins juridiques par le Responsable des données devant les tribunaux ou à toute étape pouvant conduire à une action en justice résultant d’une utilisation inappropriée de cette Application ou des services connexes. 27 | L’Utilisateur est conscient du fait que les autorités publiques peuvent exiger du Responsable des données la divulgation des Données personnelles. 28 | Informations supplémentaires concernant les Données personnelles de l’Utilisateur 29 | Outre les informations contenues dans la présente politique de confidentialité, cette Application peut fournir à l’Utilisateur des renseignements complémentaires et des informations contextuelles concernant des services particuliers ou la collecte et le traitement des Données personnelles. 30 | Journaux système et maintenance 31 | À des fins d’exploitation et de maintenance, cette Application et tout autre service tiers peuvent collecter des fichiers qui enregistrent les interactions avec cette Application (Journaux système) ou utiliser à cette fin d’autres Données personnelles, telle que l’adresse IP. 32 | Informations non incluses dans la présente politique 33 | De plus amples renseignements concernant la collecte ou le traitement des Données personnelles peuvent à tout moment être demandés au Responsable des données. Veuillez consulter les informations de contact au début de ce document. 34 | Droits de l’Utilisateur 35 | L’Utilisateur a, à tout moment, le droit de savoir si ses Données personnelles ont été stockées et peut consulter le Responsable des données pour connaître leurs contenus et leur origine, vérifier leur exactitude ou demander à ce qu’elles soient complétées, annulées, mises à jour ou rectifiées. Il peut aussi demander à ce qu’elles soient transformées en un format anonyme ou à ce que toute donnée obtenue en violation de la loi soit bloquée, ou s’opposer à leur traitement pour tout motif légitime que ce soit. Les demandes doivent être transmises au Responsable des données à l’adresse indiquée ci-dessus. 36 | cette Application ne prend pas en charge les demandes « Interdire le suivi ». 37 | Référez-vous à la politique de confidentialité des services tiers pour déterminer s’ils respectent ou non l’option « Interdire le suivi ». 38 | Modifications de la présente politique de confidentialité 39 | Le Responsable des données se réserve le droit de modifier à tout moment la présente politique de confidentialité en en informant l’Utilisateur sur cette page. Il est recommandé de consulter souvent cette page en se référant à la date de la dernière modification indiquée au bas de cette page. Si un Utilisateur s’oppose à une quelconque modification apportée à cette Politique, il doit cesser d’utiliser cette Application et peut demander au Responsable des données de supprimer ses Données personnelles. Sauf mention contraire, la politique de confidentialité alors en vigueur s’applique à toutes les Données personnelles que le Responsable des données détient au sujet de l’Utilisateur. 40 | 41 | 42 | # Définitions et références légales 43 | 44 | Données personnelles (ou Données) 45 | Toute information concernant une personne physique ou morale, une institution ou une association qui est, ou peut être identifiée, même indirectement, par référence à une autre information, y compris un numéro d’identification personnelle. 46 | Données d’utilisation 47 | Les informations collectées automatiquement à partir de cette Application (ou de services tiers employés par cette Application), qui peuvent inclure les adresses IP ou les noms de domaines des ordinateurs utilisés par l'Utilisateur qui utilise cette Application, les adresses URI (Uniform Resource Identifier ou identifiant uniforme de ressource), l’heure de la demande, la méthode utilisée pour soumettre la demande au serveur, la taille du fichier reçu en réponse, le code numérique indiquant le statut de la réponse du serveur (résultat favorable, erreur, etc.), le pays d’origine, les caractéristiques du navigateur et du système d’exploitation utilisés par l’Utilisateur, les différents détails relatifs au temps par visite (p. ex. temps passé sur chaque page dans l’Application) et les détails relatifs au chemin suivi dans l’Application avec une référence spéciale à la séquence des pages visitées, et d’autres paramètres concernant le système d’exploitation ou l’environnement informatique de l’Utilisateur. 48 | Utilisateur 49 | La personne utilisant cette Application, qui doit correspondre à la Personne concernée ou être autorisée par celle-ci, à laquelle les Données personnelles se réfèrent. 50 | Personne concernée 51 | La personne physique ou morale à laquelle les Données personnelles se réfèrent. 52 | Service chargé de la mise en œuvre du traitement des données (ou Responsable du traitement) 53 | Personne physique ou morale, administration publique ou toute autre entité, association ou organisation autorisée par le Responsable des données à traiter les Données personnelles en conformité avec la présente politique de confidentialité. 54 | Responsable des données (ou Propriétaire) 55 | La personne physique ou morale, l’administration publique ou toute autre entité, association ou organisation étant habilitée, même conjointement avec un autre Responsable des données, à prendre des décisions concernant les objectifs et les méthodes de traitement des Données personnelles et les moyens utilisés, y compris les mesures de sécurité concernant l’exploitation et l’utilisation de cette Application. Sauf mention contraire, le Responsable des données est le Propriétaire de cette Application. 56 | Cette Application 57 | Le matériel informatique ou outil logiciel avec lequel les Données personnelles de l’Utilisateur sont collectées. 58 | Informations légales 59 | Avis aux Utilisateurs européens : la présente politique de confidentialité a été préparée en exécution des obligations définies à l’article 10 de de la directive européenne n°95/46/CE et en vertu des dispositions de la directive 2002/58/CE, telle que révisée par la directive 2009/136/CE portant sur les cookies. 60 | Cette politique de confidentialité s’applique exclusivement à cette Application. 61 | -------------------------------------------------------------------------------- /storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | -------------------------------------------------------------------------------- /storybook/index.js: -------------------------------------------------------------------------------- 1 | import {getStorybookUI, configure} from '@storybook/react-native'; 2 | 3 | // import stories 4 | configure(() => { 5 | require('./stories'); 6 | }, module); 7 | 8 | const StorybookUI = getStorybookUI({port: 7007, host: '192.168.1.10'}); 9 | export default StorybookUI; 10 | -------------------------------------------------------------------------------- /storybook/stories/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View} from 'react-native'; 3 | import AppIntro from 'react-native-app-intro'; 4 | 5 | import {storiesOf} from '@storybook/react-native'; 6 | import {action} from '@storybook/addon-actions'; 7 | import data from '../data'; 8 | 9 | import { 10 | Container, 11 | Header, 12 | Title, 13 | Right, 14 | Body, 15 | } from 'native-base'; 16 | 17 | 18 | import Card from '../../js/deckswiper/card'; 19 | import Timer from '../../js/deckswiper/timer'; 20 | import Swiper from '../../js/deckswiper/swiper'; 21 | 22 | import ListItem from '../../js/list/item'; 23 | import List from '../../js/list/list'; 24 | import Sidebar from '../../js/sidebar'; 25 | 26 | import Onboarding from '../../js/onboarding'; 27 | 28 | const card = { 29 | name: 'Awesome Product', 30 | tagline: 'This is a awesome project', 31 | screenshot_url: {'300px': 'http://via.placeholder.com/1480x1037'}, 32 | thumbnail: {image_url: 'http://via.placeholder.com/80x80'}, 33 | topics: [{id: 12, name: 'TECH'}, {id: 641, name: 'OTHER'}] 34 | } 35 | storiesOf('Swiper El', module) 36 | .addDecorator((getStory) => 37 | 38 |
39 | 40 | Headers 41 | 42 | 43 |
44 | 45 | 46 | {getStory()} 47 | 48 | 49 | ) 50 | .add('Card', () => ) 51 | .add('Card Long Tagline', () => ) 52 | .add('Card Real', () => ) 53 | 54 | .add('Timer Timeout', () => ) 55 | .add('Timer', () => ) 56 | ; 57 | 58 | storiesOf('Swiper', module) 59 | .addDecorator((getStory) => 60 | 61 |
62 | 63 | Headers 64 | 65 | 66 |
67 | 68 | {getStory()} 69 | 70 | ) 71 | .add('Empty', () => ) 76 | .add('With 3 products', () => ) 83 | ; 84 | 85 | storiesOf('List', module) 86 | .addDecorator((getStory) => 87 | 88 |
89 | 90 | Headers 91 | 92 | 93 |
94 | 95 | {getStory()} 96 | 97 | ) 98 | .add('Item', () => ) 99 | .add('Item Real', () => ) 100 | 101 | .add('Empty', () => ) 102 | .add('Complete', () => ) 103 | .add('Archived Only', () => ) 104 | .add('News Only', () => ) 105 | ; 106 | 107 | storiesOf('Sidebar', module) 108 | .add('Index', () => ) 109 | 110 | storiesOf('Onboarding', module) 111 | .add('Index', () => ) 112 | --------------------------------------------------------------------------------