react-native-elements

Installation

npm

npm install --save @pija-ab/react-native-elements

yarn

yarn add @pija-ab/react-native-elements

Forewords

This is a repostitory for themeing your react-native app and easily structure your project with simple building blocks.

Getting started

To get started using this repostitory you need to configure a theme folder with the basic structure that you're going to be usign.

First of all you should make a folder structure that looks like something like this.

ProjectRoot
    └──theme
        ├── colors.js
        ├── dimensions.js
        ├── fontFiles.js
        ├── fonts.js
        └── index.js

Define your theme in the index.js file:

import { Theme, font, type ThemeSpec, createStyleSheets } from '@pija-ab/react-native-elements';

import colors from './colors';
import dimensions from './dimensions';
import fonts from './fonts';
import getFontName from './fontFiles';

const themeSpec: ThemeSpec = {
  name: 'default',
  colors,
  dimensions,
  fonts,
  getFontName,
};
themeSpec.font = props => font(themeSpec, props);

const theme = new Theme(themeSpec);
theme.addStyleSheets(createStyleSheets(themeSpec));

export default theme;

color.js file should look something like this:

export default {
  primary: '#3ac4a1',
  primaryLabel: '#ffffff',
  secondary: '#fceb49',
  secondaryLabel: '#2a3532',
  text: '#2a3532',
  secondaryText: '#999999',
  background: '#ffffff',
  secondaryBackground: '#f2f2f2',
  border: '#d9d9d9',
};

dimensions.js file should look something like this:

export default {
  /** Core dimension parameter, controls the overall scale of Element components */
  baseSize: 20,
};

fontFiles.js file should look something like this:

import fonts from './fonts';

const primaryFont = fonts.primary.fontFamily;
const primaryFont = fonts.primary.fontFamily;

const fontFiles = {
  [fonts.primary.fontFamily]: {
    '200': {
      normal: `${primaryFont}-ExtraLight`,
      italic: `${primaryFont}-ExtraLightItalic`,
    },
    '300': {
      normal: `${primaryFont}-Light`,
      italic: `${primaryFont}-LightItalic`,
    },
    '400': {
      normal: `${primaryFont}-Regular`,
      italic: `${primaryFont}-Italic`,
    },
    '500': {
      normal: `${primaryFont}-Medium`,
      italic: `${primaryFont}-MediumItalic`,
    },
    '600': {
      normal: `${primaryFont}-SemiBold`,
      italic: `${primaryFont}-SemiBoldItalic`,
    },
    '700': {
      normal: `${primaryFont}-Bold`,
      italic: `${primaryFont}-BoldItalic`,
    },
    '800': {
      normal: `${primaryFont}-ExtraBold`,
      italic: `${primaryFont}-ExtraBoldItalic`,
    },
    '900': {
      normal: `${primaryFont}-Black`,
      italic: `${primaryFont}-BlackItalic`,
    },
  },
};

export default (fontFamily, fontWeight, fontStyle) => fontFiles[fontFamily][fontWeight][fontStyle];

and font.js file should look something like this:

import { Platform } from 'react-native';

export default {
  primary: {
    fontFamily: 'Verdana',
  },
  secondary: {
  },
};

After this has been done you should be good to go and use all of the building blocks in the theme.

Basic building blocks:

Common props

Some common props that is available on all of the components

| Prop | Description | Type | |-------------|-------------------------------|-----------------------------------------------------------------------| | style | Basic inline style | style | | className | Sets class for your component | string |

• Button
• Container
• Grid
• Divider
• Header
• Link
• Loader
• LoadingIndicator
• Message
• Paragraph
• FormInput
• SceneContainer

Button

| Prop | Description | Type | |-------------|----------------------------------------------------------------------|-------------------------------------------------------------------------------| | variant | String that should be one of the defined colors in the color.js file | string | | onPress | Assigning button trigger | function | | loading | Shows a loading indicator in the middle of the button | boolean | | disabled | Disables the button | boolean | | textStyle | Basic inline styling | text style |

Button will take strings and React components as children, any string will be wrapped in a text component and the rest will just be rendered as is.

import { Button } from '@pija-ab/react-native-elements';
...
<Button
  variant="primary"
  onPress={() => console.log('button has been triggered')}
>
String
</Button>
...

...
<Button
  variant="primary"
  onPress={() => console.log('button has been triggered')}
>
  <View>
    <Text>String</Text>
  </View>
</Button>
...

Container

| Prop | Description | Type | |---------------------|-------------------------------------------------------------------------------------|-----------| | scrollable | Makes it scrollable | boolean | | keyboardAware | Automatically scrolls to focused area when keyboard appears | boolean | | verticallyAligned | Grows the container component and aligns content inside the component in the center | boolean |

Basic usage of the Container component is wrapping the content in your components

import { Container } from '@pija-ab/react-native-elements';
...
render(
  <Container>
    <Text>This is some content</Text>
  </Container>
);

Container also have a child component for making the content ignore the bounds of the container, such as menu items reaching the edges of the screen, or a header image ignoring the top-left-right margins. It can be used by having a <Container.Fill> component

