callstack / react-native-paper Goto Github PK

MD Docs Link

MD Docs Link

Description

Elements like FAB and Snackbar render on a different plane above the content in z-axis. Many other elements such as bottom sheets, modals etc. need to be rendered above content too. It'll be useful to have a single Portal component to handle these cases.

To determine which elements exist on which plane, we need to refer to their elevation - https://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android

Use cases

• Elements with same elevation should be grouped in the same layer along the z-axis (e.g. FAB, Snackbar)
• Grouped elements should move together, e.g. when a Snackbar slides in from button, the FAB should move up

Detailed design

Props

The Portal component will accept two props, elevation and layered.

The elevation prop determines the elevation of the layer in the z-axis. There will be predefined elevations for internal use according to material design guidelines:

const Elevations = {
  DIALOG: 24, // Dialogs and Pickers
  DRAWER: 16, // Drawer, Bottom sheet
  FAB_RAISED: 12, // Floating action button (raised)
  CARD_RAISED: 8, // Card (raised), Button (raised), Bottom navigation, Menu
  FAB_RESTING: 6, // Floating action button, Snackbar
  APPBAR: 4, // Floating action button, Snackbar
  CARD_RESTING: 2, // Card, Button, Search bar
}

This is not the full list of elevations, rather the ones we need. Naming is up-to-debate. This will be internal for now, so we can change them later.

The layered prop is a boolean which determines whether the item is grouped with other layered items in a single layer. Grouped items are rendered under the same View and positioned using flexbox, so items will appear one below another. When the layered prop is false or not passed, the items will be positioned absolutely instead. Non-layered items will render below layered elements.

Usage

<Portal elevation={Elevations.FAB_RESTING} layered>
  <View style={styles.snackbar}>
    Hey! I'm a `Snackbar` :)
  </View>
</Portal>

Animations

The main motivation behind this is animations, i.e. when you show a new Snackbar, it should slide in from the bottom and move everything else up (FAB). The easiest way seems to be to handle the animation inside Portal. This is how it'll work:

1. On initial render, render everything normally.
2. When a new element is rendered later, render it offscreen and measure the height ({ position: 'absolute', left: 0, right: 0, bottom: -9999 }).
3. Now render the element normally, but also apply a translateY of height to all the elements. This should have no visual difference.
4. Animate the translateY to 0 so everything moves up.
5. When the element is removed, animate the translateY to height so everything moves down.
6. Now remove that element and reset the translateY to 0
7. If new elements are added/removed mid-transition, it'll wait till the transition is complete to reflect the changes.

This approach assumes that all the elements in a layer are going to use the same slide up/slide down animations for appearing/disappearing.

Cross-platform touchable component that implements ripple effect. In Android we will use TouchbaleNativeFeedback in IOS we need to bridge a native library or implementation

Our current example is good to see all the components we build but I think it would be nice to create an extra more complex example where all material patterns can shine.

To have consistent styling on Android and iOS we need Layer component (have a better name?) which takes an elevation prop and renders a View with correct shadows on both Android and iOS.

We'll need this before working on any component with shadows.

I just imported from react-native-paper and this happened:

<path-to-project>/node_modules/react-native-paper/src/index.js: Unexpected token (6:9) at index.js:6:9

Seems like this line is the culprit:

export * as Colors from './styles/colors';

I fixed it by adding installing babel-plugin-transform-export-extensions and adding transform-export-extensions babel plugin in my .babelrc.

Shouldn't this plugin be added as default?

Versions

1. react-native: 0.37.0.
2. react-native-paper: 0.0.2 (Latest master also has the issue)

MD Docs Link

MD Docs Link
And we need to implement FAB Speed dials as people always ask about them Angular Reference

MD Docs Link

MD Docs Link
We don't need implement every behaviour or component in this link

MD Docs Link
We will need an IOS developer for this one to be implemented on IOS

We'll add a property called dark: boolean in the theme object to signal that it's dark theme so component's can adjust their appearance based on it.

The guidelines have things like different opacity based on if the theme is light or dark, so we need this property. Almost all components need to be changed to support dark theme.

MD Docs Link

MD Docs Link

The component responsible for providing all the elements with themes' data like color and typography...etc

https://material.google.com/components/lists.html#

Drawer's code could be extracted out to this component.

MD Docs Link

MD Docs Reference

• Integrate prettier
• Adapt eslint config file to prettier
• Change dev workflow

Here's my code,

<Card>
  <Card.Content>
    <Title>The Ocean<Title>
    <Paragraph>Singin' in the sunshine, laughing in the rain.</Paragraph>
  </Card.Content>
</Card>

Doesn't get displayed. Went in the code, saw that both the wrapping TouchableWithoutFeedback and theView inside, has flex: 1. flex: 1 inside TouchableWithoutFeedback doesn't display content.

I removed flex: 1 for the view inside and sure enough, everything started working. What do you guys think?

MD Docs Link
For this component, we need to have different components for items and groups of items we may implement an API similar to the Android native in android support library link

MD Docs Link
I don't know if we should implement this in JS or to look for a library in IOS and use the default Android one

MD Docs Link
Top tabs from https://github.com/react-native-community/react-native-tab-view

Angular Material Docs Link

MD Docs Link
We will also need to load Roboto typeface for IOS

Material Design Docs Link

Material Design Docs Link

MD Docs Link

MD Docs Link

The contributing guide as well as the current files use and mention propTypes. Is that going to be our preferred approach or shall we favour Flow types instead?

• Improve the design @satya164
• Include examples in the description
• Include screenshots
• Preserve scrolling when selecting different option

These are potential improvements to the docs generation process

• Show info regarding required/optional props
• Support markdown in documentation
• Add ability to document and link to a type definition, e.g. Theme
• Add quick search in sidebar
• Sections with headers
• Support mobile layout

MD Docs Link

MD Docs Link

MD Docs Link

We should write a babel plugin to change import statements from

import { Button, Divider } from 'react-native-paper';

to

import Button from 'react-native-paper/src/components/Button';
import Divider from 'react-native-paper/src/components/Divider';

This will help to avoid importing components we don't use and will make the bundle smaller.

Material Design Docs Link

TODO:

• Ability to customize text color
• Disabled button
• Button with icon
• Button with loading indicator

A responsive GridView is extremely useful in apps.

We will use react-native-vector-icons but this component needs to implement touchable component that has ripple effects cross-platform
and It needs to have Tooltips
MD Docs Link

An app that showcases the library

MD Docs Link

Specially react-native, flow-bin, etc

MD Docs Link
We can use this library for inspiration

Remove the drawer component and export its content, in order to maintain compatibility with react-navigation and to make it work nicely with any drawer library

Continuation of #4.

• Position in z-axis
• Animation
• etc