All the colors, sizes and layout rules are stored in our default theme. This can be found in the theme folder inside our library. Every component inherits its styling rules from that file. Imagine this... You're building an application and you have 30 buttons using the primary color but you feel like that color doesn't really suit your project. You can re-write our theme file with only the things you want to change by using our theme components and all Galio components will change the that certain style.

• GalioTheme: default theme for components exporting an object with { COLORS, SIZES }
• withGalio: HoC for any React-Native component with args: Component and optional styles. By using this, you can access constants we have in our default theme.
• GalioProvider: React Context Provider getting custom theme from props and pass it to the React Context.

• install the latest galio-framework using npm install galio-framework or yarn add galio-framework
• import { theme, withGalio, GalioProvider } from 'galio-framework'
• export default withGalio(YourComponent, componentStyles);
• custom theme constants will overwrite the default galio theme constants

const customTheme = {
  SIZES: { BASE: 18, } 
  // this will overwrite the Galio SIZES BASE value 16
  COLORS: { PRIMARY: 'red', } 
  // this will overwrite the Galio COLORS PRIMARY color #B23AFC
};
 <GalioProvider theme={customTheme}>
  <YourComponent />
</GalioProvider>

Exporting a React class/function using our withGalio function enables your component to consume Galio's React Context and pass down theme in your component as a prop or as an argument for styles. So now you can use our constant colors and sizes in your own components/screens.

const styles = theme => StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.COLORS.FACEBOOK
  }
});
export default withGalio(App, styles);

Use the following reference tables to create your own custom theme

Color name	Default value	Description
SOCIAL
FACEBOOK	#3B5998	For social Facebook button
TWITTER	#5BC0DE	For social Twitter button
DRIBBBLE	#EA4C89	For social Dribble button
GALIO
THEME	#B23AFC	Theme default color
PRIMARY	#B23AFC	Primary color for Buttons
INFO	#1232FF	Info color for Buttons & Text
ERROR	#FE2472	Error color for error messages
WARNING	#FF9C09	Warning color for warning messages
SUCCESS	#45DF31	Success color for success messages
COMPONENTS
INPUT	#808080	Input backgroundColor
PLACEHOLDER	#9FA5AA	Input placeholder text color
NAVBAR	#F9F9F9	NavBar text color
BLOCK	#808080	Block border color
ICON	#000000	Icon default color
STANDARD
WHITE	#FFFFFF	White color
BLACK	#000000	Black color
GREY	#898989	Grey color
MUTED	#9FA5AA	Text muted color
TRANSPARENT	transparent	Transparent value for Block, Button and other components
NEUTRAL	rgba(255,255,255, 0.65)	Text neutral color white with 65% transparency

const { height, width } = Dimensions.get('screen'); By default the size of 16 is used to calculate all the sizes