<Container>
  <Container.Fill>
    <Text>This content will ignore the bounds of the container component</Text>
  </Container.Fill>
</Container>

Grid

| Prop | Description | Type | |------------------|----------------------------------------------------------------------------------------------------|----------| | size | Takes one of either collapsed small medium large extraLarge | string | | flexWrap | Takes one of either wrap nowrap | string | | alignItems | Takes one of either flex-start flex-end center stretch baseline | string | | alignContent | Takes one of either flex-start flex-end center stretch space-between space-around | string | | justifyContent | Takes one of either flex-start flex-end center space-between space-around space-evenly | string |

Grid.Cell props

| Prop | Description | Type | |--------------|-------------------------------------------------------------------------------------------------|----------------------| | size | Takes one of either collapsed small medium large extraLarge | string | | column | Takes one of either 1 2 3 4 5 6 7 8 9 10 11 12 | number | | flexGrow | specifies how much of the remaining space in the flex container should be assigned to the item | number | | flexShrink | If the size of all flex items is larger than the container items shrink to fit | number | | flexBasis | Sets the initial main size of an item | string or number | | alignSelf | Takes one of either auto flex-start flex-end center stretch baseline | string |

Basic usage of the cell component is that you have 1 <Grid> wrapping the <Grid.Cell> components.

import { Grid } from '@pija-ab/react-native-elements';
...
<Grid>
  <Grid.Cell>
    <Text>This is cell 1</Text>
  </Grid.Cell>
  <Grid.Cell>
    <Text>This is cell 2</Text>
  </Grid.Cell>
</Grid>
...

Using columns, full with of the container is 12.

import { Grid } from '@pija-ab/react-native-elements';
...
<Grid>
  <Grid.Cell column={4}>
    <Text>This is cell 1</Text>
  </Grid.Cell>
  <Grid.Cell column={8}>
    <Text>This is cell 2</Text>
  </Grid.Cell>
</Grid>
...

Divider

| Prop | Description | Type | |------------|-----------------------------------------------------------------------------------------------|-------------| | children | Takes either a Text or View as a child and puts it's content in the center of the divider | component | | fitted | Removes the margin on the bottom and the top of the divider | boolean |

Basic usage of the devider:

import { Divider } from '@pija-ab/react-native-elements';
...
<Divider />
...

import { Divider } from '@pija-ab/react-native-elements';
...
<Divider fitted>
  <Text>This is some content</Text>
</Divider>
...

Header

| Prop | Description | Type | |----------------|---------------------------------------------------|-----------| | as | Takes one of either h1 h2 h3 h4 h5 h6 | string | | sub | Creates a sub header | boolean | | inverted | Changes the color of the header | boolean | | marginBottom | Adds margin under the header | boolean | | textAlign | Takes one of either left center right | string |

Basic usage:

import { Header } from '@pija-ab/react-native-elements';
...
<Header
  as="h2"
  textAlign="center"
>
This is header 2
</Header>
<Header
  as="h2"
  textAlign="center"
  sub
  marginBottom
>
This is header 2 sub
</Header>
...

Link

| Prop | Description | Type | |-------------------|-------------------------------------------------------|------------| | onPress | Assigning link trigger | function | | loading | Shows a loading indicator in the middle of the button | boolean | | disabled | Disables the link | boolean | | textAlign | Takes one of either left center right | string | | buttonUnderline | If there should be an underline | boolean | | underline | If there should be an underline | boolean |

Basic usage of the Link component

import { Link } from '@pija-ab/react-native-elements';

<Link onPress={console.log('trigger')} underline>Test Link</Link>

Loader

This is just a basic loader that should align in the middle of the contianing view.

import { Loader } from '@pija-ab/react-native-elements';
...
<Loader />
...

LoadingIndicator

| Prop | Description | Type | |------------|----------------------------------------------|-----------| | Loading | Will be shown if loading is true | boolean | | size | Should be either button or medium | string | | nonBasic | Will show another color scheme of the loader | boolean | | absolute | Makes the loader absolute positioned | boolean | | centered | Centers the loader in it's current container | boolean |

Basic usage:

import { LoadingIndicator } from '@pija-ab/react-native-elements';
...
<LoadingIndicator loading nonBasic centered />
...

Message

| Prop | Description | Type | |-----------|---------------------------|----------| | variant | Should be error or null | string |

Some basic usage of the error

import { Message } from '@pija-ab/react-native-elements';
...
<Message variant="error">
  Error message
</Message>
...

paragraph

| Prop | Description | Type | |-----------------|------------------------------------------------|-----------| | textAlign | Takes one of either left center right | string | | paddingBefore | If it should have padding before the paragraph | boolean | | paddingAfter | If it should have padding after the paragraph | boolean |

import { Message } from '@pija-ab/react-native-elements';
...
<Paragraph>
 This is some paragraph text
</Paragraph>
...

FormInput

TODO: Document FormInput.

SceneContainer

Depricated. Use <Container className="scene"> instead.