DOCSEARCHbyAlgolia
Submit Docs

Galio Framework

website·Indexed 30 days ago

https://galio-website-khaki.vercel.app

A UI framework for React Native providing a collection of customizable components including Button, Card, NavBar, Accordion, Slider, and ToastNotification. The framework includes GalioTheme for managing colors, sizes, and layout rules, and supports TypeScript.

Tokens
9.5K
Snippets
51
Records
58
Agent score
74%

What's inside Galio

  1. Galio Framework Overview

    Galio Framework is a free, open-source (MIT licensed) UI framework for React Native. It provides over 60 elements and 200+ individually designed components, including typography and a base theme, to accelerate the development of mobile applications.

  3. Implement a text input using Galio Framework

    The Input component is a styled version of React Native's TextInput. It supports basic text entry, password masking, rounded corners, and integrated icons from Expo's icon library. It can be used as a controlled component using value and onChangeText.
    import React, { useState } from 'react';
import { Input } from 'galio-framework';

const MyComponent = () => {
  const [value, setValue] = useState('');

  return (
    <Input
      value={value}
      onChangeText={setValue}
      placeholder="Controlled input"
      color="primary"
      rounded
      shadowless
    />
  );
};

  4. Report a bug or issue in Galio

    Galio uses GitHub Issues as its official bug tracker. When reporting an issue, follow these guidelines to ensure a faster resolution:

    1. Verify you are using the latest version of Galio by checking if your fork's master branch is up to date with the upstream master repository.
    2. Provide clear, reproducible steps to trigger the issue.
    3. Specify the platform being used and whether the issue occurs on a hardware device or a simulator, as some bugs may be platform-specific.
    # GitHub Issues tracker
https://github.com/galio-org/galio/issues

  5. Implement a Card component using galio-framework

    The Card component is a flexible and extensible content container used to display grouped information. It supports built-in slots for titles, captions, locations, avatars, and custom footers. It also supports standard React Native View props for layout and styling.
    import { Card } from 'galio-framework';

// Simple usage with image and title
<Card
  flex
  borderless
  title="Christopher Moon"
  caption="139 minutes ago"
  location="Los Angeles, CA"
  avatar="http://i.pravatar.cc/100?id=skater"
  image="https://images.unsplash.com/photo-1497802176320-541c8e8de98d?&w=1600&h=900&fit=crop&crop=entropy&q=300"
/>

// Advanced usage with custom footer and styling
<Card
  flex
  card
  shadow
  borderless
  title="Custom Card"
  caption="With custom styling"
  titleStyle={{ color: 'primary' }}
  captionStyle={{ color: 'muted' }}
  footer={
    <Block row space="between">
      <Text size={12} color="muted">Footer content</Text>
      <Button size="small" color="primary">Action</Button>
    </Block>
  }
/>

  6. Access theme constants in components with withGalio

    The withGalio Higher-Order Component (HoC) allows a React Native component to consume the Galio React Context. This enables the component to access theme constants (colors and sizes) either as a prop or within a style function.
    import { withGalio } from 'galio-framework';
import { StyleSheet } from 'react-native';

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

const App = (props) => {
  // Component logic
};

export default withGalio(App, styles);

  7. Use TypeScript with Galio Framework

    Galio provides full TypeScript support with proper type definitions. When building components, define interfaces for your props to ensure type safety when passing data to Galio components like Button, Input, and Block.
    import React, { useState } from 'react';
import { Button, Input, Block, Text } from 'galio-framework';

interface UserData {
  name: string;
  email: string;
}

interface UserFormProps {
  onSubmit: (data: UserData) => void;
}

const UserForm: React.FC<UserFormProps> = ({ onSubmit }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <Block flex padding={20}>
      <Input
        placeholder="Name"
        value={name}
        onChangeText={setName}
        color="primary"
        rounded
      />
      <Button color="primary" onPress={() => onSubmit({ name, email })}>
        Submit
      </Button>
    </Block>
  );
};

  9. Use the Text component for typography in galio-framework

    The Text component provides a normalized way to handle typography across different devices. It supports predefined heading and paragraph presets (h1-h5, p), as well as granular styling props for color, weight, and alignment. It also supports all standard React Native Text props.
    import { Text } from 'galio-framework';

// Basic usage with presets
<Text h1>Heading 1</Text>
<Text p>Paragraph</Text>
<Text muted>This is a muted paragraph.</Text>

// Advanced usage with combined props
<Text 
  h1 
  color="primary" 
  bold 
  style={{ textAlign: 'center' }}
>
  Custom Styled Heading
</Text>

<Text 
  p 
  muted 
  italic 
  size={18}
  style={{ lineHeight: 24 }}
>
  Custom paragraph with specific styling
</Text>

  12. Prerequisites for Algolia DocSearch integration

    To set up Algolia DocSearch for Docusaurus, you must have an Algolia account (free for open-source projects) and the following credentials provided by Algolia: Application ID, Search API Key, and Index Name.