Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

afrikit-mobile

Package Overview
Dependencies
Maintainers
0
Versions
77
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

afrikit-mobile

  • 1.0.72
  • npm
  • Socket score

Version published
Weekly downloads
43
decreased by-67.42%
Maintainers
0
Weekly downloads
 
Created
Source

Afrikit Mobile

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

npm version license

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! 💪

FAQs

Package last updated on 15 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc