• Installation
• Synopsis
• Getting Started
• Component Styles
• License

Installation

Use your preferred package manager for installation.

npm i --save react-native-prism-components
yarn add react-native-prism-components

Synopsis

Component library for Prism using the namespace prism.

This library extends the Prism Primitives library, re-exporting all the underlying primitive components so you have a clear upgrade path if you want to use this library.

import {
  View,
  Label,
  Heading,
  Panel
} from 'react-native-prism-components'

To view the components in action clone the repo, install dependencies and run the RN app.

Getting Started

Configure your application (see the Prism Getting Started guide) and then you can import the components from react-native-prism-components to use them in your application.

Component Styles

These are the component styles bundled with the library for reference, override them in your application styles.

export default {
  colors: {
    cream: '#fdfbdf',
    disabled: '#9e9e9e',
    background: 'steelblue',
    backgroundLight: 'powderblue',
    backgroundDark: '#336699',
    tint: '#5affda'
  },
  fonts: {
    regular: 'WorkSans-Regular',
    medium: 'WorkSans-Medium'
  },
  styles: ({colors, fonts}) => {
    return {
      'View': {
        backgroundColor: 'transparent'
      },
      'SafeAreaView': {
        backgroundColor: 'transparent',
        flex: 1
      },
      'Text': {
        fontSize: 16,
        color: colors.cream
      },
      'TextInput': {
        fontSize: 16,
        color: colors.cream
      },
      'prism|Layout': {
        flex: 1
      },
      'prism|Label': {
        fontFamily: fonts.regular,
        fontSize: 18,
        //color: colors.cream
      },
      'prism|Paragraph': {},
      'prism|ScrollPane': {
        flex: 1,
        //padding: 20
      },
      'prism|Panel header': {
        backgroundColor: '#336699',
        paddingVertical: 10,
        paddingHorizontal: 20,
        textTransform: 'uppercase'
      },
      'prism|Panel body': {
        backgroundColor: '#335599',
        padding: 20
      },
      'prism|BulletList': {
        color: colors.cream
      },
      'prism|BulletList bullet': {
        marginRight: 5
      },

      'prism|BackNavigationHeader': {
        padding: 12,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: colors.backgroundDark
      },
      'prism|BackNavigation': {
        flex: 0
      },
      'prism|BackLink': {
        flexDirection: 'row'
      },
      'prism|BackLink image': {
        marginRight: 15,
        tintColor: colors.cream
      },
      'prism|BackLink label': {
        fontFamily: fonts.regular,
        // NOTE: must reset the font weight
        fontWeight: 'normal',
        color: colors.cream,
        fontSize: 18,
      },

      'prism|Notice': {
        padding: 10,
        borderRadius: 2,
        backgroundColor: '#336699',
      },
      'prism|Notice label': {
        color: colors.cream,
        fontSize: 15
      },
      'prism|Notice:error': {
        backgroundColor: 'red',
      },
      'prism|Notice label:error': {
        color: colors.cream
      },
      'prism|TouchButton': {
        // NOTE: must use opacity in backgroundColor
        backgroundColor: 'rgba(70, 130, 180, 1.0)',
        padding: 12,
        borderRadius: 4,
        // For flex layouts and keyboard view we don't
        // want our buttons squashed
        minHeight: 48
      },
      'prism|TouchButton label': {
        fontSize: 18,
        textAlign: 'center'
      },
      'prism|TouchButton:disabled': {
        // NOTE: must use opacity in backgroundColor
        backgroundColor: 'rgba(70, 130, 180, 0.2)'
      },
      'prism|List': {},
      'prism|ListItem': {
        backgroundColor: colors.backgroundDark,
        //textAlign: 'left',
        borderRadius: 0,
        paddingHorizontal: 12,
        minHeight: 45
      },
      'prism|ListItem label': {
        color: colors.cream,
        textAlign: 'left'
      },
      'prism|TextArea': {
        textAlignVertical: 'top',
        height: 100,
        paddingHorizontal: 10,
        placeholderColor: colors.cream,
        backgroundColor: 'rgba(51, 102, 153, 0.75)',
        borderColor: 'rgba(255, 255, 255, 0.5)',
        //borderRadius: 6,
        borderWidth: 1
      },
      'prism|TextArea:disabled': {
        placeholderColor: colors.disabled,
        color: colors.disabled
      },
      'prism|Input': {
        fontSize: 16,
        color: colors.cream,
        //borderRadius: 6,
        borderWidth: 1,
        backgroundColor: 'rgba(51, 102, 153, 0.75)',
        borderColor: 'rgba(255, 255, 255, 0.5)',
        placeholderColor: colors.cream,
        paddingVertical: 5,
        paddingHorizontal: 10
      },
      'prism|Input:disabled': {
        placeholderColor: colors.disabled,
        color: colors.disabled
      },
      'prism|NumberStack': {
        flex: 1
      },
      'prism|NumberStack title': {
        flex: 0
      },
      'prism|NumberStack number': {
        flex: 0
      },

      'prism|NumberStack title:small': {
        fontSize: 16
      },
      'prism|NumberStack number:small': {
        fontSize: 40
      },
      'prism|NumberStack title:medium': {
        fontSize: 20
      },
      'prism|NumberStack number:medium': {
        fontSize: 55
      },
      'prism|NumberStack title:large': {
        fontSize: 24
      },
      'prism|NumberStack number:large': {
        fontSize: 70
      },
      'prism|Activity': {
        tintColor: colors.cream,
        flex: 0
      },
      'prism|Activity activityIndicator': {
        flex: 0
      },
      'prism|Picture activity': {
        // Can overwrite invariant for child component
        //tintColor: 'blue'
      },
      'prism|Picture image': {
        position: 'absolute'
      },
      'prism|Frame': {
        flex: 1
      },
      bold: {
        fontFamily: fonts.medium
      },
    }
  }
}

License

MIT

Created by mkdoc on May 16, 2019