Minions! Use the @prototyp/skeletor react-native toolkit!

A couple of days ago we published our small in-house react-native toolkit called skeletor.

We wanted to rid ourselves of any/all growing pains you have when working on a new react-native project, whether it’s building screen layouts, handling forms, animating stuff on screen or the usual platform-specific pains. So, what did we create?

Well, something for everything, with a very simple concept behind it all — Make my code short and to the point.

A (Very) short description

The 4 components

All of the components included with skeletor are built with the idea that you should not have to create a custom StyleSheet object to modify how they look. All of the styling props are exposed at the top level props and are optimised so they do not cause unnecessary re-renders or performance issues if possible.

Screen will help you create a screen layout without having to think about safe areas, custom backgrounds, status bars etc.

Text will autocomplete your font names (provided you set it up correctly) and will expose most of what you need to modify how it looks to the top-level props.

Block is, as its name suggests, the building block of all layouts, allowing you to adjust the spacing, size, alignment and other props directly in its props.

InputFocusScrollView solves an iOS-specific issue where input fields are not automatically scrolled into position when programmatically focused. Having struggled with custom libraries throughout our development and with the best solution out of all of them suddenly started not working correctly, we decided enough is enough and created our own way to solve this very annoying issue.

The hooks

useForm will handle all your form states and validation so you don’t have to worry about those other than passing in custom validation rules if necessary. Full TypeScript support.

useAnimation will reduce the boilerplate code you need to do to create an animation for an element.

useAnimationTimeline will help you lay those animations out on a timeline of your specification so they trigger when you want them to trigger and in the order that you want them to.

useAndroidBackHandler is, as its name suggests, a hook that will handle the android back button and automatically unsubscribe the custom handler when it is time to do so (either when it should not be enabled or when the hook is unmounted).

The best part of it all

skeletor has literally 0 dependencies. All of it was built with react and react-native.

You can check the code and examples out here: https://npmjs.com/package/@prototyp/skeletor

Thank you for the time to read this blog! Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.