Skip to main content

Galio Framework - Overview & How to Use It

· 11 min read
Beniamin Marcu
Full Stack Developer
Last updated on October 24, 2025

galio react native framework

Galio is a UI toolkit and component framework for React Native that provides a consistent set of ready-made, themeable building blocks (buttons, cards, text, inputs, nav bars, etc.) so you can prototype and ship mobile UIs faster. The galio repository includes the core components and a lightweight theme system in src/theme (see colors.tsx, sizes.tsx, index.tsx) plus components under src/ such as Block, Button, Text, Input, Card, Avatar, NavBar and more.

Learn more on the official site: galio.io and browse the source and examples on GitHub: github.com/galio-org/galio.

This article explains what Galio is, when to use it, how to add it to a new or existing app, and how to customize the theme and components so your app looks and behaves consistently.

What you'll learn (quick contract)​

  • Inputs: a React Native app (Expo or bare), your brand colors and fonts.
  • Outputs: a project using Galio components with a custom theme and optional light/dark mode.
  • Success criteria: components render with your colors, theme values are available via hooks, and you can toggle or follow system theme.

Edge cases covered: missing provider (styles not applied), font registration issues, and basic migration tips from older Galio APIs.

What is Galio?​

  • A component-first UI framework for React Native.
  • Provides composable primitives (layout, typography, inputs, navigation elements, media cards).
  • Small, opinionated theme system (colors, sizes) that keeps apps visually consistent.

When to use Galio:

  • You want a consistent design language without building every component from scratch.
  • You're building admin panels, content apps, dashboards, or consumer apps where the supplied components speed development.
  • You want an extendable theme system so designers and developers can tune colors and spacing globally.

When not to use Galio:

  • If your app requires a totally custom visual language with heavy animations and bespoke native components, a smaller set of primitives or a custom design system may be preferable.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Quick start — New app​

The steps below assume you use React Native (managed Expo or bare workflow) and TypeScript is optional.

  1. Create a new React Native app (Expo example):
npx create-expo-app my-app
cd my-app
  1. Install Galio (install the package you publish/maintain for your projects). If you use the galio-framework package on npm:
npm install galio-framework
# or
yarn add galio-framework

  1. Install peer dependencies the package requires (React, React Native, and any font or icon libs). Check the package README for specifics.

  2. Use Galio components directly in your App.tsx:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { Block, Button, Text } from 'galio-framework';

export default function App() {
  return (
    <SafeAreaView style={styles.safe}>
      <Block flex center style={styles.container}>
        <Text h4>Welcome to Galio</Text>
        <Button round color="#6C63FF" onPress={() => console.log('Hello')}>Get started</Button>
      </Block>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  container: { padding: 16 },
});

This simple setup gets you started with the provided components. See the next sections for theming and deeper integration.

Tip: if components look unstyled at first, ensure any required fonts or icon fonts are registered and that your app is wrapped with GalioProvider (see the Theme section below).

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Components overview​

Quick reference: the most-used building blocks you get out of the box.

  • Block — a flexible layout primitive (like a styled View) used for spacing and positioning.
  • Button — several variants (primary, round, size options).
  • Text — typography primitives with h1..h4, muted, bold, and size props.
  • Input — text input with label, error states, and icon support.
  • Card — media/content card with image and action support.
  • Avatar — user avatar and image placeholders.
  • NavBar — standard top navigation bar used in screens.

Example: responsive list item with avatar and actions

import React from 'react';
import { Block, Avatar, Text, Button } from 'galio-framework';

function UserRow({ user }) {
  return (
    <Block row middle space="between" style={{ paddingVertical: 10 }}>
      <Block row middle>
        <Avatar source={{ uri: user.avatar }} />
        <Block style={{ marginLeft: 10 }}>
          <Text bold>{user.name}</Text>
          <Text size={12} muted>{user.subtitle}</Text>
        </Block>
      </Block>
      <Button size="sm">Message</Button>
    </Block>
  );
}

Add Galio to an existing app​

To integrate Galio into an existing project:

  1. Install the package and any peer deps the same way as above.
  2. Replace or augment existing UI pieces by importing Galio components where useful. For example, swap a plain View + Text button with Button from Galio.

