sonny-ui

A modern collection of reusable React Native components and utilities optimized for Expo SDK 50+.

Features

• 🎨 Modern UI Components - Beautiful, customizable components with smooth animations
• 🏗️ New Architecture Ready - Full compatibility with React Native's New Architecture
• 📱 Cross-Platform - Works seamlessly on iOS, Android, and Web
• 🔧 TypeScript First - Complete type safety and IntelliSense support
• ⚡ Performance Optimized - Efficient caching, lazy loading, and memory management
• 🛠️ Developer Experience - Easy setup with automated backend configuration

Requirements

• Expo SDK 50+ (recommended: SDK 52+ for New Architecture support)
• React Native 0.73+
• React 18+
• TypeScript (optional but recommended)

Installation

Choose your preferred package manager:

# npm
npm install sonny-ui

# yarn
yarn add sonny-ui

# pnpm
pnpm add sonny-ui

# bun
bun add sonny-ui

# expo
npx expo install sonny-ui

Backend Setup (Optional)

Important: Backend setup is done using the CLI tool after installation, not during npm install.

Installation

First install the library:

npm install sonny-ui

Note: sonny-ui requires react-native-safe-area-context as a peer dependency. If you're using Expo SDK 50+, this is usually already included. If not, install it separately:

npm install react-native-safe-area-context

Google Fonts Setup (Optional)

For the enhanced Text component with Google Fonts support (Poppins & Inter), install the required packages following the Expo Google Fonts guide:

npx expo install @expo-google-fonts/poppins @expo-google-fonts/inter expo-font expo-splash-screen

Then load the fonts in your root layout (app/_layout.tsx or App.tsx):

import React from 'react';
import { useFonts } from 'expo-font';
import {
  Poppins_300Light,
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_600SemiBold,
  Poppins_700Bold,
  Poppins_800ExtraBold,
  Poppins_900Black,
} from '@expo-google-fonts/poppins';
import {
  Inter_300Light,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold,
  Inter_900Black,
} from '@expo-google-fonts/inter';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    // Poppins fonts
    Poppins_300Light,
    Poppins_400Regular,
    Poppins_500Medium,
    Poppins_600SemiBold,
    Poppins_700Bold,
    Poppins_800ExtraBold,
    Poppins_900Black,
    // Inter fonts
    Inter_300Light,
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
    Inter_700Bold,
    Inter_800ExtraBold,
    Inter_900Black,
  });

  useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    // Your app content
  );
}

Then configure your backend(s) using the CLI:

# Firebase setup
npx sonny-ui setup --firebase

# Supabase setup
npx sonny-ui setup --supabase

# Both backends
npx sonny-ui setup -f -s

This will:

• Install the necessary backend dependencies
• Create configuration files in your config/ directory
• Generate .env.example files with the required environment variables

Note: The backend configurations are optional and separate from the UI components. You can use sonny-ui components without any backend setup.

Quick Start

import React from "react";
import { View, StyleSheet } from "react-native";
import {
  MainContainer,
  SonnyButton,
  SonnyInput,
  SonnyModal,
  Text,
  showToast,
  SonnyToastProvider,
} from "sonny-ui";

export default function App() {
  const [modalVisible, setModalVisible] = React.useState(false);
  const [name, setName] = React.useState("");

  const handleShowToast = () => {
    showToast({
      type: "success",
      title: "Welcome!",
      message: "sonny-ui is ready to use",
      duration: 3000,
    });
  };

  return (
    <SonnyToastProvider>
      <MainContainer style={styles.container}>
        <Text
          fontFamily="poppins"
          fontSize={24}
          fontWeight="700"
          style={styles.title}
        >
          Welcome to sonny-ui
        </Text>

        <Text
          fontFamily="inter"
          fontSize={16}
          fontWeight="400"
          color="#6B7280"
          style={styles.subtitle}
        >
          Beautiful React Native components with Google Fonts
        </Text>

        <SonnyInput
          placeholder="Enter your name"
          value={name}
          onChangeText={setName}
          leftIcon="person"
          style={styles.input}
        />

        <SonnyButton
          title="Open Modal"
          onPress={() => setModalVisible(true)}
          variant="primary"
          icon="modal"
          style={styles.button}
        />

        <SonnyModal
          visible={modalVisible}
          onClose={() => setModalVisible(false)}
          showCloseButton
        >
          <SonnyButton
            title="Show Toast"
            onPress={handleShowToast}
            variant="success"
            icon="checkmark-circle"
          />
        </SonnyModal>
      </MainContainer>
    </SonnyToastProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  title: {
    textAlign: "center",
    marginBottom: 10,
  },
  subtitle: {
    textAlign: "center",
    marginBottom: 30,
  },
  input: {
    marginBottom: 20,
  },
  button: {
    marginBottom: 10,
  },
});

