rn-picostyle v1.1.7

PicoStyle

Styling Library for React Native(Expo) with Super Features! Create beautiful and unique apps very quickly.

• Super-featured: Animation support, gradient, localization, shadows, theme and global context with persist!
• Big support for types.
• Support for Tailwind, and syntax similar to styled-components.
• Dark theme, inline :dark - All of properties have :dark
• Pseudoclass No extra steps. :first, :last, :odd, :even
• Support Tailwind gradient, translate, rotate, scale !
• There are over 2500 fonts to choose from. No extra steps(for DEV). Just fontFamily=""

<ReservationCaptionText fontFamily="Lato_400Regular">Reserved</ReservationCaptionText>

demo

Just looking. It contains everything you need to know! Link

Guide

1.Global Contex - No more nesting.

const AppProvider = combineProviders([
  [ThemeProvider, { initialState: {theme, persist:true} }],
  [LocalizationProvider, { initialState: { translations, fallback: true, persist:true } }],
]);

Your own Contex - with data persist, if you want.

import {createContainer, usePersistState} from 'rn-picostyle'

const MeContext = (initialState) => {
  const [data, setData, restored] = usePersistState("@storage_path", initialState['data'], {persist: true});
  const [OtherData, setOtherData] = useState(initialState);


  return { data, setData, restored, OtherData, setOtherData }
}

const useTheme = createContainer(ThemeContext);
const ThemeProvider = useTheme.Provider

export { ThemeProvider, useTheme };

and use:

 const { t, locale, setLocale } = useContext(useLocalization);

 const { theme } = useContext(useTheme)

2.Inline flex, or mix?

Layout, Spacing, Typography, Effects - syntax like styled system, for you. :)

const Row = tw.View`${Layout} ${Spacing} ${FlexBox} ${Typography} ${Effects}`

And automatic suggesting, you do not have to do anything. No thank you, put the coffee down. :)

3.Inheritance and style override

const SquarePosition = tw.View`bg-red-200`
const SquareInner = tw(SquarePosition)`bg-blue-200`

4.Animation? No problem, just use AnimatableView/AnimatableText (Support all of react-native-animatable)

• Support syntax: native:Bollean, animation:TYPE, iterationDelay:TIME, easing:ease-out, direction:DIRECTION, iterationCount:infinite, delay:TIME
• Support Animations TYPE: bounce flash jello pulse rotate rubberBand shake swing tada wobble etc. (Support all of react-native-animatable)

const FooterRightBuyButton = tw.AnimatableView`animation:pulse iterationDelay:2000 easing:ease-out iterationCount:infinite`

5.Gradient? Just change View, to LinearGradient. Like Tailwind syntax, and support tailwind color.

const LinearGradientBox = tw.LinearGradient`from-red-400 via-red-200 to-transparent gradient-to-tr`

TODO:

• Improving and increasing the speed
• Rewriting the code more concise.

:heart::heart: Created by Kamil Niedbalski - pixelkoduje.pl :heart::heart:

pixelkoduje@gmail.com - hire me :)