Example of a banner using LeafUI

ExampleBanner.js

import React from 'react';
import theme from 'leaf-ui/theme/native';
import Text from 'leaf-ui/Text/native';
import Card from 'leaf-ui/Card/native';
import Space from 'leaf-ui/Space/native';
import Flex from 'leaf-ui/Flex/native';
import { getIcon } from '../../utils/Icon';

class ExampleBanner extends React.Component {
  state = {};

  render() {
    const bannerText = "This is a testy test";

    return (
      <Space padding={[2]} margin={[1, 1, 0, 1]}>
        {/* Paddings and Margins are all multiples of 8. With scaling, a little more than depending on the device. :)*/}
        <Flex flexDirection="row" alignItems="center">
          <Card backgroundColor="yellowLighter" borderColor="yellow">
            {getIcon('special_icon', theme.color.greyDark)}
            <Space margin={[0, 1]}>
              <Text>{bannerText}</Text> 
              {/* Font size is also scaled! */}
            </Space>
          </Card>
        </Flex>
      </Space>
    );
  }
}

export default ExampleBanner;