React Native Ficus UI - Documentaion

Style props

React Native Ficus UI allows you to pass all the style properties as component props. You don't need to create huge StyleSheet objects.

Theme support

You can edit the components sizes, colors, borders, ... with your own theme.

Chakra UI & React Native

React Native Ficus UI provides the support of style props on React Native components and some components implemented as from Chakra UI(with same API).

Style props

You can use style props to directly apply specific styles to components, simplifying code and improving readability

Box
<Box
  h={40}
  w={40}
  mr="sm"
  bg="green.500"
/>

Theme support

In Ficus UI, customization options include modifying theme tokens like colors and font sizes and adjusting component styles such as base styles and sizes, and customizing global styles for universal application

Colors
const theme = {
  colors: {
    violet: {
      50: '#f0eaff',
      100: '#d1c1f4',
      200: '#b199e7',
      300: '#9171dc',
      400: '#7248d0',
      500: '#592fb7',
      600: '#45248f',
      700: '#311968',
      800: '#1e0f40',
      900: '#0c031b',
    },
    bleu: {
      50: '#e3eeff',
      100: '#b6cdfe',
      200: '#88abf7',
      300: '#5b8af1',
      400: '#2d69ec',
      500: '#134fd2',
      600: '#0b3da4',
      700: '#052c77',
      800: '#001a4a',
      900: '#00091e',
    }
  }
}

Responsive styles

Ficus UI supports responsive styles out of the box. You can pass directly the prop value or an object containing differents values for each screen size

Text
export default function App() {
  return (
    <ThemeProvider>
      <SafeAreaBox>
        <Box h="100%" bg={{ base: "blue.500", sm: "red.600" }} />
      </SafeAreaBox>
    </ThemeProvider>
  );
}

Test it out live!

Discover components live with Expo. Experiment with interactive features for an immersive development experience