Example — replacing a custom card with Card:

import React from 'react';
import { Card, Text, Button } from 'galio-framework';

function FeedItem({ title, subtitle }) {
  return (
    <Card>
      <Text bold>{title}</Text>
      <Text muted size={12}>{subtitle}</Text>
      <Button size="sm">Open</Button>
    </Card>
  );
}

Tips for integration:

  • Start small: replace a single module or screen first and verify style and behavior.
  • Keep your own wrapper components if you need to standardize prop shapes across the app.
  • If you already have a design system, use Galio only for missing primitives to avoid doubling responsibilities.

Common pitfalls

  • Styles/discrepancies: you may forget to wrap your app with GalioProvider — components read theme values from the provider.
  • Missing fonts/icons: register fonts in App.tsx (or via Expo app.json/app.config) before rendering UI so text metrics and icons are correct.
  • Peer dependency mismatches: check console warnings — upgrade React / React Native to compatible versions.

Theme system (how to customize)​

The galio repo contains a small theme system under src/theme: colors.tsx, sizes.tsx, and index.tsx.

Common customization patterns:

  • Override colors and sizes by creating your own theme object and merging it with the default theme:
import { useTheme } from 'galio-framework';

const [ colors, sizes ] = useTheme();
const theme = {
  colors: {
    ...colors,
    primary: '#ff0066',
    background: '#f7f7fa',
  },
  sizes: {
    ...sizes,
    BASE: 16,
  },
};

export default theme;
  • If the package exposes a ThemeProvider or a context (check package docs), wrap your app with it and pass your theme. If not, import theme values directly for inline styles or small wrappers.
  • Fonts and icons: the repo includes assets/fonts; register custom fonts early in your app (or via Expo config) to ensure consistent typography.

Practical example: using theme constants in styles

import { StyleSheet } from 'react-native';
import { useTheme } from 'galio-framework';

const { colors, sizes } = useTheme();

const styles = StyleSheet.create({
  title: { color: colors.primary, fontSize: sizes.h4 },
});

The modern Galio API exposes GalioProvider which you should use at the root of your app to inject your theme. Create a small theme.ts file in your app and pass it to the provider.

src/theme.ts (your app):

export const myAppTheme = {
  colors: {
    primary: '#6366F1',
    background: '#FAFAFA',
    surface: '#FFFFFF',
    text: '#111827',
    textSecondary: '#6B7280',
    border: '#E5E7EB',
    success: '#10B981',
    error: '#EF4444',
  },
  sizes: {
    BASE: 16,
    BUTTON_HEIGHT: 44,
  }
};

Wrap your app with GalioProvider in App.tsx:

import React from 'react';
import { GalioProvider } from 'galio-framework';
import { myAppTheme } from './src/theme';
import { RootNavigation } from './src/navigation';

export default function App() {
  return (
    <GalioProvider theme={myAppTheme}>
      <RootNavigation />
    </GalioProvider>
  );
}

Now all components that use theme tokens will read from your myAppTheme values.

Hooks: useTheme() and useColors()​

Use the recommended hooks to access the theme inside components:

import { useTheme, useColors } from 'galio-framework';

function MyButton() {
  const { sizes } = useTheme();
  const colors = useColors();

  return (
    <Button color={colors.primary} style={{ height: sizes.BUTTON_HEIGHT }}>
      Press me
    </Button>
  );
}

useTheme() returns the full theme object ({ colors, sizes, mode }). useColors() is a convenient shortcut that returns semantic colors for the current mode.

Light / Dark themes (auto and manual)​

The modern Galio theme system supports auto-following the OS theme or manual mode switching.

Auto (follows system):

// Default behaviour - GalioProvider will follow the system theme when no `mode` prop is provided
<GalioProvider theme={myAppTheme}>
  <App />
</GalioProvider>

Manual control (toggle in-app):

import React, { useState } from 'react';
import { GalioProvider } from 'galio-framework';
import { myAppTheme } from './src/theme';

export default function AppRoot() {
  const [mode, setMode] = useState<'light' | 'dark'>('light');

  return (
    <GalioProvider theme={myAppTheme} mode={mode}>
      <AppInner onToggleMode={() => setMode(m => (m === 'light' ? 'dark' : 'light'))} />
    </GalioProvider>
  );
}

Inside components you can read the current mode via useTheme():

function ThemeToggleLabel() {
  const { mode } = useTheme();
  return <Text>Current mode: {mode}</Text>;
}

Migration notes​

If you are migrating from an older Galio API, the new system provides backwards compatibility but prefers the hooks above (useTheme, useColors) and GalioProvider with a theme prop. Replace old calls to useGalioTheme() / useThemeColors() with the new hooks when convenient.

Troubleshooting (fast answers)​

  • "My components look like default/unstyled": confirm GalioProvider is mounted at the root and receives your theme.
  • "My colors don't change on toggle": verify you're passing mode to GalioProvider for manual control, or that your device/emulator is set to dark mode if relying on auto.
  • "Buttons / icons show squares": icon font not loaded — register icon font files before first render.
  • "TypeScript errors importing theme": check exported types in src/theme/index.tsx or use any temporarily while migrating.

If a problem persists, open the component source under src/ to see which theme tokens it expects.

Migration checklist (practical)​

  • Add GalioProvider to your app root and pass theme.
  • Create src/theme.ts with your brand colors and sizes.
  • Replace useGalioTheme() with useTheme() in component code.
  • Replace useThemeColors() with useColors() or use the colors from useTheme().
  • Load custom fonts early (or update Expo config).
  • Test light/dark mode: system toggle and manual mode prop.

How to test quickly (commands)​

If you're using Expo:

npx expo start
# or run on a connected device/emulator
npx expo run:android
npx expo run:ios

For EAS / production builds:

eas build --platform android --profile production
eas build --platform ios --profile production

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Best practices & tips​

  • Keep theme overrides minimal and centralized. Change colors, spacing and font sizes in one place.
  • Use component props where possible instead of deep style overrides to preserve consistent behavior and accessibility (buttons with accessibilityLabel, proper hit slop, etc.).
  • For lists prefer optimized primitives and React Native best practices (FlatList with getItemLayout, initialNumToRender) — these are independent of Galio but will keep your UI smooth.
  • Test components on multiple screen sizes — Galio’s sizes file helps with responsive scale factors used across components.

Performance and accessibility​

  • Galio components are thin wrappers around React Native primitives; performance depends on how you compose them. Avoid unnecessary re-renders and memoize heavy list items.
  • Ensure accessible labels and roles on interactive components. Prefer semantic props (e.g., accessibilityLabel) and keyboard navigation where applicable.

Where the theme and components live in this repo​

Look at the files included in this repository for concrete examples and defaults:

  • src/theme/colors.tsx — color palette used across components.
  • src/theme/sizes.tsx — spacing, scale and typography sizes.
  • src/theme/index.tsx — theme entry that exports the values used by components.
  • src/ — component source files (e.g., Button.tsx, Block.tsx, Card.tsx, Input.tsx). These are great references if you need to fork or extend behavior.

If you want to make larger changes to component behavior, modify the components in src/ and publish a scoped package or keep a local fork in your monorepo.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Example cookbook (common tasks)​

  • Change primary color: update src/theme/colors.tsx primary entry and rebuild.
  • Add a new button variant: extend Button.tsx to add a variant prop and map it to styles stored in the theme.
  • Add global fonts: put font files in assets/fonts, register them in your app entry (or via Expo config), and reference in theme typography styles.
Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

Quick reference checklist​

  • Install galio-framework into your project.
  • Import the components you need: Block, Button, Text, Input, Card, etc.
  • Override src/theme values for colors and sizes to match your brand.
  • Replace a few views with Galio components to evaluate look-and-feel before broader adoption.

Next steps​

  • Try the sample snippets above in a minimal app to validate layout and theming.
  • Explore the component source in src/ for advanced customization. If you want, I can generate a short migration guide to replace common UIKit-like components with Galio equivalents in your app.

Conclusion​

Galio is a solid choice for React Native developers looking to speed up UI development with a consistent set of components and a lightweight theme system. By following the quick start guide, integrating into existing apps, and customizing the theme, you can leverage Galio to build polished mobile interfaces efficiently. Explore the components, experiment with theming, and adapt Galio to fit your app's unique needs.

Resources​