Galio is a beautifully designed, Free and Open Source React Native Framework
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Nov 2, 2018
assets Added thumbnail images Oct 19, 2018
src Alpha 1 (#42) Oct 24, 2018
.babelrc Alpha 1 (#28) Oct 16, 2018
.eslintrc Alpha 1 (#28) Oct 16, 2018
.gitignore Alpha 1 (#28) Oct 16, 2018
.npmignore Alpha 1 (#28) Oct 16, 2018
.prettierrc Alpha 1 (#28) Oct 16, 2018
.watchmanconfig Alpha 1 (#28) Oct 16, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Oct 26, 2018
CONTRIBUTING.md Added the link to our Wiki page Nov 6, 2018
LICENSE Update LICENSE Oct 12, 2018
README.md Update README.md Nov 2, 2018
package.json Alpha 1 (#42) Oct 24, 2018

README.md

galio Tweet

GitHub issues GitHub closed issues GitHub pull requests GitHub closed pull requests Gitter npm

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.

Expo iOS app

Expo Android app

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:

NavBar

Block

Card

Button

Icon

Input

Text

🚧 Will follow: 🚧

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

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:

  1. 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)
  2. Provide us with reproductible steps for the issue.
  3. 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

Useful Links

Tutorials: coming soon...

Freebies from Galio Team: coming soon...

© 2018 Galio, made with love for apps.