Skip to content

Instantly share code, notes, and snippets.

@leviyehonatan
Last active January 29, 2019 18:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leviyehonatan/71133b02767b780d2b79d9f00a81e1f6 to your computer and use it in GitHub Desktop.
Save leviyehonatan/71133b02767b780d2b79d9f00a81e1f6 to your computer and use it in GitHub Desktop.
my problem with flatlist overflow
import {Animated, Dimensions, NativeModules, Platform, StyleSheet} from 'react-native';
import {formStyle} from './forms';
import {FEED} from './app';
import DeviceInfo from 'react-native-device-info';
import * as config from '../config';
const { StatusBarManager } = NativeModules;
const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;
function isTablet(ratio){
return (ratio < 1.6);
}
export const SIZES = {
radioSmall: 6,
radioBig: 24,
radioRadius:18,
radioWidth:2,
radioSmallRadius:3,
radioSmallWidth:4,
radioInnerLarge: 14,
radioInnerRadius: 7,
imageAssementSize: 115,
graphWidth: WIDTH * 0.9,
graphFooterHeight: 30,
graphRowHeight: 30,
graphTitlesColumnWidth: WIDTH * 0.12,
androidTabBarHeight: 56,
iosTabBarHeight: 50,
contentMarginFromSides: 20,
mediaSliderHeight: 60,
taskHeaderHeight: 50,
moduleItemDisplayHeight: 255,
loadingIndicatorSmall: { flex: 2 },
loadingIndicatorBig: { flex: 5 },
borderRadiusCircle: Math.round((WIDTH + HEIGHT) / 2),
breathingCircleDiameter: Math.round(WIDTH * 0.42),
portraitVideoWrapper: { width: WIDTH - 64, height: Math.round((WIDTH - 64) * 9 / 16 ) } //aspect ration of video is 16/9, 64 = 12*2 (task card padding) + 20*2 (task content marginHorizontal)
};
export const DEVICE = {
WIDTH: WIDTH,
HEIGHT: HEIGHT,
STATUSBAR: (Platform.OS === 'ios') ? 23 : StatusBarManager.HEIGHT,
KEYBOARD: new Animated.Value(0),
ISTABLET : isTablet(HEIGHT/WIDTH),
TASK_CARD_HEIGHT_IOS : HEIGHT - (SIZES.taskHeaderHeight + 30),
TASK_CARD_HEIGHT_ANDROID : HEIGHT - (SIZES.taskHeaderHeight + 55),
FULL_CARD_HEIGHT_IOS : HEIGHT - 45,
FULL_CARD_HEIGHT_ANDROID : HEIGHT - 60,
HEADERED_CARD_HEIGHT_IOS : HEIGHT - 110,
HEADERED_CARD_HEIGHT_ANDROID : HEIGHT - 60 - 60,
MODEL: DeviceInfo.getModel(),
IS_SPECIAL_DEVICE_SIZE: () => {
return config.SPECIAL_DEVICES_SIZES.includes(DEVICE.MODEL);
},
};
export const FONT = {
FAMILY : {
'NORMAL': 'Lato-Regular',
'REGULAR': 'Lato-Light',
'BOLD': 'Lato-Bold',
'BLACK': 'Lato-Black',
},
};
export const COLORS = {
'BLACK' : '#000000',
'BACKGROUND_TASK' : '#F6F7FA',
'BATTLESHIPGREY' : '#727580',
'BACKGROUND_PAGE': '#F5F5F5',
'COOLGREY' : '#B3B7BE',
'FADEDBLUE' : '#848CD1',
'FLATBLUE' : '#3188A0',
'NORMALBLUE' : '#3e65cf',
'PALEGREY' : '#DEE1E6',
'RUSTYORANGE' : '#D16B0F',
'ENVIRONMENTGREEN': '#66C3B6',
'SEA' : '#359688',
'SEAFOAMBLUE' : '#69B9D3',
'MORNING': '#6EB9D4',
'SLATE' : '#414C5C',
'GRAY_DARK': '#757575',
'STEELBLUE' : '#5B63A6',
'TANGERINE' : '#FF9600',
'WHITE': '#FFFFFF',
'WHITETWO' : '#F3F3F3',
'ANOTHERGRAY' : '#F2F2F2',
'RADIO_WHITE': '#e0e0e0',
'RED' : '#EA5050',
'GREEN' : '#94D42E',
'FACEBOOK_BLUE' : '#3363b3',
'ERROR' : '#a94442',
'RADIO_BORDER': '#e0e0e0',
'WHITEOPAQUE' : 'rgba(255, 255, 255, 0.6)',
'WHITETWOOPAUE' : 'rgba(243, 243, 243, 0.8)',
'BLACKOPAQUE' : 'rgba(0, 0, 0, 0.3)',
'BLACKOPAQUE_MID' : 'rgba(0, 0, 0, 0.35)',
};
export const CONTAINERS = StyleSheet.create({
TEXT_INPUT_ANDROID_MARGIN_BOTTOM: {
marginBottom: Platform.OS === 'ios' ? 0 : 8
},
FULL_CARD_BACKGROUND_VIEW : {
flex: 1,
width: DEVICE.WIDTH,
height: DEVICE.HEIGHT,
backgroundColor: COLORS.WHITETWO,
padding: 12,
paddingTop: Platform.OS === 'ios' ? 20 : 12
},
SHADOWED_CARD_VIEW : {
shadowColor: COLORS.BLACK,
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 19,
shadowOpacity: 0.16,
elevation: 10,
},
SHADOWED_ONGOING_VIEW : {
shadowColor: COLORS.BLACK,
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 19,
shadowOpacity: 0.3,
elevation: 10,
},
FULL_CARD_VIEW : {
flex: 1,
backgroundColor: COLORS.WHITE,
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
height: Platform.OS === 'ios' ? DEVICE.FULL_CARD_HEIGHT_IOS : DEVICE.FULL_CARD_HEIGHT_ANDROID
},
HEADERED_CARD_BACKGROUND_VIEW : {
width: DEVICE.WIDTH,
height: Platform.OS === 'ios' ? DEVICE.FULL_CARD_HEIGHT_IOS : DEVICE.FULL_CARD_HEIGHT_ANDROID,
backgroundColor: COLORS.WHITETWO,
padding: 12,
paddingTop: Platform.OS === 'ios' ? 20 : 12
},
HEADERED_CARD_VIEW : {
backgroundColor: COLORS.WHITE,
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
height: Platform.OS === 'ios' ? DEVICE.HEADERED_CARD_HEIGHT_IOS : DEVICE.HEADERED_CARD_HEIGHT_ANDROID
},
ALIGN_CENTER: {
alignItems: 'center'
},
CONTENT_VIEW_NO_TOP: {
marginHorizontal: 30,
},
DETAILS_QUESTION: {
marginTop:50,
flexDirection: 'row',
borderBottomWidth:1,
},
FAKE_KYB: {
height: DEVICE.HEIGHT,
justifyContent: 'flex-end'
},
FLEX_ONE_ALIGN_CENTER: {
alignItems: 'center'
},
HEADER_VIEW: {
backgroundColor: COLORS.WHITE,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: Platform.OS === 'ios' ? 30 : 20,
paddingBottom: 15,
paddingLeft: SIZES.contentMarginFromSides,
paddingRight: SIZES.contentMarginFromSides,
},
HEADER_VIEW_SPECIAL_DEVICE_SIZE: {
backgroundColor: COLORS.WHITE,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: 50,
paddingBottom: 15,
paddingLeft: SIZES.contentMarginFromSides,
paddingRight: SIZES.contentMarginFromSides,
},
HEADER_ICON_CONTAINER: {
flex: 0.2,
alignItems: 'center'
},
POSTREG_ERROR: {
marginTop: 5
},
END_TWENTY: {
alignItems: 'flex-end',
marginRight: 20
},
MAIN_COLUMN_WHITE: {
flex: 1,
justifyContent: 'space-between',
paddingTop: (Platform.OS == 'ios') ? DEVICE.STATUSBAR : 0,
backgroundColor: COLORS.WHITE,
},
MARGINED_BOTTOM_ROW_BETWEEN: {
flexDirection: 'row',
justifyContent:'space-between',
marginBottom: 20
},
MEDIA_SLIDER_VIEW: {
width: DEVICE.WIDTH * 0.5,
marginLeft: 10,
marginRight: 10
},
MEDIA_PLAY_ICON_VIEW: {
backgroundColor: COLORS.WHITE,
borderRadius: 50,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
justifyContent: 'center',
alignItems: 'center',
height: 40,
width: 40
},
MESSAGE_CARD_VIEW: {
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
justifyContent: 'center',
alignItems: 'center',
paddingTop: 60,
paddingBottom: 20
},
MESSAGE_NUMBERS_VIEW: {
flexDirection: 'row',
alignItems: 'flex-end',
},
MESSAGE_TEXT_VIEW: {
marginTop: 20,
marginBottom: 40,
marginLeft: 50,
marginRight: 50
},
MULTIPLE_ANSWERS_CONTAINER: {
flexDirection:'column',
justifyContent:'flex-start',
},
MULTIPLE_ANSWERS: {
flexDirection: 'row',
marginTop: 20,
},
MULTIPLE_ANSWERS_EMPTY: {
backgroundColor: COLORS.ANOTHERGRAY,
height: 20,
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
width: 20,
},
MULTIPLE_ANSWERS_EMPTY_SQUARE_CONTAINER: {
borderRadius: 5,
},
MULTIPLE_ANSWERS_EMPTY_CIRCLE_CONTAINER: {
borderRadius: 20,
},
CHECKBOX_EMPTY_WRAPPER: {
backgroundColor: COLORS.WHITE,
height: 18,
width: 18,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
borderWidth: 1.5,
},
MYSLEEP_ITEM_CONTAINER: {
flex: 1,
},
MYSLEEP_BUTTON_VIEW: {
borderColor: COLORS.SEAFOAMBLUE,
borderRadius: 25,
borderWidth: 2,
padding: 5,
paddingLeft: 8,
paddingRight: 8,
marginLeft: 15
},
MYSLEEP_DETAILS_VIEW: {
flexDirection: 'row',
marginTop: 10,
alignItems: 'center'
},
MYSLEEP_DETAILS_TEXT_WRAPPER: {
flexDirection: 'row',
marginLeft: 5,
alignItems: 'flex-end',
},
MYSLEEP_ICON_STYLE: {
marginBottom: Platform.OS === 'ios' ? -7 : 0,
},
MYSLEEP_TOOLTIP_CONTAINER: {
position: 'absolute',
top: 0,
left: 5,
right: 5,
backgroundColor: COLORS.SLATE,
borderRadius: 8,
padding: 10,
alignItems: 'center'
},
SEPARATOR_LINE: {
backgroundColor: 'rgba(151,151,151,0.1)',
height: 2,
width: DEVICE.WIDTH,
marginTop: 5,
marginBottom: 5
},
NOTIFICATION_ITEM_CONTAINER: {
paddingBottom: 8,
paddingTop: 8,
paddingLeft: 16,
paddingRight: 16,
borderBottomWidth: 1,
borderBottomColor: 'rgba(151,151,151,0.2)'
},
NOTIFICATION_UNREAD_VIEW: {
backgroundColor: COLORS.WHITE,
borderRadius: 5,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
},
REG_CARD_CONTENT: {
marginHorizontal: 30,
},
REG_ICON: {
alignItems: 'center',
justifyContent: 'center',
marginRight: 15
},
ROW: {
flexDirection: 'row'
},
ROW_BETWEEN: {
flexDirection: 'row',
justifyContent: 'space-between'
},
ROW_CENTER: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
SECONDARY_BUTTON_VIEW: {
justifyContent: 'center',
alignItems: 'center',
},
SECONDARY_BUTTONS_ROW_VIEW: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%'
},
SECONDARY_BUTTON_TEXT_CONTAINER: {
paddingBottom: 20,
},
SUBMITTED_MODAL_CONTAINER: {
height: DEVICE.HEIGHT,
width: DEVICE.WIDTH,
backgroundColor: COLORS.BLACKOPAQUE,
justifyContent: 'center',
alignItems: 'center'
},
TABS_WRAPPER_VIEW: {
height: DEVICE.HEIGHT,
backgroundColor: COLORS.WHITETWO
},
TABS_CONTAINER: {
backgroundColor: COLORS.WHITETWO,
flex:1,
// marginBottom: 20,
},
TAB_BAR_MARGIN: {
marginBottom: Platform.OS === 'ios' ? SIZES.iosTabBarHeight : SIZES.androidTabBarHeight
},
TASK_IMAGE_VIEW: {
alignItems: 'center',
marginBottom: 20,
},
TASK_IMAGE_VIEW_RIGHT: {
alignItems: 'flex-end',
marginBottom: 20,
},
TASK_QUESTION_VIEW: {
padding: 20
},
TASK_TEXTANSWER_VIEW: {
marginTop: 10,
marginBottom: 10,
paddingTop: 10,
paddingBottom: 5,
borderBottomWidth: 2
},
TASK_HEADER_BAR : {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 8,
marginTop: 5,
height: SIZES.taskHeaderHeight
},
TASK_CLOSE_ICON_CONTAINER: {
flex: 0.2,
alignItems: 'flex-end'
},
TASK_SCROLL_VIEW_CONTAINER: {
flexGrow: 1,
justifyContent: 'space-between'
},
TASK_CONTENT_WRAPPER: {
flex: 1,
backgroundColor: COLORS.WHITE,
borderBottomStartRadius: 10,
borderBottomEndRadius: 10,
},
TASK_CONTENT_VIEW: {
marginHorizontal: 20,
marginTop: 30,
},
TASK_FAVORITE_ICON_VIEW: {
flex: 0.1,
alignItems: 'flex-end'
},
TASK_BUTTONS_BOTTOM: {
flex: 1,
justifyContent: 'flex-end',
},
TASK_BACKGROUND_VIEW : {
width: DEVICE.WIDTH,
height: DEVICE.HEIGHT,
backgroundColor: COLORS.WHITETWO,
padding: 12,
},
TASK_BACKGROUND_VIEW_SPECIAL_DEVICE_SIZE: {
width: DEVICE.WIDTH,
height: DEVICE.HEIGHT,
backgroundColor: COLORS.WHITETWO,
paddingBottom: 65,
paddingTop: 24,
paddingRight: 12,
paddingLeft: 12
},
TASK_CARD_VIEW : {
backgroundColor: COLORS.WHITE,
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
height: Platform.OS === 'ios' ? DEVICE.TASK_CARD_HEIGHT_IOS : DEVICE.TASK_CARD_HEIGHT_ANDROID,
},
TASK_CARD_VIEW_SPECIAL_DEVICE_SIZE : {
backgroundColor: COLORS.WHITE,
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
height: DEVICE.HEIGHT - (SIZES.taskHeaderHeight + 90),
},
TASK_RATE_SUD_NUM_PADDING_CONTAINER: {
paddingLeft: 16,
paddingRight: 16,
alignItems: 'center',
justifyContent: 'center'
},
TASK_RATE_SUD_SELECTED_VIEW: {
backgroundColor: COLORS.WHITE,
borderRadius: 50,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
paddingBottom: 8,
paddingTop: 8,
},
TASK_RATE_SUD_UNSELECTED_VIEW: {
paddingBottom: 14,
paddingTop: 14,
},
TASK_RATE_SUD_SLIDER_PADDING: {
paddingLeft: 12,
paddingRight: 12,
},
TASK_ANIMATION_CONTENT_CONTAINER: {
flex: 1,
width: '100%',
justifyContent: 'center',
alignItems: 'center'
},
STUB_TASK_PRACTICE_PROGRESS: {
height: 10,
width: '100%',
backgroundColor: COLORS.WHITETWO,
marginBottom: 10,
flexDirection: 'row',
alignItems: 'center',
marginTop: 15,
borderRadius: 5,
},
STUB_TASK_PRACTICE_PROGRESS_FILLED: {
height: 10,
borderRadius: 5,
elevation: 3,
opacity:1,
shadowColor: COLORS.BLACKOPAQUE,
shadowOffset: {
width: 1,
height: 1
},
shadowRadius: 5,
shadowOpacity:0.6,
},
TITLE_VIEW : {
borderTopStartRadius: 10,
borderTopEndRadius: 10,
padding: 20,
},
TUTORIAL_BOTTOM: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.WHITE
},
TUTORIAL_IMAGE : {
flexDirection: 'column',
alignItems: 'stretch',
height: 166,
width: 200,
marginTop:40
},
TUTORIAL_ICONS : {
flexDirection: 'row',
marginTop:10,
paddingHorizontal:40
},
TUTORIAL_TITLE : {
marginTop:40,
paddingHorizontal:40,
justifyContent:'flex-start'
},
TUTORIAL_SUBTITLE : {
paddingHorizontal:40,
marginTop:40,
},
TUTORIAL_PERM_LIST_SUBTITLE : {
marginTop:20,
},
WHITE_CONTENT_PADDED: {
flex: 5,
backgroundColor: COLORS.WHITE,
padding: 20,
},
TOOLS_CONTENT_SECTION_VIEW: {
marginBottom: 20,
marginTop: 20,
},
TOOLS_CONTAINER_VIEW: {
marginLeft: 20,
width: DEVICE.WIDTH / 4.5,
alignItems: 'center'
},
TOOL_ITEM_IMAGE: {
width: DEVICE.WIDTH / 4.5,
height: DEVICE.WIDTH / 4.5,
},
TOOL_CARD_VIEW: {
flex: 1,
backgroundColor: COLORS.WHITE,
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
},
TOOL_CARD_CONTENT: {
width: DEVICE.WIDTH - 40,
alignItems: 'center'
},
TOOL_IMAGE: {
width: DEVICE.WIDTH * 0.77,
height: DEVICE.HEIGHT * 0.28,
marginTop: 25
},
TOOL_AUDIO_LEFT: {
borderBottomLeftRadius : 20,
borderColor: COLORS.ENVIRONMENTGREEN,
borderTopLeftRadius : 20,
borderWidth: 1.5,
marginTop: 20,
padding: 10,
},
TOOL_AUDIO_LEFT_SELECTED: {
backgroundColor: COLORS.ENVIRONMENTGREEN,
borderBottomLeftRadius : 20,
borderColor: COLORS.ENVIRONMENTGREEN,
borderTopLeftRadius : 20,
borderWidth: 1,
marginTop: 20,
padding: 10,
},
TOOL_AUDIO_RIGHT: {
borderBottomRightRadius : 20,
borderColor: COLORS.ENVIRONMENTGREEN,
borderTopRightRadius : 20,
borderWidth: 1.5,
marginTop:20,
padding:10,
},
TOOL_AUDIO_RIGHT_SELECTED: {
backgroundColor: COLORS.ENVIRONMENTGREEN,
borderBottomRightRadius : 20,
borderColor: COLORS.ENVIRONMENTGREEN,
borderTopRightRadius : 20,
borderWidth: 1,
marginTop: 20,
padding: 10,
},
TOOL_AUDIO_CENTER: {
borderColor: COLORS.ENVIRONMENTGREEN,
borderTopWidth: 1.5,
borderBottomWidth: 1.5,
borderLeftWidth: 0,
borderRightWidth: 0,
marginTop: 20,
padding: 10,
},
TOOL_AUDIO_CENTER_SELECTED: {
backgroundColor: COLORS.ENVIRONMENTGREEN,
borderColor: COLORS.ENVIRONMENTGREEN,
borderWidth:1,
marginTop: 20,
padding: 10,
},
TOOL_MEDIA_PLAY_ICON_PAUSED: {
backgroundColor: COLORS.ENVIRONMENTGREEN,
borderRadius: 50,
shadowColor: COLORS.ENVIRONMENTGREEN,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
justifyContent: 'center',
alignItems: 'center',
height: 40,
width: 40,
},
TOOL_MEDIA_PLAY_ICON_PLAYING: {
backgroundColor: COLORS.WHITE,
borderRadius: 50,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
justifyContent: 'center',
alignItems: 'center',
height: 40,
width: 40
},
FAVORITE_TASK_VIEW: {
flex: 1,
borderRadius: 5,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
padding: 10
},
INTEGRATION_BOX : {
width: 30,
height: 30,
backgroundColor: COLORS.WHITE,
borderRadius: 5,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 5,
shadowOpacity: 0.5,
elevation: 10,
justifyContent: 'center',
alignItems: 'center',
marginRight:10
},
INTEGRATION: {
margin:20,
flex:1
},
INTEGRATION_BOX_TEXT: {
flexDirection:'row',
alignItems: 'center'
},
INTEGRATION_ROW: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 20,
},
PERM : {
marginTop:20,
marginHorizontal:20
},
PERM_SCREEN_ROW: {
alignSelf: 'stretch',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom:10
},
MARGIN_TOP_TWENTY: {
marginTop:20
},
BUILD: {
marginTop:10,
marginLeft:10
},
BUILD_ROW: {
flex: 1,
flexDirection: 'row',
marginBottom:10,
marginHorizontal:20,
marginTop:10,
},
});
export const TEXT = StyleSheet.create({
DISCLAIMER: {
fontFamily: FONT.FAMILY.NORMAL,
fontSize: 15,
color: COLORS.COOLGREY,
},
DISCLAIMER_CENTER: {
textAlign: 'center',
fontFamily: FONT.FAMILY.REGULAR,
fontSize: 12,
color: COLORS.COOLGREY,
},
POSTREG_ERROR: {
color: COLORS.ERROR,
fontSize: 12,
fontFamily: FONT.FAMILY.REGULAR,
},
DYNAMIC_LIST_ITEM: {
fontSize: 16,
fontFamily: FONT.FAMILY.BOLD
},
DESCRIPTION_TEXT: {
color: COLORS.BATTLESHIPGREY,
fontSize: 18,
textAlign: 'left',
lineHeight: 24,
marginBottom: 10,
fontFamily: FONT.FAMILY.NORMAL,
},
DESCRIPTION_MEDIA_TEXT: {
color: COLORS.SLATE,
fontSize: 30,
lineHeight: 34,
textAlign: 'center',
fontFamily: FONT.FAMILY.BOLD,
marginBottom: 20
},
SLIDER_MEDIA_TEXT_LANDSCAPE: {
fontSize: 16,
color: COLORS.WHITETWO,
fontFamily: FONT.FAMILY.NORMAL
},
EIGHTEEN_TOP: {
fontSize: 18,
marginTop: 10
},
EIGHTEEN_NORMAL: {
fontSize: 18,
fontFamily: FONT.FAMILY.NORMAL
},
GRAPH_TITLE: {
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE
},
GRAPH_INDEX_NAME: {
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.BATTLESHIPGREY
},
GRAPH_COLUMN_TITLE: {
fontSize: 12,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.BATTLESHIPGREY
},
GRAPH_COLUMN_TITLE_SELECTED: {
fontSize: 12,
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.SLATE
},
GRAPH_COLUMN_DESCRIPTION: {
fontSize: 10,
lineHeight: 14
},
HEADER_TITLE: {
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.SLATE,
fontSize: 14,
textAlign: 'center'
},
LIKE_TEXT_INPUT_CLEAN: {
color:COLORS.SLATE,
fontFamily: FONT.FAMILY.REGULAR,
fontSize:20,
},
MENU_ITEM_TEXT: {
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
marginLeft: 10,
},
MESSAGE_BIGNUMBER: {
fontSize: 84,
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.REGULAR,
height: Platform.OS === 'ios' ? 84 : 78
},
MESSAGE_SMALLNUMBER: {
fontSize: 24,
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.NORMAL,
height: 24
},
MESSAGE_TITLE_TEXT: {
fontSize: 26,
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.BOLD,
textAlign: 'center'
},
MESSAGE_SUBTITLE_TEXT: {
fontSize: 16,
color: COLORS.WHITE,
lineHeight: 24,
fontFamily: FONT.FAMILY.NORMAL,
textAlign: 'center',
margin: 10
},
MESSAGE_SECONDARY_BUTTON_TEXT: {
fontSize: 14,
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.NORMAL,
marginTop: 20
},
OVERLAY_TITLE: {
fontSize: 24,
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.SLATE,
textAlign: 'center'
},
OVERLAY_SUBTITLE: {
fontSize: 16,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.BATTLESHIPGREY,
lineHeight: 20,
textAlign: 'center'
},
MODAL_CANCEL: {
fontSize: 16,
fontWeight: '700',
color: COLORS.NORMALBLUE,
marginRight: 10
},
MODULE_NAME : {
color: COLORS.SLATE,
fontSize: 14,
lineHeight: 18,
fontFamily: FONT.FAMILY.NORMAL
},
MYSLEEP_BUTTON: {
color: COLORS.SEAFOAMBLUE,
fontSize: 12,
fontWeight: '700',
textAlign: 'center'
},
MYSLEEP_DETAILS: {
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.NORMAL,
},
MYSLEEP_NO_DATA_TEXT: {
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.BOLD,
fontSize: 20,
},
MYSLEEP_TOOLTIP: {
color: COLORS.WHITE,
fontSize: 12,
fontWeight: '700',
},
PERMISSION_LINK:{
color: COLORS.SLATE,
textAlign: 'center',
fontFamily: FONT.FAMILY.BOLD,
fontSize: 16,
marginLeft: 10
},
QUESTION_ASSESSMENT_INDEX: {
fontFamily: FONT.FAMILY.BOLD,
fontSize: 30,
color:COLORS.SEAFOAMBLUE,
},
QUESTION_ASSESSMENT_TEXT: {
fontFamily: FONT.FAMILY.BOLD,
fontSize: 24,
color:COLORS.SEAFOAMBLUE,
lineHeight: 30,
textAlign: 'center'
},
QUESTION_TEXT: {
color: COLORS.BATTLESHIPGREY,
fontFamily: FONT.FAMILY.NORMAL,
fontSize: 18,
lineHeight: 24,
},
QUESTION_CHOICE_TEXT: {
color: COLORS.BATTLESHIPGREY,
fontSize: 16,
lineHeight: 20
},
QUESTION_SELECTED_TEXT: {
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.BOLD,
fontSize: 16,
lineHeight: 20
},
SIXTEEN_TOP: {
fontSize: 16,
marginTop: 10
},
SECONDARY_BUTTONS_TEXT: {
color: COLORS.BATTLESHIPGREY,
fontSize: 12,
marginTop: 15,
marginBottom: 15
},
SLEEP_TRACKER_DATE_TITLE: {
fontSize: 24,
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.BOLD
},
SMALL_TEXT_WHITE: {
textAlign: 'center',
fontFamily: FONT.FAMILY.NORMAL,
fontSize: 17,
color: COLORS.WHITE,
},
SMALL_TEXT_DARK_GREY_LEFT:{
textAlign: 'left',
fontFamily: FONT.FAMILY.REGULAR,
fontSize: 17,
color: COLORS.BATTLESHIPGREY,
},
SUBTITLE_TEXT: {
fontSize: 14,
fontFamily: FONT.FAMILY.BOLD,
marginTop: 3,
marginLeft: 3
},
SWITCH_TEXT: {
fontSize: 16,
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.SLATE,
width: 200,
},
TABS_TITLE: {
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE
},
TABS_TITLE_BOLD: {
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.SLATE
},
DOMAIN_TITLE: {
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE,
fontSize:18,
marginBottom:16
},
TASK_TITLE: {
fontSize: 20,
marginBottom: 10
},
TASK_PLACEHOLDER_TEXT: {
fontSize: 12,
color: COLORS.COOLGREY,
fontFamily: FONT.FAMILY.NORMAL
},
TASK_TEXTANSWER_TEXT: {
fontSize: 18,
lineHeight: 24,
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.BOLD
},
TASK_PICKER_ANSWER_BIG_TEXT: {
fontSize: 60,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE
},
TASK_PICKER_ANSWER_SMALL_TEXT: {
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE
},
STUB_PRACTICE_TIME: {
fontSize: 60,
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.NORMAL,
},
STUB_PROGRESS_TEXT: {
fontSize: 12,
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.NORMAL
},
STUB_ENCOURAGEMENT_TEXT: {
fontSize: 20,
color: COLORS.BATTLESHIPGREY,
fontFamily: FONT.FAMILY.NORMAL,
lineHeight: 26
},
TITLE_TEXT: {
color: COLORS.WHITE,
fontSize: 28,
fontWeight: '700',
lineHeight: 35
},
TWENTY: {
fontSize: 20
},
TUTORIAL_SUBTITLE:{
color: COLORS.GRAY_DARK,
textAlign: 'center',
fontFamily: FONT.FAMILY.NORMAL,
fontSize: 18,
},
TUTORIAL_TITLE: {
color: COLORS.SLATE,
textAlign: 'center',
fontFamily: FONT.FAMILY.BOLD,
fontSize: 24,
},
TUTORIAL_TITLE_BLUE: {
color: COLORS.MORNING,
textAlign: 'center',
fontFamily: FONT.FAMILY.BOLD,
fontSize: 24,
},
TUTORIAL_TITLE_LEFT: {
color: COLORS.SLATE,
textAlign: 'left',
fontFamily: FONT.FAMILY.BOLD,
fontSize: 24,
},
TWELVE: {
fontSize: 12,
fontFamily: FONT.FAMILY.NORMAL
},
SECTION_SUBTITLE: {
color: COLORS.SLATE,
fontSize: 14,
fontFamily: FONT.FAMILY.BOLD
},
TOOL_CONTAINER_NAME: {
textAlign: 'center',
color: COLORS.SLATE,
fontSize: 12,
fontFamily: FONT.FAMILY.NORMAL,
marginTop: 10
},
TOOL_CARD_TITLE: {
color: COLORS.SLATE,
fontSize: 28,
textAlign: 'center',
fontFamily: FONT.FAMILY.BOLD,
},
TOOL_CARD_ADDITIONAL_TEXT: {
color: COLORS.BATTLESHIPGREY,
fontSize: 18,
fontFamily: FONT.FAMILY.NORMAL,
textAlign: 'center',
lineHeight: 24,
paddingHorizontal: 15,
},
TOOL_AUDIO_DURATION: {
color: COLORS.COOLGREY,
fontSize: 14,
fontFamily: FONT.FAMILY.BOLD,
},
TOOL_AUDIO_DURATION_SELECTED: {
color: COLORS.WHITE,
fontSize: 14,
fontFamily: FONT.FAMILY.BOLD,
},
FAVORITE_TASK_TITLE: {
color: COLORS.WHITE,
fontSize: 16,
lineHeight: 20,
fontFamily: FONT.FAMILY.BOLD
},
CHECKBOX_TEXT: {
color: COLORS.SLATE,
fontFamily: FONT.FAMILY.NORMAL,
fontSize: 14,
lineHeight: 18
},
PERMS_TEXT: {
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color:COLORS.BATTLESHIPGREY
},
TASK_CIRCLE_CONTENT_TEXT: {
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.SLATE
},
TASK_RATE_SUD_SELECTED_TEXT: {
fontSize: 28,
fontFamily: FONT.FAMILY.BOLD,
color: COLORS.BATTLESHIPGREY
},
TASK_RATE_SUD_UNSELECTED_TEXT: {
fontSize: 18,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.PALEGREY
},
TASK_RATE_SUD_INDICATORS_TEXT: {
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.COOLGREY
},
});
export const GRAPH_CONTAINERS = StyleSheet.create({
stackContainer: {
width: SIZES.graphWidth,
paddingBottom: 20,
},
rowsContainer: {
paddingBottom: SIZES.graphFooterHeight,
},
columnDescriptionContainer: {
position: 'absolute',
width: '100%',
bottom: 0,
zIndex: 1,
flex: 1,
backgroundColor: COLORS.WHITE,
borderColor: COLORS.SLATE,
borderRadius: 3,
marginTop: 10,
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
shadowColor: COLORS.SLATE,
shadowOffset: {
width: 0,
height: 4,
},
shadowRadius: 10,
shadowOpacity: 0.24,
},
columnsContainer: {
position: 'absolute',
right: 0,
width: SIZES.graphWidth - SIZES.graphTitlesColumnWidth,
paddingRight: 10,
flexDirection: 'row',
},
columnTitleView: {
height: SIZES.graphFooterHeight,
justifyContent: 'center',
},
columnElementView: {
borderRadius: 25
},
indexContainer: {
marginLeft: 5,
padding: 5,
alignItems: 'center'
},
indexDotView: {
borderRadius: 50,
marginRight: 10,
height: 8,
width: 8
}
});
export const styles_v2 = StyleSheet.create({
FITBIT_AUTH_BTN: {
backgroundColor: COLORS.WHITETWO,
paddingVertical: 18,
paddingHorizontal: 22,
flexDirection: 'row',
},
FITBIT_AUTH_BTN_TEXT: {
color: COLORS.SLATE,
marginTop: 3,
marginLeft: 10,
},
CHAT_IMAGE : {
flexDirection: 'column',
alignItems: 'stretch',
height: 297,
width: 400,
marginTop:40
},
IMAGE_RESIZE: {
width: null,
height: null,
flex:1,
},
myPlans_paginationDotsContainer: StyleSheet.flatten([FEED.TITLE_CONTAINERS, {
flexDirection: 'row',
marginBottom: 0,
marginTop: 0,
alignItems: 'center',
marginLeft: 20,
marginRight: 20,
justifyContent: 'center'
}]),
paginationDots: StyleSheet.flatten([formStyle.radioStyles.radioBase, formStyle.radioStyles.radioSelected, {
borderColor: COLORS.SLATE,
backgroundColor: COLORS.SLATE,
height: 5,
width: 5,
marginRight: 3
}]),
myPlans_moduleStyle: {
height: DEVICE.HEIGHT * 0.30,
width: DEVICE.WIDTH * 0.70,
marginVertical: 14,
marginLeft: 14,
marginRight: 8,
borderRadius: 10,
elevation: 10,
shadowColor: COLORS.BLACKOPAQUE,
shadowOffset: {
width: 1,
height: 1
},
shadowRadius: 5,
shadowOpacity: 0.6,
},
myPlans_domainStyle: {
height: 5,
//width: '100%',
backgroundColor: COLORS.WHITE,
//marginBottom: 10,
// marginHorizontal:5,
flexDirection: 'row',
alignItems: 'center',
marginTop: 5,
borderRadius: 5,
},
myPlans_domainStyleContainerProgress: {
flex: 1,
justifyContent: 'space-around',
marginTop: 10,
borderRadius: 4,
backgroundColor: '#ffffff',
shadowColor: 'rgba(0, 0, 0, 0.08)',
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 8,
shadowOpacity: 1
},
myPlans_domainNameProgressEmpty: {
position:'absolute',
backgroundColor:COLORS.WHITETWO,
height: 4,
// elevation: 3,
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.08)',
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 8,
shadowOpacity: 1 },
myPlans_domainNameProgressProgressDoneTasks: {
backgroundColor: COLORS.BLACK,
height: 4,
borderRadius: 4,
elevation: 3,
opacity:1,
shadowColor: COLORS.BLACKOPAQUE,
shadowOffset: {
width: 1,
height: 1
},
shadowRadius: 5,
shadowOpacity:0.6,
},
myPlans_tradingDomainContainer: {
flex:1,
justifyContent:'space-between',
marginTop:20
},
RADIO_NOT_TOUCHED: {
borderWidth: 2,
alignItems: 'center',
justifyContent: 'center',
height: SIZES.radioSmall,
width: SIZES.radioSmall,
borderRadius: 3,
borderColor: COLORS.PALEGREY,
backgroundColor: COLORS.PALEGREY,
marginRight: 6,
},
RADIO_IN_PROGRESS: {
borderWidth: 2,
alignItems: 'center',
justifyContent: 'center',
height: SIZES.radioSmall,
width: SIZES.radioSmall,
borderRadius: 3,
borderColor: COLORS.SLATE,
backgroundColor: COLORS.SLATE,
marginRight: 6,
},
RADIO_DONE: {
borderWidth: 2,
alignItems: 'center',
justifyContent: 'center',
height: SIZES.radioSmall,
width: SIZES.radioSmall,
borderRadius: 3,
borderColor: COLORS.PALEGREY,
backgroundColor: COLORS.PALEGREY,
marginRight: 6,
},
SMS_PARENT_CONTAINER: {
flex: 4,
flexDirection: 'row'
},
SMS_PHONE_PARENT : {
flex: 4,
},
SMS_COUNTRY_DROP_PARENT: {
flex: 2
},
SMS_COUNTRY_DROP_CONTAINER: {
borderBottomWidth:1,
paddingVertical:8,
flexDirection: 'row',
justifyContent: 'space-between',
marginRight:20,
borderBottomColor:COLORS.SEAFOAMBLUE,
height: 40
},
SMS_ICON: {
color: COLORS.GRAY_DARK,
backgroundColor: 'transparent'
},
SMS_DISCLAIMER: {
marginBottom:20,
},
userModule_bodyContainer: {
flex:1,
alignSelf:'stretch',
marginTop:15
},
userModule_bodyTextContainer: {
flex:4,
zIndex:1,
},
userModule_bodyText: {
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.BOLD,
fontSize:28,
},
userModule_bottomContainer: {
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center'
},
userModule_bottomIconContainer: {
flex:1,
flexDirection:'row',
alignItems:'center',
},
userModule_bottomIconSize: {
width:25,
height:25
},
userModule_bottomTimeStyle: {
//fontFamily:FONT.FAMILY.BOLD,
fontSize:14,
},
userModule_Container: {
margin:12,
flex:1
},
userModule_numberContainer: {
flex:1,
alignItems:'flex-end'
},
userModule_numberStyle: {
flex:1,
fontFamily: FONT.FAMILY.BOLD,
fontSize:140,
alignSelf:'flex-end',
position:'absolute',
bottom:-20
},
userModule_title: {
color: COLORS.WHITE,
fontFamily: FONT.FAMILY.BOLD,
fontSize:14
},
userModule_trophyIconSize: {
marginLeft:4,
width:15,
height:15
},
});
export const ASSESSMENT = StyleSheet.create({
ASSESSMENT_DEVICE_CONNECTION_LOGO: {
width: 68.4,
height: 18,
alignSelf: 'center',
marginVertical: 32,
},
ASSESSMENT_DEVICE_CONNECTION_ICONS: {
width: '100%',
flexDirection: 'row',
paddingHorizontal: 5,
marginTop: 26,
alignItems: 'center',
},
ASSESSMENT_DEVICE_CONNECTION_BG: {
flex: 3,
justifyContent: 'flex-end',
alignItems: 'center',
},
ASSESSMENT_DEVICE_CONNECTION_BG_IMAGE: {
width: 280,
height: 108.6,
},
ASSESSMENT_DEVICE_CONNECTION_ICONS_ITEM: {
flexDirection: 'column',
flex: 1,
alignItems: 'center',
},
ASSESSMENT_DEVICE_CONNECTION_POPUP: {
width: 250,
height: 446.5,
maxWidth: '90%',
maxHeight: '90%',
backgroundColor: '#ffffff',
borderRadius: 10,
shadowColor: COLORS.BLACK,
shadowOffset: { width: 0, height: 3 },
shadowRadius: 15,
shadowOpacity: 0.3,
},
ASSESSMENT_DEVICE_CONNECTION_POPUP_WRAPPER: {
flex:1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
alignItems: 'center',
justifyContent: 'center',
},
ASSESSMENT_SECTION_CONTAINER: {
backgroundColor: COLORS.BACKGROUND_STRIP_GRAY,
flexDirection: 'row',
flex:1,
alignItems:'stretch',
justifyContent:'space-around',
borderTopLeftRadius: 10,
borderTopRightRadius: 10
},
ASSESSMENT_SECTION_TEXT_CONTAINER_ACTIVE:{
borderBottomWidth: 3,
borderBottomColor: COLORS.MORNING,
alignSelf:'stretch'
},
ASSESSMENT_SECTION_TEXT_CONTAINER:{
justifyContent: 'center',
alignSelf:'stretch'
},
ASSESSMENT_SECTION_TEXT:{
marginTop:15,
marginBottom:15,
color: COLORS.WHITE,
lineHeight: 20,
fontSize: 14,
fontFamily: FONT.FAMILY.BOLD
},
ASSESSMENT_IMAGE_GATE:{
width: DEVICE.WIDTH /2.5 ,
height: DEVICE.WIDTH /2.5,
alignSelf:'center'
},
ASSESSMENT_GATE_TITLE_TEXT: {
color: COLORS.WHITE,
alignSelf: 'center',
fontFamily: FONT.FAMILY.BOLD,
textAlign:'center',
fontSize: 30,
},
ASSESSMENT_GATE_SUBTITLE_TEXT: {
color:COLORS.WHITE,
fontFamily: FONT.FAMILY.REGULAR,
fontSize:15,
alignSelf: 'center',
textAlign: 'center',
marginTop: 8,
lineHeight: 22
},
ASSESSMENT_GATE_CONTAINER_SUBTITLE:{
flexDirection: 'column',
flex: 1
},
ASSESSMENT_GRANDPARENT: {
flex: 1,
justifyContent:'space-between',
paddingTop: (Platform.OS == 'ios') ? DEVICE.STATUSBAR : 0,
backgroundColor: COLORS.STRIP_ACTION_DARK_BLUE,
},
ASSESSMENT_PARENT_QUESTION:{
flex:1,
//justifyContent: 'space-around',
alignItems: 'center',
marginTop: 20,
width: DEVICE.WIDTH * 0.75
},
ASSESSMENT_CONTAINER: {
flex: 1,
paddingTop: DEVICE.STATUSBAR,
backgroundColor: COLORS.WHITETWO
},
ASSESSMENT_PARENT_CONTAINER: {
flex:1,
backgroundColor: COLORS.WHITE
},
SLIDE_CONTAINER: {
borderRadius:10,
left:0,
right:0,
position:'absolute',
},
WELCOME_SLIDE: {
borderRadius:10,
backgroundColor:COLORS.SEAFOAMBLUE,
flex:1
},
SLEEP_REPORT_SCROLL_CONTAINER: {
flexGrow: 1,
justifyContent: 'space-between'
},
SLEEP_REPORT_HEADER_CONTAINER: {
justifyContent:'space-around',
margin:20,
},
SLEEP_REPORT_CONCLUSION_CONTAINER:{
backgroundColor:COLORS.WHITE,
flexDirection:'row',
justifyContent: 'space-between',
padding: 20,
paddingBottom: 0
},
SLEEP_REPORT_CONCLUSION_TEXT_CONTAINER:{
alignItems:'center',
},
SLEEP_REPORT_CONCLUSION_TEXT:{
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE,
textAlign:'center'
},
SLEEP_REPORT_CONCLUSION_NUMBERS: {
color: COLORS.SLATE,
alignSelf: 'center',
fontFamily: FONT.FAMILY.NORMAL,
textAlign:'center',
fontSize: 25,
},
SLEEP_REPORT_CONCLUSION_NUMBERS_SIGN:{
fontSize: 14,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE,
textAlign:'center'
},
SLEEP_REPORT_CONCLUSION_TEXT_BODY_CONTAINER:{
backgroundColor:COLORS.WHITE
},
SLEEP_REPORT_CONCLUSION_TEXT_BODY:{
fontSize: 20,
fontFamily: FONT.FAMILY.NORMAL,
color: COLORS.SLATE,
textAlign:'left',
margin:20
},
GET_PLAN_BTN_CONTAINER:{
flex: 1,
backgroundColor: COLORS.WHITE,
justifyContent: 'flex-end',
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
},
START_FINISH_IMG_CONTAINER:{
flex: 2,
flexDirection: 'column',
justifyContent: 'center'
},
QUESTION:{
flex: 7,
marginLeft: 20,
marginRight: 20
}
});
export const login = StyleSheet.create({
headerContainer:{
flex: 1,
backgroundColor: COLORS.SEAFOAMBLUE,
alignItems: 'center',
justifyContent: 'space-evenly',
borderTopLeftRadius:10,
borderTopRightRadius:10,
},
btnContainer:{
backgroundColor: COLORS.WHITE,
flex:1,
borderBottomLeftRadius:10,
borderBottomRightRadius:10,
justifyContent:'space-around'
},
imageSize:{
width: DEVICE.HEIGHT * 0.25,
height: DEVICE.HEIGHT * 0.25
}
});
export const FORMS = StyleSheet.create({
PICKER_SEPERATOR: {
flex:1,
height: 2,
backgroundColor: COLORS.BATTLESHIPGREY,
marginVertical:15
},
PICKER_SEPERATOR_SELECTED: {
flex:1,
height: 2,
backgroundColor: COLORS.SEAFOAMBLUE,
marginVertical:15
},
PICKER_TEXT_CLEAN: {
fontSize: 20,
color:COLORS.COOLGREY
},
PICKER_TEXT_SELECTED: {
fontSize: 20,
color:COLORS.SLATE
},
TEXT_INPUT_ERROR_CONTAINER: {
marginTop:10
},
TEXT_INPUT_CLEAN: {
height: (Platform.OS == 'ios') ? 40 : 44,
color:COLORS.SLATE,
fontSize: 20,
fontFamily: FONT.FAMILY.REGULAR,
},
TEXT_INPUT_ACTIVE :{
height: (Platform.OS == 'ios') ? 40 : 44,
color:COLORS.BATTLESHIPGREY,
fontSize:20,
lineHeight:30,
fontFamily: FONT.FAMILY.REGULAR,
},
TEXT_INPUT_ERROR :{
height: (Platform.OS == 'ios') ? 40 : 44,
color: COLORS.ERROR,
fontSize:20,
fontFamily: FONT.FAMILY.REGULAR,
},
TEXT_INPUT_ANDROID_DATE_PICK :{
height: (Platform.OS == 'ios') ? 40 : 44,
borderBottomWidth:1,
borderBottomColor: COLORS.BORDER_2
},
CONTAINER_BTN: {
backgroundColor: COLORS.WHITE,
flexDirection: 'row',
paddingTop: 10,
},
BTN: {
flex: 1,
paddingHorizontal: 15
},
CANCEL: {
alignItems: 'flex-start'
},
DONE: {
alignItems: 'flex-end'
},
});
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import * as tabsActions from '../homeTabs/tabs.actions';
import * as tasksActions from '../tasks/task.actions';
import {connect} from 'react-redux';
import {
Animated,
View,
Image,
ScrollView,
Text,
FlatList,
TouchableOpacity,
TouchableWithoutFeedback,
AsyncStorage
}
from 'react-native';
import Header from '../../components/generic/Header';
import I18n from '../../i18n/i18n';
import {COLORS, CONTAINERS, DEVICE, TEXT} from '../../styles/app_v2';
import {DOMAINS} from '../../styles/domains';
import UserModule from '../../components/userModules/UserModule';
import Ionicons from 'react-native-vector-icons/Ionicons';
import DayzzIcon from '../../res/dayzz_icons/DayzzIcon';
import OverlayModal from '../../components/generic/OverlayModal';
import {DOMAIN_MODAL_EXPLORE_YOUR_PLAN} from '../../services/asyncStorage';
const CARD_ANIMATION_DURATION = 250;
const overlays = {
EXPLORE_YOUR_PLAN:'EXPLORE_YOUR_PLAN',
HEADS_UP: 'HEADS_UP',
FULLY_BOOKED: 'FULLY_BOOKED',
SO_SOON: 'SO_SOON',
WAIT_UP: 'WAIT_UP',
MASTERED_LOCKED: 'MASTERED_LOCKED',
};
const PADDING_HORIZONTAL = 25;
/// mastered
/// finish updating builders
// show non locked first in pending
/// check order of adding/removing modules
/// CHECK ELEVATION OR SHADOW FOR IDOS TO : UPCOMING, MASTERED, MAIN SCREEN
// check ui spaces between and shadows
// animation
const icons = {lock: 'lock_12_12', x: 'x_12_12', replay: 'Replay', plus:'plus' };
const UpperRightIcon = ({icon, color, backgroundColor}) => (
<View style={{position: 'absolute', padding:4, top: 12, right: 12, borderRadius: 10, backgroundColor: backgroundColor }}>
<DayzzIcon style={{justifyContent:'center', textAlign:'center',
fontSize: 12, fontWeight: 'bold', color: color || COLORS.SLATE}} size={10} color={color} name={icons[icon]} />
</View>);
const GeneralCard = ({imageSource, name, description, underIconText, children, iconCounter, iconCounterColor}) => (
<View
style={[{
padding:16, overflow:'visible',
borderRadius: 10,
flexDirection: 'row',
backgroundColor:COLORS.WHITE}]}>
<View style={{alignItems: 'center', marginRight: 16}}>
<View>
<Image
style={{width:48, height:48}}
source={imageSource}/>
{iconCounter &&
<View style={{backgroundColor: iconCounterColor, position: 'absolute', bottom:0, right: 0,
justifyContent:'center', alignItems:'center', width: 12, height: 12, borderRadius: 8}}>
<Text style={{color:COLORS.WHITETWO, fontSize:8, fontWeight:'bold'}}>{iconCounter}</Text>
</View>}
</View>
{ underIconText &&
<Text style={{marginTop: 8, fontSize: 10,
fontWeight: 'bold', color:COLORS.COOLGREY}}>{underIconText}</Text>}
</View>
<View style={{flex:1}}>
<View style={{ marginBottom: 4, marginRight:10, flexDirection:'row'}}>
<Text style={{flex:1, fontSize: 12,
fontWeight: 'bold', color: COLORS.SLATE}}>{name}</Text>
</View>
<Text style={{
color:COLORS.BATTLESHIPGREY,
fontSize: 12,
}}>{description}</Text>
</View>
{children}
</View>);
class DoubleSidedCard extends Component {
constructor(props) {
super(props);
this.state = {
backSideVisible : false,
};
}
_onLayout (event) {
if (!event) return;
if (!event.nativeEvent) return;
let { height } = event.nativeEvent.layout;
console.log('onLayout', height);
this.setState({ animationOffset: height });
this.animatedPosition = new Animated.Value(height);
this.animatedPosition.addListener(e => {
if (e.value === this.state.animationOffset) {
this.setState({backSideVisible: false});
}
});
}
componentDidUpdate(prevProps) {
console.log('componentDidUpdate');
const { showOtherSide } = this.props;
if (showOtherSide !== prevProps.showOtherSide ) {
if (showOtherSide) {
this.setState({backSideVisible: true}, () => {
Animated.timing(this.animatedPosition, {
// useNativeDriver:true,
toValue: 0,
duration: CARD_ANIMATION_DURATION
}).start();
});
} else {
Animated.timing(this.animatedPosition, {
// useNativeDriver:true,
toValue: this.state.animationOffset,
duration: CARD_ANIMATION_DURATION
}).start();
}
}
}
render() {
const {front, back, style, onPress} = this.props;
return (
<TouchableWithoutFeedback onPress={onPress} >
<View style={style} onLayout={(e) =>this._onLayout(e)}>
<View style={{overflow:'hidden', borderRadius:10}}>
{front()}
{ this.state.backSideVisible &&
<Animated.View style={{
position: 'absolute',
top: 0, bottom: 0, left: 0, right: 0,
transform: [{translateY: this.animatedPosition}],
}}>{back()}</Animated.View> }
</View>
</View>
</TouchableWithoutFeedback>);
}
}
const OngoingModuleCard = ({ module, onStartNow, onPostpone, user, onPress, isSelected }) =>
(<DoubleSidedCard
style={[CONTAINERS.SHADOWED_ONGOING_VIEW,{margin:PADDING_HORIZONTAL, borderWidth:1,}]}
showOtherSide={isSelected}
onPress={onPress}
front={() =><UserModule
style={[{height: DEVICE.HEIGHT * 0.30,width: DEVICE.WIDTH * 0.70}]}
user={user}
module={module}
onModuleSelect={onPress} />}
back={() =>
<View style={{
flex:1,
padding: 16,
borderRadius:10,
backgroundColor: COLORS.WHITE
}}>
<Text style={{
marginBottom: 4,
fontSize: 12,
color: COLORS.SLATE,
}}>{module.name.toUpperCase()}</Text>
<Text style={{
flex: -1,
fontSize: 12,
color: COLORS.BATTLESHIPGREY
}}>{module.description}</Text>
<View style={{flex:1, justifyContent: 'flex-end'}}>
<TouchableOpacity
onPress={onStartNow}
style={{backgroundColor: DOMAINS[module.domain].color, borderRadius: 16}}>
<Text style={{
marginVertical: 10,
marginHorizontal: 16,
textAlign: 'center',
fontSize: 12, fontWeight: 'bold',
color: COLORS.WHITETWO
}}
>{I18n.t('domains.ongoingTrainNow')}</Text>
</TouchableOpacity>
<TouchableOpacity style={{alignSelf:'center'}} onPress={onPostpone}>
<Text
style={{margin: 10,color:COLORS.BATTLESHIPGREY, fontSize:12, }}
>{I18n.t('domains.ongoingPostpone')}</Text>
</TouchableOpacity>
</View>
</View>}
/>);
const GeneralOtherSideCard = ({module, onStartPressed, onAddToPlan}) => (<View style={{flex: 1, padding: 16,borderRadius:10, backgroundColor: DOMAINS[module.domain].color}}>
<Text style={{
marginBottom: 4,
fontSize: 12,
borderRadius: 10,
fontWeight: 'bold',
color: DOMAINS[module.domain].darkColor,
}}>{module.name.toUpperCase()}</Text>
<View style={{flex: 1, flexDirection: 'row', alignItems:'flex-end'}}>
{/* <Text style={{
flex: -1,
fontSize: 12,
color: COLORS.WHITETWO
}}>{I18n.t('domains.startnow')}</Text> */}
<TouchableOpacity
onPress={onStartPressed}
style={{
flex: 0,
justifyContent: 'center',
backgroundColor: COLORS.WHITETWO,
borderRadius: 16
}}>
<Text style={{
marginVertical: 8,
marginHorizontal: 16,
textAlign: 'center',
fontSize: 12, fontWeight: 'bold',
color: DOMAINS[module.domain].color
}}
>{I18n.t('domains.startbutton')}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={onAddToPlan}>
<Text style={{color: COLORS.WHITETWO, fontWeight: 'bold',fontSize: 12, marginVertical:8, marginHorizontal:16}}>{I18n.t('domains.addtoplan')}</Text>
</TouchableOpacity>
</View>
<UpperRightIcon icon={'x'} backgroundColor={null} color={COLORS.WHITETWO } />
</View>);
const PendingModuleCard = ({onStartPressed, module, isSelected, onPress, onAddToPlan, locked, disabled}) =>
<DoubleSidedCard onPress={onPress} showOtherSide={isSelected}
style={[{marginBottom:15, borderRadius:10}, CONTAINERS.SHADOWED_CARD_VIEW]}
front={() =>
<GeneralCard name={module.name.toUpperCase()} description={module.description}
underIconText={`${module.tasks.length} Tasks`}
imageSource={{uri:module.imageUrl}} >
<UpperRightIcon icon={ locked ? 'lock' : 'plus'} backgroundColor={ disabled ?COLORS.PALEGREY : DOMAINS[module.domain].color} color={disabled? COLORS.SLATE : COLORS.WHITETWO } />
</GeneralCard>}
back={() =>
<GeneralOtherSideCard
module={module}
onStartPressed={onStartPressed}
onAddToPlan={onAddToPlan} />} />;
const MasteredModuleCard = ({module, isSelected, onPress, disabled, onStartPressed, onAddToPlan}) =>
(<DoubleSidedCard onPress={onPress} showOtherSide={isSelected}
style={[{marginBottom:15, borderRadius:10}, CONTAINERS.SHADOWED_CARD_VIEW]}
front={() => <GeneralCard
showOtherSide={isSelected}
name={module.name.toUpperCase()}
description={module.description}
imageSource={DOMAINS[module.domain].mastered}
iconCounterColor ={DOMAINS[module.domain].color}
iconCounter={module.masteredCounter}>
<UpperRightIcon icon={module.status == 'MASTERED_LOCKED' ? 'lock' :'replay'}
backgroundColor={ disabled ? COLORS.PALEGREY : DOMAINS[module.domain].color}
color={disabled? COLORS.SLATE : COLORS.WHITETWO} />
</GeneralCard>}
back={() => <GeneralOtherSideCard
module={module} onStartPressed={onStartPressed}
onAddToPlan={onAddToPlan} />}
/>);
class Domain extends Component {
constructor(props) {
super(props);
this.state = {
showMore : false,
selectedModule:null,
currentOverlay: null,
displayedModules: [],
undisplayedModules: [],
refreshingList: false,
};
}
static getDerivedStateFromProps(props, state) {
let newState = {};
if (props.displayedModules) {
const newDisplayedModules = props.displayedModules.filter(userModule =>
userModule.module.domain === props.selectedDomain).map(item => item.module);
if (state.displayedModules.length !== newDisplayedModules.length) {
newState.displayedModules = newDisplayedModules;
}
}
if (props.undisplayedModules) {
const newUndisplayedModules = props.undisplayedModules.filter(module => module.domain === props.selectedDomain);
if (state.undisplayedModules.length !== newUndisplayedModules)
// make non pending first
newState.undisplayedModules = [...newUndisplayedModules.filter(module => !module.pendingMasteredModule),
...newUndisplayedModules.filter(module => module.pendingMasteredModule)];
}
if (Object.keys(newState).length > 0)
return newState;
else
return null;
}
findModule(moduleCodeName) {
return [...this.props.undisplayedModules, ...this.state.displayedModules].find(m => m.codeName === moduleCodeName);
}
attemptStartPendingModule (module, navigateAfter) {
if (this.props.maxOngoing === this.state.displayedModules.length + 1) {
this.setState({currentOverlay: overlays.HEADS_UP, overlayPayload: {module, navigateAfter}});
} else {
this.startPendingModule(module, navigateAfter);
}
}
startPendingModule (module, navigateAfter) {
this.props.tabsActions.moduleAction({
action:'start',
moduleId: module._id},
navigateAfter ? this.props.navigator : null,
module);
}
attemptPostponeModule(moduleId) {
this.setState({currentOverlay: overlays.SO_SOON, moduleId});
}
postponeModule(moduleId) {
this.props.tabsActions.moduleAction({
action:'postpone',
moduleId});
}
requestDomainModules() {
this.props.tabsActions.getModules();
}
navigateToModule (module) {
this.props.navigator.handleDeepLink({link:'myPlans.onModuleSelect', payload: {module}});
}
selectOrUnselectModule(module) {
this.setState({selectedModule: this.state.selectedModule === module._id ? null : module._id});
}
onModuleCardPressed(module) {
this.selectOrUnselectModule(module);
}
async componentDidMount() {
const { displayedModules, undisplayedModules} = this.props;
if (displayedModules === null || undisplayedModules === null) {
this.requestDomainModules();
}
//await AsyncStorage.setItem(DOMAIN_MODAL_EXPLORE_YOUR_PLAN, '0');
let exploreTimes = +(await AsyncStorage.getItem(DOMAIN_MODAL_EXPLORE_YOUR_PLAN));
if (exploreTimes < 1) {
this.setState({currentOverlay: overlays.EXPLORE_YOUR_PLAN});
}
}
render() {
const { displayedModules, undisplayedModules, selectedModule, currentOverlay } = this.state;
const { maxVisiblePendingModules, selectedDomain, navigator, maxOngoing, user } = this.props;
if (displayedModules == null || undisplayedModules == null) {
return (<View></View>);
}
let addingDisabled = displayedModules.length == maxOngoing;
let upcoming = undisplayedModules.filter(m => ['MASTERED_UNMASTERED',
'PENDING', 'IGNORED'].includes(m.status) && m.domain === selectedDomain);
let masteredModules = undisplayedModules.filter(m => ['MASTERED_LOCKED', 'MASTERED'].includes(m.status) && (m.domain === selectedDomain));
let visiblePendingModules = upcoming.length > maxVisiblePendingModules && !this.state.showMore ?upcoming.slice(0, maxVisiblePendingModules) : upcoming;
return (
<View style={{flex:1}}>
{currentOverlay == overlays.EXPLORE_YOUR_PLAN && <OverlayModal
visible={true}
imageSize={{width:121, height:111}}
mainButtonBckColor={DOMAINS[selectedDomain].color}
onButtonClicked={async () => {
await AsyncStorage.setItem(DOMAIN_MODAL_EXPLORE_YOUR_PLAN, '1');
this.setState({currentOverlay: null});
}
}
{...I18n.t('domains.overlays.exploreYourPlan')}
subtitle={I18n.t('domains.overlays.exploreYourPlan.subtitle', {maxOngoing})} // just because it doesn't work on objects
/>}
{currentOverlay == overlays.HEADS_UP && <OverlayModal
visible={true}
mainButtonBckColor={DOMAINS[selectedDomain].color}
imageSize={{width:121, height:111}}
onButtonClicked={() => {
const { navigateAfter, module } = this.state.overlayPayload;
this.startPendingModule(module, navigateAfter );
this.setState({currentOverlay:null});
}}
onSecondaryButtonClicked={() => this.setState({currentOverlay: null})}
{...I18n.t('domains.overlays.headsUp')}
/>}
{currentOverlay == overlays.FULLY_BOOKED && <OverlayModal
visible={true}
mainButtonBckColor={DOMAINS[selectedDomain].color}
onButtonClicked={() => this.setState({currentOverlay:null})}
imageSize={{width:121, height:111}}
{...I18n.t('domains.overlays.fullyBooked')}
/>}
{currentOverlay == overlays.SO_SOON && <OverlayModal
visible={true}
mainButtonBckColor={DOMAINS[selectedDomain].color}
imageSize={{width:121, height:111}}
onButtonClicked={() => {
this.postponeModule(this.state.moduleId);
this.setState({currentOverlay:null});
}}
onSecondaryButtonClicked={() => {this.setState({currentOverlay:null});}}
{...I18n.t('domains.overlays.soSoon')}
/>}
{currentOverlay == overlays.WAIT_UP && <OverlayModal
visible={true}
imageSize={{width:121, height:111}}
mainButtonBckColor={DOMAINS[selectedDomain].color}
{...I18n.t('domains.overlays.waitUp')}
subtitle={I18n.t('domains.overlays.waitUp.subtitle', this.state)}
onButtonClicked={() => {
this.setState({currentOverlay:null, pendingMasteredModule: null});
}}
/>}
{currentOverlay == overlays.MASTERED_LOCKED && <OverlayModal
visible={true}
imageSize={{width:121, height:111}}
mainButtonBckColor={DOMAINS[selectedDomain].color}
{...I18n.t('domains.overlays.masteredLocked')}
onButtonClicked={() => {
this.setState({currentOverlay:null});
}}
/>}
<Header
navigator={navigator}
title={I18n.t(`domains.${selectedDomain}.title`).toUpperCase()}
leftIcon={{ color: COLORS.SLATE, name: 'arrow-back', action: () => navigator.pop() }} />
<ScrollView contentContainerStyle={{}} style={{flex:1}}>
<View style={{paddingHorizontal: PADDING_HORIZONTAL}}>
<Image style={{alignSelf:'center', marginTop:28, marginBottom: 15}} source={DOMAINS[selectedDomain].screenIcon} />
<Text style={{ color: COLORS.SLATE, textAlign: 'center', fontFamily:'Lato', fontWeight: 'bold', lineHeight: 20,}}>
{I18n.t(`domains.${selectedDomain}.description`)}
</Text>
<View style={{marginVertical:16, backgroundColor: DOMAINS[selectedDomain].color, height:2, alignSelf: 'stretch'}} />
</View>
{!displayedModules || displayedModules.length > 0 && <View style={{marginBottom:32}}>
<Text style={[TEXT.DOMAIN_TITLE, {paddingHorizontal: PADDING_HORIZONTAL}]}>{I18n.t('domains.ongoing').toUpperCase()}</Text>
<FlatList
keyExtractor={(item, index) => 'key_' + index}
data={displayedModules}
//CellRendererComponent={({ style, ...props}) => <View style={[style, {elevation:3, margin:10}]} {...props} />}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={item =>
// <View style={{
// backgroundColor: 'salmon', elevation: 3, height: 75, width: 100, margin: 10,
// }}/>
// <View style={[
// //CONTAINERS.SHADOWED_ONGOING_VIEW,
// {backgroundColor:'green', borderColor:'black', borderWidth:1,width:180, height:100, marginLeft:PADDING_HORIZONTAL}]}/>
<OngoingModuleCard
isSelected={selectedModule === item.item._id}
onPress={e => this.onModuleCardPressed(item.item)}
onStartNow={() => this.navigateToModule(item.item)}
onPostpone={() => this.attemptPostponeModule(item.item._id)}
module={item.item}
user={user}/>
} />
</View> }
<View style={{paddingHorizontal: PADDING_HORIZONTAL, marginBottom:24}}>
{upcoming.length > 0 && <View style={{marginBottom:16}}>
<Text style={TEXT.DOMAIN_TITLE}>{I18n.t('domains.upcoming').toUpperCase()}</Text>
{ visiblePendingModules.map( module =>
(<PendingModuleCard
key={module._id}
isSelected={module._id === selectedModule}
onStartPressed={() => this.attemptStartPendingModule(module, true)}
onAddToPlan={()=> {
this.attemptStartPendingModule(module, false);
}}
locked={!!module.pendingMasteredModule}
disabled={module.pendingMasteredModule || addingDisabled}
module={module}
onPress={() => {
if (module.pendingMasteredModule) {
const pendingModule = this.findModule(module.pendingMasteredModule);
this.setState({ currentOverlay: overlays.WAIT_UP, pendingMasteredModule : pendingModule.name});
} else if (addingDisabled) {
this.setState({ currentOverlay: overlays.FULLY_BOOKED});
} else {
this.onModuleCardPressed(module);
}
}} />)) }
{upcoming.length > maxVisiblePendingModules && <TouchableOpacity
style={{marginBottom: 12, flexDirection: 'row', justifyContent: 'center'}}
onPress={(item) => {
this.setState({showMore: !this.state.showMore});
}}>
<Text style={{color: COLORS.BATTLESHIPGREY, fontSize: 10}}>
{this.state.showMore ? I18n.t('domains.showless') : I18n.t('domains.showmore')}</Text>
<Ionicons style={{paddingHorizontal: 8}} size={12} color={COLORS.BATTLESHIPGREY}
name={this.state.showMore ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'}/>
</TouchableOpacity> }
</View>}
<Text style={TEXT.DOMAIN_TITLE}>{I18n.t('domains.mastered').toUpperCase()}</Text>
{ masteredModules.length == 0 ? <View style={[{overflow:'visible'},CONTAINERS.SHADOWED_CARD_VIEW]}><GeneralCard
name={I18n.t('domains.noneMastered.title')}
description={I18n.t('domains.noneMastered.description')}
imageSource={DOMAINS.disabledMastered} /></View> : masteredModules.map(module =>
<MasteredModuleCard
key={module._id}
onAddToPlan={() => this.attemptStartPendingModule(module, false)}
onStartPressed={() => this.attemptStartPendingModule(module, true)}
onPress={() => {
if (module.status === 'MASTERED_LOCKED') {
this.setState({ currentOverlay: overlays.MASTERED_LOCKED});
} else {
this.onModuleCardPressed(module);
}
}}
isSelected={module._id === selectedModule}
module={module} />)}
</View>
</ScrollView>
</View>);
}
}
function mapStateToProps(state, ownProps) {
return {
user: state.auth.user,
displayedModules: state.tabs.displayedModules,
undisplayedModules: state.tabs.undisplayedModules,
maxOngoing: state.auth.configuration.maxOngoing,
maxVisiblePendingModules: state.auth.configuration.maxVisiblePendingModules,
selectedDomain: state.tabs.selectedDomain
};
}
function mapDispatchToProps(dispatch) {
return {
tabsActions: bindActionCreators(tabsActions, dispatch),
tasksActions: bindActionCreators(tasksActions, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Domain);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment