SpiroKit

I'm pleased to announce that a new version of SpiroKit for Figma is available to download

What's new?

DateTime Picker component:

Now you can prototype your date picker components. You can choose between different views like "calendar", "month selector," and "time selector". All the combinations are available in light and dark mode.

You can swap any day or month between "Active" and "Inactive".

🎥 Here's a quick video where I show all the possible combinations:
https://twitter.com/mauro\_codes/status/1605940577077526530

If you have any questions about it, don't hesitate to reach out at mauro@spirokit.com or send my a DM on Twitter https://twitter.com/mauro\_codes

Happy coding

I just uploaded a new version of the SpiroKit package that includes a brand new component: DateTimePicker.

As always, you can find all the related documentation + tons of examples in the Official docs

This component comes with many features, some inherited from react-native-modern-datepicker + more SpiroKit features like accent color and color mode customization, meaning that you can choose between the 17 color schemes available in SpiroKit, and everything will just work on light and dark mode.

Bug Fixing

• Modal Component: Props inherited from NativeBase were not working properly.

Coming soon

• I'll be working on adding this new DateTimePicker component to Figma, so you can use it on your prototypes.
• New components
• New App Templates

If you have any questions about it, don't hesitate to reach out at mauro@spirokit.com or send my a DM on Twitter https://twitter.com/mauro_codes

Happy coding

This new version includes IntelliSense improvements for the useTheme and useColorModeValue hooks.

Resources

• If you are interested in getting your SpiroKit license, please visit our website
• Want to learn more about SpiroKit before buying? Visit our public documentation site

useTheme improvements

useTheme is a custom hook inherited from NativeBase that allows you to access the theme object from the global context. This is useful when you need to get the value for a SpiroKit token like primary.500 or emerald.700.

This hook was already available with SpiroKit 1.0.0, but I made a slight improvement so you can get IntelliSense for the following tokens:

• colors
  

• fontSizes
  

• letterSpacings
  

• lineHeights
  

• fontWeights
  

More about this hook here:
https://docs.spirokit.com/?path=/docs/getting-started-hooks--use-theme

useColorModeValue improvements

useColorModeValue is another custom hook inherited from NativeBase that can retrieve a value from parameters passed based on the active color mode (light/dark). SpiroKit also adds a third optional parameter that allows you to override the global color mode for a specific scenario.

This hook was already available with SpiroKit 1.0.0, but now you will get IntelliSense both for "light" and "dark" parameters:

More about this hook here:
https://docs.spirokit.com/?path=/docs/getting-started-hooks--use-color-mode-value

I hope you enjoy these few quality-of-life improvements.

Happy coding!

I'm pleased to announce that SpiroKit now includes App Templates!

App Templates are a convenient way to kickstart your next app, avoiding the problems that come from starting with a blank canvas and saving hundreds of hours of development and design work.

All the App Templates are available as follows:

• Figma prototypes
• React Native template.

For Figma, here's a preview of the new section:

For React Native:

Follow this guide to quickly create a new project with this template.

I'll be working on new App Templates in the upcoming weeks, and I'll love to hear your thoughts about them.

You can always send me a DM on Twitter @mauro_codes

Happy hacking!

Today is the day! SpiroKit for React Native is finally available!

SpiroKit is a design system for mobile applications. It includes a collection of carefully crafted components and design principles to quickly transform an idea into a product.

You can quickly prototype using SpiroKit for Figma, and once your idea is validated, use SpiroKit for React Native to go from prototype to working demo in no-time.

Customizable

SpiroKit comes with a custom provider that allows you to set a global theme.
It includes 17 different color palettes, and you can add your own if you want.
You can also choose between light and dark modes and even use custom fonts.

Extensible

SpiroKit applies the atomic design philosophy, meaning that you can create your own components by mixing and matching the existing ones.
There are unlimited layout options by combining powerful primitives inherited from Native Base (Box, VStack, HStack, Center, etc.)

Great developer experience

You get typing annotations, kickass documentation with everything you need, and tons of working examples to copy & paste. Also, we are currently working on a VSCode extension for code snippets so you can quickly scaffold any component.

Show me the code

Here's an example of a card component. We rely on composition, so you have access to customize every detail.

<HorizontalCard
  BadgeComponent={<Badge>Travel</Badge>}
  TitleComponent={
    <TitleThree>Resting place of Australia's last convict ship</TitleThree>
  }
  DescriptionComponent={<Subhead>Wellington, New Zealand (CNN)</Subhead>}
  DateComponent={<Footnote>15th June 2021</Footnote>}
  AssetLeftComponent={
    <Image
      source={{ uri: "https://i.imgur.com/1lSpdz3.png" }}
      alt="Image of a ship"
    ></Image>
  }
></HorizontalCard>;

Result

Pay once; use it forever.

All our licenses include unlimited use. So you pay once and can use SpiroKit to build as many apps as you want. No limits.

We also support Parity Purchasing Power.
Check our website to see if you are eligible for a discount.

Roadmap

App templates & more components

There are tons of new components coming soon, and we are also working on app templates, so you don't need to start your next app from a blank canvas.

Feature requests, feedback & public roadmap

To keep evolving SpiroKit with our community, we are working on a platform to centralize:

• Public roadmap
• Feature requests
• Feedback

More about this soon!

Resources

• If you are interested in getting your SpiroKit license, please visit our website
• Want to learn more about SpiroKit before buying? Visit our public documentation site