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:

1# npm
2npm install sonny-ui
3
4# yarn
5yarn add sonny-ui
6
7# pnpm
8pnpm add sonny-ui
9
10# bun
11bun add sonny-ui
12
13# expo
14npx 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:

1npm 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:

1npm 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:

1npx 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):

1import React from 'react';
2import { useFonts } from 'expo-font';
3import {
4  Poppins_300Light,
5  Poppins_400Regular,
6  Poppins_500Medium,
7  Poppins_600SemiBold,
8  Poppins_700Bold,
9  Poppins_800ExtraBold,
10  Poppins_900Black,
11} from '@expo-google-fonts/poppins';
12import {
13  Inter_300Light,
14  Inter_400Regular,
15  Inter_500Medium,
16  Inter_600SemiBold,
17  Inter_700Bold,
18  Inter_800ExtraBold,
19  Inter_900Black,
20} from '@expo-google-fonts/inter';
21import * as SplashScreen from 'expo-splash-screen';
22import { useEffect } from 'react';
23
24SplashScreen.preventAutoHideAsync();
25
26export default function RootLayout() {
27  const [fontsLoaded] = useFonts({
28    // Poppins fonts
29    Poppins_300Light,
30    Poppins_400Regular,
31    Poppins_500Medium,
32    Poppins_600SemiBold,
33    Poppins_700Bold,
34    Poppins_800ExtraBold,
35    Poppins_900Black,
36    // Inter fonts
37    Inter_300Light,
38    Inter_400Regular,
39    Inter_500Medium,
40    Inter_600SemiBold,
41    Inter_700Bold,
42    Inter_800ExtraBold,
43    Inter_900Black,
44  });
45
46  useEffect(() => {
47    if (fontsLoaded) {
48      SplashScreen.hideAsync();
49    }
50  }, [fontsLoaded]);
51
52  if (!fontsLoaded) {
53    return null;
54  }
55
56  return (
57    // Your app content
58  );
59}

Then configure your backend(s) using the CLI:

1# Firebase setup
2npx sonny-ui setup --firebase
3
4# Supabase setup
5npx sonny-ui setup --supabase
6
7# Both backends
8npx 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

1import React from "react";
2import { View, StyleSheet } from "react-native";
3import {
4  MainContainer,
5  SonnyButton,
6  SonnyInput,
7  SonnyModal,
8  Text,
9  showToast,
10  SonnyToastProvider,
11} from "sonny-ui";
12
13export default function App() {
14  const [modalVisible, setModalVisible] = React.useState(false);
15  const [name, setName] = React.useState("");
16
17  const handleShowToast = () => {
18    showToast({
19      type: "success",
20      title: "Welcome!",
21      message: "sonny-ui is ready to use",
22      duration: 3000,
23    });
24  };
25
26  return (
27    <SonnyToastProvider>
28      <MainContainer style={styles.container}>
29        <Text
30          fontFamily="poppins"
31          fontSize={24}
32          fontWeight="700"
33          style={styles.title}
34        >
35          Welcome to sonny-ui
36        </Text>
37
38        <Text
39          fontFamily="inter"
40          fontSize={16}
41          fontWeight="400"
42          color="#6B7280"
43          style={styles.subtitle}
44        >
45          Beautiful React Native components with Google Fonts
46        </Text>
47
48        <SonnyInput
49          placeholder="Enter your name"
50          value={name}
51          onChangeText={setName}
52          leftIcon="person"
53          style={styles.input}
54        />
55
56        <SonnyButton
57          title="Open Modal"
58          onPress={() => setModalVisible(true)}
59          variant="primary"
60          icon="modal"
61          style={styles.button}
62        />
63
64        <SonnyModal
65          visible={modalVisible}
66          onClose={() => setModalVisible(false)}
67          showCloseButton
68        >
69          <SonnyButton
70            title="Show Toast"
71            onPress={handleShowToast}
72            variant="success"
73            icon="checkmark-circle"
74          />
75        </SonnyModal>
76      </MainContainer>
77    </SonnyToastProvider>
78  );
79}
80
81const styles = StyleSheet.create({
82  container: {
83    padding: 20,
84  },
85  title: {
86    textAlign: "center",
87    marginBottom: 10,
88  },
89  subtitle: {
90    textAlign: "center",
91    marginBottom: 30,
92  },
93  input: {
94    marginBottom: 20,
95  },
96  button: {
97    marginBottom: 10,
98  },
99});

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

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

2. Install dependencies

   1npm install

3. Build the project

   1npm run build

4. Test your changes

   1npm 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)