An utility style framework for React Native

Overview


An utility React Native style framework for rapidly building custom user interfaces.

Total Downloads Latest Release License


Documentation

For full documentation, please check https://osmicsx.dev

Based on TailwindCSS

OsmiCSX adopts the TailwindCSS concept. We want to implement the same coding style in React Native, styling the component just by calling the style name. But, because React Native does not use CSS browser, tailwind is not directly compatible with React Native. That's the problem OsmiCSX is trying to solve.

Need Boilerplate? Try ⚡ Osmi CLI

Initializing React Native project and setup all the configuration will take time, and OsmiCSX proudly presents Osmi CLI that will help you initialize your React Native Project with awesome boilerplate (Osmi Kit).

Osmi Kit includes the following rock-solid technical decisions out of the box:

  • React Native
  • React Navigation 5
  • OsmiCSX
  • Redux-Saga
  • Redux-Persist
  • AsyncStorage
  • apisauce (to talk to REST servers)
  • Flipper-ready
  • Reactotron-ready
  • TDD-ready
  • And more!

Quick Start

Comments
  • Missing + Enhancements

    Missing + Enhancements

    I was not able to find a way to provide a height: 100% relative to the parent just like the "full" - for width 100% without using flex.

    Also with Spacing, there is no way to provide responsive margins/paddings, so I am using react-native-sizes-matters, but can not really integrate it with padding and margins since they are custom and can not be any value, for eg: pl-${scale(14)}, I know I can provide this in the custom theme file, but again for each value this will make it longer and harder, So I think a good solution for this is to give an option to provide a pl-{anyValue} and same for margins

    enhancement 
    opened by KJ-GM 9
  • typescript support ++

    typescript support ++

    Permisi, Mas @DeVoresyah . Ini saya lagi coba oprek-oprek library-nya. Mau coba bikin versi typescript-nya. cuma masih stuck di fungsi connect-nya, biar bisa dipake sama developer yang pake typescript.

    Mungkin untuk pengembangan selanjutnya, selain adanya dukungan typescript (minimal ada file berekstensi .d.ts yang terdefinisi di file package.json), bisa menambahkan provider menggunakan React Context API sama hooks.

    enhancement help wanted core 
    opened by achmadk 6
  • resizeMode for image styling and Width Height in string percentage

    resizeMode for image styling and Width Height in string percentage

    Excuse me, you can add resizeMode for image props when using styles and then add Width and Height in the form of percent strings like the example below: <Image source={Images.appLogo} style={{ width: "100%", height: "40%", resizeMode: "contain", }} />

    Thank you

    enhancement 
    opened by shirokun20 4
  • Responsive UI clarification

    Responsive UI clarification

    So I just want to clear things out in terms of responsive usage, because I have been facing some issues with responsiveness lately and I was thinking what I am doing wrong,

    Text Fonts: I have seen that you have added a list of responsive fonts with certain values corresponding to the usual ones, how can I add a specific font value in the custom theme that is responsive ?

    Images: I am not really sure how to make images responsive, if you can please show small example?

    Paddings/Margins: I have seen that you have added the scaleWidth and scaleHeight functions.

    Are the scaleWidth and scaleHeight used for responsive spacing only or can they be used in other cases which I am not aware of, if yes where?

    Also, if I am missing other tools or facilities that can help for responsiveness, please let us know.

    Thank you

    opened by KJ-GM 3
  • Having control like Width and Height

    Having control like Width and Height

    Can't control value for these: Top, Left, Right, Bottom, Z-Index, Padding, Margin, Font Size, Letter Spacing, Line Height, Border Width, Border Radius like Width and Height did.

    My intention is if I want to make top/left/right/bottom higher than 10 or -10, I can just use: apply("top-50") apply("-top-50")

    Or if I want to make margin 20, I can just use: apply("m-20") In the docs, I have to use this to make same result and have to add manually for non-existing value (like margin 22): apply("m-5")

    enhancement 
    opened by abdoerrahiem 2
  • directly `apply(color)` returning not a HEX code or rgba

    directly `apply(color)` returning not a HEX code or rgba

    I need to use white color which is, it should be apply("white") . But it not returning HEX code or rgba. It returning an object.

    {"0": "r", "1": "g", "10": "2", "11": "5", "12": "5", "13": ",", "14": " ", "15": "2", "16": "5", "17": "5", "18": ",", "19": " ", "2": "b", "20": "-", "21": "-", "22": "o", "23": "s", "24": "m", "25": "i", "26": "-", "27": "o", "28": "p", "29": "a", "3": "a", "30": "c", "31": "i", "32": "t", "33": "y", "34": ")", "4": "(", "5": "2", "6": "5", "7": "5", "8": ",", "9": " "}
    

    When i try apply("bg-white") it return {"backgroundColor": "rgba(255, 255, 255, 1)"}.

    bug core 
    opened by rizbud 1
  • [BUG] Dark theme NOT working with drawer navigation!

    [BUG] Dark theme NOT working with drawer navigation!

    Theming is not working as expected,

    I have two screens:

    First one changes where I use the state(rerenders because of the local state):

    this state that cause the rerender => const [theme, setTheme] = useState(appearanceHook.activeTheme)

    Second one dose not change at all(dose not rerender):

    Nothing is there except the styling with apply for two texts

    I tried to look for the problem in the library , I can see that you would rerender components that use apply using the onPatch by box state tree, but still it is not working here...

    I was able to fix this only by adding the observer for my second component which then acts as expected and changes colors accordingly

    This may be caused by the fact that the drawer navigator is used here, but that is still a problem, cause it is not working with drawer so its not compatible

    Here is small video that show the problem,

    https://user-images.githubusercontent.com/52489083/148435739-623352a0-c048-4479-a914-507a2dc2e16e.mp4

    opened by KJ-GM 1
  • width & height custom config scale

    width & height custom config scale

    Would be great to have config also for width and height similar like tailwindcss has. Also, it would be great if width and height could support percentage values. e.q. w-1/2

    opened by branislaav 1
  • Make OsmiCSX compatible for react native version < 0.64

    Make OsmiCSX compatible for react native version < 0.64

    Currently, we're using MobX-State-Tree to support our Dark Theme. But, it makes OsmiCSX doesn't compatible with the project that still using react-native version < 0.64.x

    So, I found an alternative way to make it compatible. Create global hooks and refactor dark theme system into it, if you have any questions feel free to

    enhancement core 
    opened by DeVoresyah 1
  • feat: width & height in string percentage

    feat: width & height in string percentage

    Adding support for percentage width & height in string. Issue #21

    Example Width

    Input

    apply("w%50")
    

    Output

    {
      width: "50%"
    }
    

    Example Height

    Input

    apply("h%50")
    

    Output

    {
      height: "50%"
    }
    
    enhancement 
    opened by deyusf 1
  • add option for maxWidth and maxHeight

    add option for maxWidth and maxHeight

    in react native StyleSheet there are maxWidth: number and maxHeight: number. before update we can define it in CustomTheme.js like this

    "max-w-200": { maxWidth: 200 },
    "max-h-200": { maxHeight: 200 }
    

    after update, there is no documentation to add maxWidth and maxHeight

    enhancement 
    opened by rizbud 1
