galio ![Tweet](https://camo.githubusercontent.com/3a3ead9a4efcfa0caa10c1691ce8df6a418df285cc9135dec88d6cae9773dfa9/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f687474702f736869656c64732e696f2e7376673f7374796c653d736f6369616c266c6f676f3d74776974746572)
Galio is a 100% free and open source project, licensed under MIT License. You'll be building Android and iOS apps in style. Galio will always remain free to use and it is powered by a massive world-wide community. It comes with a lot of carefully crafted, ready to be used components and a beautiful typography. Galio has a gorgeous base theme that adapts to each project. Built with real app examples, component demos, guides, and how-to's to get you up and running with mobile apps faster than ever before.
Table of Contents
Quick Start
1. Project Setup
git clone https://github.com/galio-org/galio.git
cd galio
npm install or yarn install
2. Project testing
Terminal cli:
npm run ios
or yarn run ios
User our iOS or Android app to directly view Expo projects on your phone.
3. SDK library instructions
npm install galio-framework
or
yarn add galio-framework
Import UI components to new screens:
import { Block, Button, Card, Icon, Input, NavBar, Text } from 'galio-framework';
Components
Under Galio's belt:
TBA
Examples
Here we will showcase some screens and some sample code of how we've used Galio in order to create them.
renderCard = (props, index) => {
const gradientColors = index % 2 ? GRADIENT_PINK : GRADIENT_BLUE;
return (
<Block row center card shadow space="between" style={styles.card} key={props.title}>
<Gradient
start={[0.45, 0.45]}
end={[0.90, 0.90]}
colors={gradientColors}
style={[styles.gradient, styles.left]}
>
<Icon
size={BASE_SIZE}
name={props.icon}
color={COLOR_WHITE}
family={props.iconFamily}
/>
</Gradient>
<Block flex>
<Text h5>{props.title}</Text>
<Text muted>{props.subtitle}</Text>
</Block>
<Button style={styles.right}>
<Icon size={BASE_SIZE * 1.5} name="ios-arrow-forward" family="Ionicons" color={COLOR_GREY} />
</Button>
</Block>
);
}
<Block flex space="between" center style={styles.absolute}>
<NavBar transparent leftIconColor={theme.COLORS.WHITE} onLeftPress={() => props.navigation.openDrawer()} />
<Block style={styles.articleSummary}>
<Block row style={{ marginBottom: theme.SIZES.BASE }}>
<Block row middle style={{ marginHorizontal: theme.SIZES.BASE }}>
<Icon name="eye" family="MaterialCommunityIcons" color={theme.COLORS.WHITE} size={theme.SIZES.FONT * 0.8} />
<Text p color={theme.COLORS.WHITE} style={{ marginLeft: theme.SIZES.BASE * 0.25 }}>25.2k</Text>
</Block>
<Block row middle>
<Icon name="heart-outline" family="MaterialCommunityIcons" color={theme.COLORS.WHITE} size={theme.SIZES.FONT * 0.8} />
<Text p color={theme.COLORS.WHITE} style={{ marginLeft: theme.SIZES.BASE * 0.25 }}>936</Text>
</Block>
</Block>
{/*...more code in the open source files...*/}
</Block>
</Block>
<Block>
<Input
rounded
type="email-address"
placeholder="Email"
autoCapitalize="none"
style={{ width: width * 0.9 }}
onChangeText={text => this.handleChange('email', text)}
/>
<Input
rounded
password
viewPass
placeholder="Password"
style={{ width: width * 0.9 }}
onChangeText={text => this.handleChange('password', text)}
/>
<Text
color={theme.COLORS.ERROR}
size={theme.SIZES.FONT * 0.75}
onPress={() => Alert.alert('Not implemented')}
style={{ alignSelf: 'flex-end', lineHeight: theme.SIZES.FONT * 2 }}
>
Forgot your password?
</Text>
</Block>
Documentation
The documentation for Galio is hosted at our our website
Resources
- Website: https://galio.io
- Expo: https://expo.io
- Issues: GitHub Issues Page
Reporting Issues
We use GitHub Issues as the official bug tracker for Galio. Here are some advices for our users that want to report an issue:
- Make sure that you are using the latest version of Galio. Check for your fork's master branch status and see if it's up to date with the upstream/master (our repository)
- Provide us with reproductible steps for the issue.
- Some issues may be platform specific, so specifying what platform and if it's a simulator or a hardware device will help a lot.
Contributors
Licensing
- Licensed under MIT (https://github.com/galio-org/galio/blob/master/LICENSE)
Useful Links
Tutorials: coming soon...
Freebies from Galio Team: coming soon...
© 2018 Galio, made with love for apps.