Paper

Material Design has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows. - Material Docs

import { Paper } from 'material-bread';

The Paper copmonent is a base component for displaying surfaces with shadow.

Live Editing

class PaperDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>
        <Paper
            style={{
              height: 100,
              width: 100,
              alignItems: 'center',
            }}
            shadow={2}
          />
          <Paper
            style={{
              height: 100,
              width: 100,
            }}
            shadow={4}
          />
          <Paper
            style={{
              height: 100,
              width: 100,
            }}
            shadow={8}
          />
      </View>
    );
  }
}

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

class PaperDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
     <View style={{flexDirection: 'row'}}>
      <Paper
          style={{
            padding: 8,
            height: 100,
            width: 100,
            alignItems: 'center',
          }}
          elevation={2}
        />
        <Paper
          style={{
            padding: 8,
            height: 100,
            width: 100,
            marginTop: 30,
            alignItems: 'center',
            justifyContent: 'center',
          }}
          elevation={4}
        />
        <Paper
          style={{
            padding: 8,
            height: 100,
            width: 100,
            marginTop: 30,
            alignItems: 'center',
            justifyContent: 'center',
          }}
          elevation={8}
        />
     </View>
    );
  }
}

Name

Description

Type

Default

radius

Border Radius for paper

number

shadow

Sets shadow on all platforms

number

style

Styles root element

object

Paper

Component #

Usage #

Props #