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), with realtime update. Just fontFamily=""

Install and usage:

yarn add rn-picostyle
npm install -S rn-picostyle

import tw, { ThemeProvider, LocalizationProvider, useTheme, useLocalization, combineProviders, FlexBox, Layout, Spacing, Typography, Effects, useContext } from 'rn-picostyle'

demo

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

Guide

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)

Styling

1. 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. :)

2. Inheritance and style override

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

3. 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`

4. 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`

5. Iterable element? Use special pseudo classes. No extra steps, just write.

Pseudo: fist, last, odd, even

const Box = tw.View`w-8 h-8 bg-red-200 rounded m-1 last:bg-pink-200 first:bg-blue-200`

<Row center>
  <Box/>
  <Box/>
  <Box/>
  <Box/>
  <Box/>
  <Box/>
</Row>

6. Using fonts, no extra steps!(DEV) Over 2500 to choose from. With prompting, but not only for fonts !

Usage fonts, in production: Link

TODO:

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

❤️❤️ Created by Kamil Niedbalski - pixelkoduje.pl ❤️❤️

[email protected] - hire me :)

Liked the library? 😇