react-native-short-style

react-native-short-style It is designed to use CSS selectors to style your components as you do with css web like in native.

With this css you wont need to devide your style across components, and style each component, child etc.

So like CSS you could have selectors like container > Button Text[children*='submit']:"width-100 he-20 di-flex" etc.

App using react-native-short-style Novelo

Working Web Demo react-native-short-style

additinally you could also simplify your styles like instead of background, simple do bac-red .box fl-1 op:0.5 and so on, box is a class that exist in your stylesheet.

If you see below, you also have predefines components like Modal, ActionSheet, Tabs and AlertDialog etc that you could use. See demo for more info

here is a simple code that shows how it works.

And now simple use your components in addition to all the View props, you can also use css.

!important

for overriding a css value, it have to be followed by -!important eg wi-100%-!important. for overriding the whole css style use !important instead eg wi-100 he-200 !important now both width and height will be overriden.

The overriden rules are as follow. css prop override NestedStyleSheet, and style override both css and NestedStyleSheet.

Note: Do not use dynamic style in css to much, eg a moving ball as its value changes to much and the lib caches all css values. The cache have max size and it will reset when the size reaches, so no need to be worry even if you dynamic css

Convert To Convert Any component to styled component use CreateView eg

const Custom = ({style, css, ifTrue, ...}, ref) => {

  return null

}

const StyledCustome =CreateView<Custom, any>(Custom);

/// the current code is used for View
 const View = CreateView<Native.View, ViewProps>(Native.View);
here is a predifined Components you could use, like ActionSheet, Modal etc.
 import {
  CreateView,
  ThemeContext,
  ScrollView,
  ThemeContainer,
  Text,
  View,
  Button,
  Icon,
  NestedStyleSheet,
  Modal,
  ActionSheet,
  TouchableOpacity,
  AlertDialog,
  CheckBox,
  CheckBoxList,
  TabBar,
  TabView,
  ProgressBar,
  Fab,
  Slider,
  Collabse,
  DropdownList,
  Loader,
  Portal,
  ButtonGroup,
  ToolTip,
  FormItem,
  TextInput,
} from 'react-native-short-style';
// if you are using expo, or your use react-native-vector-icons
import * as icons from "@expo/vector-icons";

Simple test

const userDefined = {
  textStyle: "co-yellow pa-5 !important",
  "texto, texto Text>Text:eq-of-type(0)": "bac-green co-red .textStyle-!important",
   "virtualItemSelector:not(>:has(selectedValue)):nth(even) *": x => x.baC("black").co("white").foW("bold").importantAll()
}
const themes = [
  NestedStyleSheet.create({
    AnimatedView: {
      backgroundColor: "#fff"
    },
    View: {
      backgroundColor: "#fff"
    },
    Text: {
      color: "#000"
    },
    TextInput: {
      color: "#000"
    },
    Icon: {
      color: "#000"
    },
   ...userDefined
  }),
  NestedStyleSheet.create({
    AnimatedView: {
      backgroundColor: "rgb(70 70 70)"
    },
    View: {
      backgroundColor: "rgb(70 70 70)"
    },
    Text: {
      color: "#fff"
    },
    TextInput: {
      color: "#fff"
    },
    Icon: x => x.co(".co-light"),
    header: "bac:red",
    ...userDefined
  })
]



  // All your components have to be contained within ThemeContainer
  <ThemeContainer icons={icons} selectedIndex={state.selectedTheme} themes={themes} defaultTheme={GlobalStyles}>

  <View css="texto-!important">
        <Text>hej jkhkjhasd <Text>test</Text></Text>
      </View>
  </ThemeContainer>

Devtools

For enabling devTools, edit metro.config.js

const { startDevServer } = require("react-native-short-style-devtools");

// Only run in Node + dev mode
if (process.env.NODE_ENV !== "production") {
    try {
        const root = path.resolve(
            __dirname,
            "./node_modules/react-native-short-style-devtools/dist" 
        );

        startDevServer({ root });
        console.log("🌐 DevTools server started from Metro!");
    } catch (err) {
        console.error("Failed to start DevTools server:", err);
    }
}

lastly assign localIp to ThemeContainer

Cashing

react-native-short-style uses its own useMemo called (useLocalMemo) that dose not depends on where you place the useMemo Note hat it works best with react-smart-state

Example

export const InputForm = () => {
    const state = StateBuilder({
        checkBoxes: [true, false],
        selectedValue: countries[countries.length - 100].value // Default to the last country
    }).build();
    const { mem } = useLocalMemo();
    return (
        <FormGroup css={"maw-300"} formStyle="Headless" labelPosition="Top" title='User-Form'>
            <FormItem title="FullName" icon={mem({ type: "AntDesign", name: "user" })}>
                <TextInput css="fl:1" onChangeText={mem(txt => console.log(txt))} />
            </FormItem>
            <FormItem title="UserName" icon={mem({ type: "AntDesign", name: "user" })}>
                <TextInput css="fl:1" />
            </FormItem>
            <FormItem title="Passowrd" info="Passowrd must at least containes one upper char" icon={mem({ type: "AntDesign", name: "lock" })}>
                <TextInput css="fl:1" />
            </FormItem>
            <FormItem title="Country" info="Select where you are from" icon={mem({ type: "AntDesign", name: "flag" })}>
                <DropdownList itemSize={mem({ size: 35, overscanCount: 100 })} numColumns={undefined} mode="ActionSheet" enableSearch={true} css="wi:100%"
                    selectedValue={state.selectedValue} onSelect={mem((value) => {
                        state.selectedValue = value.value
                    })}
                    items={countries} />
            </FormItem>
            <FormItem title="Stay logged in" info="Passowrd must at least containes one upper char" icon={mem({ type: "AntDesign", name: "lock" })}>
                <CheckBox checked checkBoxType="CheckBox"></CheckBox>
            </FormItem>
            <FormItem title="Stay logged in" info="Passowrd must at least containes one upper char" icon={mem({ type: "AntDesign", name: "lock" })}>
                <CheckBox checked checkBoxType="Switch"></CheckBox>
            </FormItem>
            <FormItem title="is User">
                <CheckBoxList labelPostion="Left" css={"wi:100% ali:flex-end"} onChange={mem((changes) => {
                    state.checkBoxes = changes.map(x => x.checked)
                })} checkBoxType="RadioButton" selectionType="Radio">
                    {
                        mem(state.checkBoxes.map((x, i) => (
                            <CheckBox key={i} label={i == 0 ? "Yes" : "No"} checked={x} />
                        )), state.checkBoxes)
                    }
                </CheckBoxList>
            </FormItem>
        </FormGroup>
    )
}

Note: some components is using settings for @expo/vector-icons 15 like FormGroup info icons, so if used below the current version then assign your own icons for ex infoIcon props