react-native-cascading-styles
v0.0.4
Published
This is a StyleSheet library that provides users with a StyleLibrary that mimics modern class based styles with CSS. This package also delivers a 'barely styled' component library, built with the same cascading style "classes".
Downloads
11
Readme
React Native Cascading Styles, Components, and Animation Library
Are you tired of juggling multiple libraries for styling, components, and animations in your React Native projects? Say hello to react-native-cascading-styles – your all-in-one solution for streamlined development! 🎉
Let's dive into the magic of StyleLibrary! No more hassle with class names – our inline style approach ensures lightning-fast performance. With descriptive names and cascading styles, you'll breeze through styling like never before. Need to customize? Inject your own styles effortlessly, creating predictable and polished designs every time.
But wait, there's more! Our components are the epitome of simplicity and flexibility. Take control of every style and function with ease. Want to add a personalized touch? Inject your own renderItems and watch your creations come to life! Whether it's a simple tooltip or a complex interactive element, our components empower you to build with speed and precision.
And let's not forget about animations! With our hooks, you'll wield unparalleled control over your animations, fine-tuning every detail to perfection. But if speed is your game, our animated components have got you covered. Wrap your components in sleek, animated views with just a few lines of code – it's that easy!
So why juggle multiple libraries when you can have it all with react-native-cascading-styles? Say goodbye to complexity and hello to seamless development. With our comprehensive solution, you'll conquer React Native like a pro, delivering stunning apps with confidence and ease. Try it out today and experience the difference for yourself! ✨
For more documentation on usage, go here Usage
Installation
npm install react-native-cascading-styles
Usage
Styles
You can pass a structured array to a component to apply the styles from the style library:
import { StyleLibrary } from 'react-native-cascading-styles';
return <View style={[StyleLibrary.ClassName1, StyleLibrary.ClassName2]}></View>;
Components
Import and use components from the library.
import { Component } from 'react-native-cascading-styles';
return <Component prop1="value1" />;
Animation
Using Animation Hooks
Hooks provide a simplified interface for creating animations. This method is useful if you want to integrate animations directly with your own components for more control and uniformity.
import React from 'react';
import { View, Button } from 'react-native';
import { useAnimation } from 'react-native-cascading-styles';
const MyAnimatedComponent = () => {
const { animation, startAnimation } = useAnimation();
return (
<View style={animation}>
<Button title="Animate" onPress={startAnimation} />
</View>
);
};
Using Animiation Components
Animation components wrap your components and manage the necessary props to simplify the usage of animations. This approach is slightly more restrictive but much easier to implement for common use cases.
import React from 'react';
import { AnimatedComponent } from 'react-native-cascading-styles';
const MyComponent = () => {
return (
<AnimatedComponent>
<YourComponent />
</AnimatedComponent>
);
};