afrikit-mobile

Afrikit Mobile

A mobile design system for React Native using Expo, built to streamline UI consistency.

Welcome to Afrikit Mobile! A design system for React Native and Expo projects, providing a cohesive set of UI components and utilities.

🚀 Installation

Install Afrikit Mobile into your project by running:

npm install afrikit-mobile
# or if you prefer yarn
yarn add afrikit-mobile

This will automatically install all the required dependencies, including Expo, Nativewind, and Tailwind.

🎨 Usage

Afrikit Mobile exports various ready-to-use components. Here’s an example of using one of them:

Floating Button Example

// App.tsx
import React from 'react';
import { FloatingButton } from 'afrikit-mobile';

const App = () => {
  return (
    <FloatingButton onPress={() => console.log('Pressed')} backgroundColor="blue" />
  );
};

export default App;

Components List:

Afrikit Mobile provides multiple components:

• FloatingButton: A floating action button with a default icon and customizable color.
• IconButton: A button displaying an icon with configurable properties.
• TopBarTitle: A title component for the top bar, with multiple styles.

import { FloatingButton, IconButton, TopBarTitle } from 'afrikit-mobile';

const App = () => {
  return (
    <>
      <TopBarTitle title="Welcome to Afrikit" />
      <FloatingButton onPress={() => console.log('Pressed')} backgroundColor="red" />
      <IconButton onPress={() => alert('Icon clicked!')} icon="star" />
    </>
  );
};

export default App;

🛠️ Extending Tailwind

Afrikit Mobile integrates seamlessly with Tailwind for styling. You can extend your Tailwind config as needed:

// tailwind.config.js
const afrikitConfig = require('afrikit-mobile/tailwind.config');

module.exports = {
  ...afrikitConfig,
  theme: {
    extend: {
      colors: {
        primary: '#FF6B6B', // Custom color
      },
    },
  },
};

Afrikit also includes custom tokens for colors, spacing, and border radii, which are already added to the theme. Use them like this:

theme: {
  colors: {
    ...afrikitConfig.theme.colors,  // Add Afrikit colors
  },
  spacing: {
    ...afrikitConfig.theme.spacing,  // Add Afrikit spacing tokens
  },
  borderRadius: {
    ...afrikitConfig.theme.borderRadius, // Add Afrikit's border radius tokens
  },
}

🧑‍💻 Contributing

Got ideas for improvements or found a bug? Submit an issue or open a pull request in the GitHub repo.

📝 License

This project is licensed under the MIT License. See the LICENSE.md file for more details.

😄 Final Words

Afrikit Mobile is here to save your time, improve your app's UI, and bring consistency to your design workflow. Now, get back to doing what you do best: building awesome apps, and leave the design heavy-lifting to us! 💪