Layout

A collection of components that can be useful to create layouts. Utility prop base component to copy/paste.

Layout.tsx

import { View } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Box = createComponent(View);

const Center = createComponent(View, {
  alignItems: 'center',
  justifyContent: 'center'
});

const Column = createComponent(View, {
  flexDirection: 'column'
})

const Row = createComponent(View, {
  flexDirection: 'row'
})

---

Box

A simple View component, like a div.

Example usage:

  <Box
    marginTop={12}
    _light={{backgroundColor: '#eee'}}
    _dark={{backgroundColor: '#111'}}
  >
    <Content />
  </Box>

---

Box.tsx

import { View } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Box = createComponent(View);

---

Center

Example usage:

  <Center>
    <Content />
  </Box>

---

Center.tsx

import { View } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Center = createComponent(View, {
  alignItems: 'center',
  justifyContent: 'center'
});

---