Releases(v1.1.1)
  • v1.1.1(Oct 26, 2022)

  • v1.1.0(Oct 25, 2022)

  • v1.0.0-0(Jul 19, 2022)

  • v0.7.0-alpha.4(Nov 22, 2021)

    v0.7.0-alpha.4

    Fix

    • fix: text responsive (#42 by @DeVoresyah)

    Feature

    • feat: add percentage size (#43 by @DeVoresyah)
    • feat: add notch support for iOS (#44 by @DeVoresyah)

    Enhancement

    • enhancement: add type support for exported connect (#41 by @DeVoresyah)
    Source code(tar.gz)
    Source code(zip)
  • v0.7.0-alpha.3(Sep 25, 2021)

  • v0.7.0-alpha.2(Sep 12, 2021)

  • v0.7.0-alpha.1(Sep 12, 2021)

    Features

    • Enhancement: Add transform translate (#33 by @deyusf)
    • Enhancement: Add transform scale (#35 by @DeVoresyah)
    • Enhancement: Add transform rotate in (#36 by @DeVoresyah)
    • Enhancement: Add transform skew (#34 by @deyusf)
    Source code(tar.gz)
    Source code(zip)
  • 0.6.10(Jul 12, 2021)

    Bug Fixes

    • Issue Fixed Width: Fix fixed-width processor by changing the detection with regex (#20 by @ambrizals)
    • Issue Fixed Height: Fix fixed-height processor by changing the detection with regex (#20 by @ambrizals)

    Unit Testing

    • Update: Support unit testing for v0.6.x (#20 by @ambrizals)
    Source code(tar.gz)
    Source code(zip)
  • 0.6.9(Jul 10, 2021)

  • 0.6.4(Jun 27, 2021)

    Typescript Migration

    We finally migrate to typescript, we hope by this migration more people can contribute to this project. And also if you found something that not best practice in our typescript migration, don't hesitate to contribute 🥂

    Colors Improvement

    Extend Color Palettes

    Like TailwindCSS, we added more color palettes. Now every color has a 50 value. Example:

    apply("bg-red-50")
    

    Colors Opacity

    We also add new features like TailwindCSS, colors opacity. Now you can add color opacity for Background Color, Border Color, and Text Color Example:

    apply("bg-red-500 bg-opacity-50")
    apply("text-blue-500 text-opacity-25")
    

    Custom Theme Enhancement

    We created a new algorithm for Custom Theme. With this algorithm, you just need to define small pre-defined styles on your custom theme. Take a look at our new custom theme rules :

    {
      colors: {
        // custom colors
      },
      spacing: {
        // custom spacing
      },
      border: {
        width: {
    	// border width
        },
        radius: {
    	// border radius
        }
      },
      font: {
        family: {
    	// font family
        },
        size: {
    	// font size
        }
      }
    }
    

    And here's a usage example:

    {
      // this will automatically generate background color, border color, and text color
      colors: {
        primary: "#f56565",
        secondary: "rgba(107, 114, 128, --osmi-opacity)"
      },
      // this will automatically generate margin, padding, top, right, left, bottom
      spacing: {
        "30": 120
      },
      // generate border width and radius
      border: {
        width: {
          "30": 120
        },
        radius: {
          "super-xl": 120
        }
      },
      // generate font family & font size
      font: {
        family: {
          "font-regular": "OpenSans-Regular"
        },
        size: {
          "xxl": 40
        }
      }
    }
    

    Dark & Light Theme

    Finally, we can support the dark theme, you don't need to manually check if the mobile device is using a dark theme or not. We do it for you. You just need to tell us which color you want to use if the device is using a dark theme.

    By using prefix dark: and then following with the type of color (background/border/text) Example:

    apply("bg-white dark:gray-900")
    

    It means that the default/light background will use white and for the dark them it will use gray-900


    That's all for this new release, hope you all like it and enjoy it Cheers ~! 🥂

    Source code(tar.gz)
    Source code(zip)
  • 0.5.1(Nov 18, 2020)

    Changelog

    Responsive Implementation for Width, Height, and Font Size

    Actually, we already have a responsive module since 0.5.0. But we realize that the implementation of the responsive module still hard. Now we inject it into apply() and connect() ecosystem.

    Responsive Width based on Window Dimensions Width

    Example:

    import { apply } from 'osmicsx'
    
    const Button = props => {
      return (
        <View style={apply('w/90 bg-blue-500 self-center')}>
          <Text style={apply('text-white text/5 font-medium')}>Button</Text>
        </View>
      )
    }
    
    • w/90 will return 90% width of the window width
    • text/5 will return 5% of the window width

    Responsive Height based on Window Dimensions Height

    Example:

    import { apply } from 'osmicsx'
    
    const Button = props => {
      return (
        <View style={apply('w/50 h/50 bg-blue-500 self-center items-center justify-center')}>
          <Text style={apply('text-white text/5 font-medium text-center')}>Hello World!</Text>
        </View>
      )
    }
    
    • w/50 will return 50% width of the window width
    • h/50 will return 50% height of the window height
    • text/5 will return 5% of the window width

    Responsive Font Size based on Window Dimensions Height

    Example:

    import { apply } from 'osmicsx'
    
    const Title = props => {
      return (
        <Text style={apply('text-white text/8 font-medium text-center')}>Hello World!</Text>
      )
    }
    
    • text/8 will return 5% of the window width
    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Apr 28, 2020)

    Changelog

    Update algorithm for apply() method #4

    Previously, apply() method need to use multiple params. Now, we gonna migrate to space separator instead of array params.

    before

    apply("flex", "items-center", "justify-center")
    

    after

    apply("flex items-center justify-center")
    

    Update connect() method algorithm #5

    Related to #4 plan, connect() algorithm will also have an update. We also want to use space separator on connect() method. Maybe it will easier and more simple,

    before

    export default connect({
        container: [
            "flex",
            "items-center",
            "justify-center",
        ],
        title: [
            "text-lg",
            "text-center",
            "text-black",
            "font-bold"
        ]
    })
    

    after

    export default connect({
        container: "flex items-center justify-center",
        title: "text-lg text-center text-black font-bold"
    })
    

    Colors support in apply() method #6

    Adding support to call any colors with apply() method. So, you don't need to use any colors extractor again

    before

    colors["red-500"]
    

    after

    apply("red-500")
    

    Update scaling method & responsive text #7

    We've updated the text responsive in this version.

    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(Apr 9, 2020)

    Changelog

    Remove family() helper method

    family() helper method has been deprecated in this version. Please set up your custom font family on OsmiProvider

    Remove default helper method

    default helper method has been deprecated in this version. You cannot use import default anymore, please use apply() helper method instead.

    Update apply() helper method algorithm

    apply() helper method now has a new algorithm, instead of using array when call the method. Now you just need to write multiple namespaces on method params.

    before

    apply(["flex", "items-center", "justify-center"])
    

    after:

    apply("flex", "items-center", "justify-center")
    
    Source code(tar.gz)
    Source code(zip)
  • 0.3.3(Apr 5, 2020)

  • 0.3.0(Apr 1, 2020)

    Changelog

    Add new OsmiProvider

    OsmiProvider is a new method to config the custom style / theme like adding custom namespace. And also in OsmiProvider we simplify the styling concept. For more detail please check the Release Notes in Documentation

    Update Project Structure

    Just move some file to another folder

    Simplify Styling Concept

    We're more simplify the styling concept, for the templating style by removing the apply method. Now you just need to use multiple namespace in the array.

    deprecated some Method

    In this release, we've been added OsmiProvider which will replace several method like the default method and family method.

    Source code(tar.gz)
    Source code(zip)
  • 0.2.0(Mar 28, 2020)

    Changelog

    Fix Minor Bugs

    Some bugs in Border Style has been fixed.

    Refactor Flex Direction Namespace

    Here's the new namespace for the flex direction:

    • row
    • row-reverse
    • col
    • col-reverse

    Add more border style

    In the previous version, border style only have 4 kind. Now we expand more styling for the border style

    Update Official Documentation

    Official documentation of OsmiCSX has been updated and can be access on https://osmicsx.github.io/docs

    Source code(tar.gz)
    Source code(zip)
  • 0.1.3(Mar 27, 2020)

    Changelog

    • Fix Text Alignment bug
    • Update custom style method
    • Add new helper method family

    family() helper

    family() is a custom fontFamily style helper. You just need to put the font name from your project Example:

    apply([
        "text-white",
        "text-lg",
        family("Roboto-Medium")
    ])
    

    Update Custom Style Method

    Now for custom style you just need put an object in the apply() array instead of second params. Example:

    apply([
        "flex",
        "p-5",
        "rounded-lg",
        { backgroundColor: "red" } // custom style
    ])
    
    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Mar 27, 2020)

  • 0.1.1(Mar 27, 2020)

  • 0.1.0(Mar 27, 2020)

Owner
OsmiCSX
An utility style framework for React Native
OsmiCSX
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

Microsoft 15.2k Jan 5, 2023
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 120 Dec 21, 2022
Mobile-first, accessible components for React Native & Web to build a customizable Design System.

NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web. Website Documentation Ta

GeekyAnts 18.8k Jan 4, 2023
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

Teaset ???? 中文完整文档版 A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Installation

null 2.9k Jan 9, 2023
An "awesome" type curated list of how to use React Native and Meteor together

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Meteor Factory 153 Oct 23, 2022
Component library for React Native

first-born Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purp

99x 272 Dec 9, 2022
Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit Get Started Installation Follow these instructions to install React Native Elements! Usage Start using the comp

React Native Elements 23.1k Dec 31, 2022
Customizable set of components for React Native applications

Shoutem UI Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our c

Shoutem 4.8k Jan 5, 2023
react-native stateless functional UI components to get you up and running quickly

panza Panza is a collection of ui-components for react-native modelled after iOS. This library is currently undergoing a rewrite and will be updated s

null 258 Dec 16, 2022
Highly customizable and theming components for React Native

@blankapp/ui English | 简体中文 Table of Contents Introduction Features Quick Start Prerequisites Installation Run the new app Discussion License Created

Blankapp 106 Nov 10, 2022
UI & API Components Library for React Native

React Native Common Cross Platform React Native UI Toolkit & API Get Started Installation $ yarn add react-native-common or $ npm install react-native

Reza Ghorbani 63 Feb 14, 2022
React Native Components and APIs for the Web

React Native for Web "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation The do

Nicolas Gallagher 20.4k Jan 3, 2023
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 374 Dec 30, 2022
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 203 Dec 1, 2022
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 158 Dec 16, 2022
Lary - A utility-first style library for React Native on top of Dripsy

Lary A utility-first style library for React Native on top of Dripsy. If you are too lazy, use lary ;) Read the doc ;) const Title = laryfy < React.Co

null 21 Nov 9, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

Andre Rabold 95 Aug 30, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 267 Dec 28, 2022
A utility-first CSS-in-JS framework built for React 💅👩‍🎤⚡️

A utility-first CSS-in-JS framework built for React. npm install @xstyled/styled-components styled-components Docs See the documentation at xstyled.de

Greg Bergé 2.1k Jan 4, 2023
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Tone Row 7 Aug 29, 2022