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.

input

    <Input placeholder="Username" p={10} focusBorderColor="blue.500"
    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />

Theme support

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

Colors Size

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',
            },
              Blue: {
                50: '#e3eeff',
                100: '#b6cdfe',
                200: '#88abf7',
                300: '#5b8af1',
                400: '#2d69ec',
                500: '#134fd2',
                600: '#0b3da4',
                700: '#052c77',
                800: '#001a4a',
                900: '#00091e',
            }

        }
      }

Chakra UI and React Native components

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

Text

    <Text fontSize="xs" style={{ color: 'blue', padding: '10px',
    fontWeight: 'bold',textDecoration: 'underline' }}>Text size: xs</Text>
    

Essayez-le en direct !

Découvrez les composants en direct avec Expo. Expérimentez les fonctionnalités interactives pour une expérience immersive de développement.