Shadow

Shadow is a utility to add cross platform shadows.

import { shadow } from 'material-bread';

Shadows are available from 0-24, each number recreates a shadow on the given platform.

Live Editing

class Demo extends React.Component {
    constructor(props) {
      super(props)

    }
    render() {
      return (
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <View
            style={{
              height: 100,
              width: 100,
              backgroundColor: 'white',
              borderRadius: 100,
              ...shadow(4),
            }}
          />
          <View
            style={{
              height: 50,
              width: 50,
              backgroundColor: '#E91E63',
              marginLeft: 20,
              ...shadow(16),
            }}
          />
        </View>
      );
    }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { shadow } from 'material-bread';

const styles = {
  padding: 8,
  height: 100,
  width: 100,
  marginTop: 20,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'white',
  borderRadius: 100,
  ...shadow(10)
};

class Demo extends React.Component {
  constructor(props) {
    super(props)

  }
  render() {
    return (
      <View
        style={styles}
      />
    );
  }
}

Shadow

Component #

Usage #