react-native-cross-components
Version:
Beautiful React-Native components using RN Paper by Callstack
362 lines • 9.13 kB
JavaScript
import { Dimensions, Platform, StyleSheet } from 'react-native';
import { DefaultTheme } from 'react-native-paper';
const { width, height } = Dimensions.get('window');
const screenWidth = width < height ? width : height;
export var Colors;
(function (Colors) {
Colors["CrossLightBlue"] = "#057dc2";
Colors["CrossDarkBlue"] = "#00539b";
Colors["CrossYellow"] = "#fede00";
Colors["CrossBlack"] = "#2f2f2f";
Colors["CrossWhite"] = "white";
Colors["CancelButton"] = "#ff0000";
Colors["NextButton"] = "#349b34";
Colors["BackButton"] = "#3180e0";
})(Colors || (Colors = {}));
/**
* Size if icons in tab bars
* @type int
* @public
*/
export const TabIconSize = Platform.OS === 'android' ? 22 : 22;
const IS_IOS = Platform.OS === 'ios';
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
function wp(percentage) {
const value = (percentage * viewportWidth) / 100;
return Math.round(value);
}
export const slideHeight = viewportHeight * 0.15;
const itemWidth = wp(70);
const itemHorizontalMargin = wp(2);
export const sliderWidth = viewportWidth;
export const slideWidth = itemWidth + itemHorizontalMargin * 2;
const entryBorderRadius = 8;
/**
* Theme appiled to React-Native-Paper
*
* https://callstack.github.io/react-native-paper/theming.html
*/
export const Theme = Object.assign({}, DefaultTheme, { roundness: 4, dark: false, colors: Object.assign({}, DefaultTheme.colors, { primary: Colors.CrossLightBlue, accent: Colors.CrossYellow, background: 'white', placeholder: Colors.CrossDarkBlue, backdrop: 'white', disabled: Colors.CrossDarkBlue, text: Colors.CrossBlack }) });
export const CarouselStyles = StyleSheet.create({
imageContainer: {
flex: 1,
marginBottom: IS_IOS ? 0 : -1,
backgroundColor: 'white',
borderTopLeftRadius: entryBorderRadius,
borderTopRightRadius: entryBorderRadius,
},
image: Object.assign({}, StyleSheet.absoluteFillObject, { resizeMode: 'cover', borderRadius: IS_IOS ? entryBorderRadius : 0, borderTopLeftRadius: entryBorderRadius, borderTopRightRadius: entryBorderRadius }),
// image's border radius is buggy on iOS; let's hack it!
radiusMask: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: entryBorderRadius,
backgroundColor: 'white',
},
});
/**
* Main theme for the app
*/
export const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
surface: {
padding: 8,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
elevation: 4,
},
buttonList: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'flex-start',
},
listButton: {
height: 40,
flex: 1,
},
listItem: {
margin: 0,
padding: 0,
},
button: {
marginRight: 10,
height: 45,
},
paddingDefault: {
paddingTop: 20,
paddingLeft: 10,
paddingRight: 10,
},
label: {
color: 'gray',
fontSize: 14,
},
link: {
color: 'blue',
fontWeight: 'bold',
},
tabIcon: {
// Icons in tab bar won't show without explicit width / height
width: 25,
height: TabIconSize,
color: 'white',
},
absoluteCentered: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
},
absoluteTop: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
alignItems: 'center',
justifyContent: 'flex-start',
},
absoluteTopRight: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
alignItems: 'flex-end',
justifyContent: 'flex-start',
},
absoluteTopLeft: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
absoluteBottom: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'flex-end',
},
absoluteBottomRight: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
alignItems: 'flex-end',
justifyContent: 'flex-end',
},
absoluteBottomLeft: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
alignItems: 'flex-start',
justifyContent: 'flex-end',
},
centerVerticalAndHorizontal: {
alignItems: 'center',
justifyContent: 'center',
},
alignCenterJustifyStart: {
alignItems: 'center',
justifyContent: 'flex-start',
},
alignStartJustifyStart: {
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
alignEndJustifyStart: {
alignItems: 'flex-end',
justifyContent: 'flex-start',
},
tabBar: {
backgroundColor: Colors.CrossLightBlue,
},
tabBarTitle: {
alignSelf: 'center',
},
tabBarLabel: {
fontSize: 9,
},
rowContentTopCenter: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-start',
},
rowContentTopLeft: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
rowContentTopRight: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-start',
},
rowContentCenterLeft: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
rowContentBottomCenter: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
},
columnContentTopCenter: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
},
columnContentTopLeft: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
columnContentTopRight: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-end',
},
columnContentCenterRight: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-end',
},
columnContentCenterLeft: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
},
backgroundWhite: {
backgroundColor: '#ffffff',
},
overlay: {
backgroundColor: 'rgba(254, 222, 0, 0.3)',
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
right: 0,
},
spinner: {
width: 50,
height: 50,
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
opacity: 1,
},
textCenter: {
textAlign: 'center',
},
textSpinner: {
fontSize: 20,
color: Colors.CrossLightBlue,
textAlign: 'center',
fontWeight: 'normal',
marginTop: 5,
opacity: 1,
},
modal: {
margin: 30,
flex: 1,
padding: 0,
marginTop: 200,
},
});
export const autoCompleteStyles = StyleSheet.create({
// container: {
// backgroundColor: '#ffffff',
// },
padding: { padding: 20 },
listView: {
backgroundColor: '#ffffff',
},
textInputContainer: {
borderBottomWidth: 0,
borderTopWidth: 0,
},
textInput: {
color: '#00539b',
fontSize: 16,
},
description: {
fontWeight: 'bold',
},
predefinedPlacesDescription: {
color: '#fede00',
},
});
export const sortableGridImagesStyles = StyleSheet.create({
block: {
flex: 1,
margin: 8.5,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
contentContainer: {
flex: 9,
},
buttonView: {
justifyContent: 'space-between',
flexDirection: 'row',
marginHorizontal: 15,
},
button: {
width: 150,
height: 50,
alignItems: 'center',
justifyContent: 'center',
},
imageButton: {
flexDirection: 'row',
},
button1: {
backgroundColor: '#257FE6',
},
button2: {
backgroundColor: '#37AB33',
},
buttonText: {
color: '#fff',
},
bottom: {
width: screenWidth,
alignSelf: 'center',
flex: 1,
},
cam: {
width: 16,
height: 16,
resizeMode: 'contain',
marginRight: 2,
},
});
export default styles;
//# sourceMappingURL=styles.js.map