What's Included

🎨 UI Components

• SonnyButton - Customizable button with 7 variants, loading states, and icon support
• SonnyInput - Advanced text input with validation, icons, and error states
• SonnyBackButton - Navigation back button with multiple styles and positioning
• SonnySwitch - Toggle switch with 6 variants and smooth animations
• SonnyModal - Customizable modal with gradient background and animations
• SonnySheetModal - Bottom sheet modal with drag gestures
• SonnyToast - Toast notifications with multiple types and positioning
• SonnyCountriesSearch - Searchable country dropdown with flags
• SonnyCountryCodePicker - Modal country code picker
• CachedImage - High-performance image caching component
• Text - Enhanced text component with Google Fonts support (Poppins & Inter)

🏗️ Layout Components

• MainContainer - Safe area container with scroll management

🛠️ Utilities & Hooks

• String Utils - Comprehensive text formatting and validation functions
• Image Cache Hook - Efficient image caching system
• Toast Provider - Global toast notification management

⚙️ Backend Integration

• Firebase Setup - Automated Firebase configuration with auth, firestore, and storage
• Supabase Setup - Automated Supabase configuration with auth and database

Documentation

• 📖 Complete Documentation - Detailed guides for each component
• 🎯 API Reference - Full API documentation with examples
• 🚀 Setup Guide - Installation and configuration
• 💡 Examples - Interactive examples for all components
• 🔮 Roadmap - Future components and features

Compatibility

| Expo SDK | React Native | Support Status | | -------- | ------------ | ------------------ | | 53 | 0.79 | ✅ Fully Supported | | 52 | 0.76 | ✅ Fully Supported | | 51 | 0.74 | ✅ Fully Supported | | 50 | 0.73 | ✅ Fully Supported | | < 50 | < 0.73 | ❌ Not Supported |

Contributing

We welcome contributions! Here's how you can help:

🐛 Report Issues

• Found a bug? Open an issue
• Include steps to reproduce, expected vs actual behavior
• Add screenshots or code snippets when helpful

💡 Suggest Features

• Have an idea? Start a discussion
• Check our Roadmap first
• Explain your use case and why it would benefit others

🔧 Development Setup

1. Fork and clone the repository

   git clone https://github.com/Sonnysam/sonny-ui
   cd sonny-ui

2. Install dependencies

   npm install

3. Build the project

   npm run build

4. Test your changes

   npm test

📝 Pull Request Guidelines

• Fork the repository and create your branch from main
• Follow the existing code style and conventions
• Add tests for new features or bug fixes
• Update documentation if you change APIs
• Write clear commit messages following conventional commits
• Keep PRs focused - one feature/fix per PR

🎯 What We're Looking For

• Bug fixes and performance improvements
• New components from our roadmap
• Documentation improvements and examples
• Tests to improve coverage
• Accessibility enhancements

📋 Code Style

• Use TypeScript for all new code
• Follow React Native best practices
• Add JSDoc comments for public APIs
• Use meaningful variable names
• Keep components focused and reusable

🏆 Recognition

Contributors will be:

• Added to our contributors list
• Credited in release notes
• Given collaborator access after consistent contributions

For detailed guidelines, see our Contributing Guide.

License

MIT © sonnysam

Want to suggest a component or utility? Open an issue or start a discussion!

Made with ❤️ in Ghana 🇬🇭 by Samuel Agbenyo (@AgbenyoOfficial on X)