Skip to content

TrueFit/bach-rn-elements

Repository files navigation

@truefit/bach-rn-elements

This library allows components composed with @truefit/bach to build their react native apps using react-native-elements.

Installation

npm install @truefit/bach-rn-elements react-native-elements react-native-vector-icons

or

yarn add @truefit/bach-rn-elements react-native-elements react-native-vector-icons

Setup

configureStyle

This function allows you to provide your configuration shared styles. It is not required, but can prove helpful when using a design system.

Parameter Type Description
sharedStyle js object the styles that should be available to every component

Example

Typescript

import {configureStyle, NamedStyles} from '@truefit/bach-rn-elements';

// styles
const sharedStyle: NamedStyles = {
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },

  centerContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
};

#### Javascript

// configure
configureStyle({sharedStyle});
import {configureStyle} from '@truefit/bach-rn-elements';

// styles
const sharedStyle = {
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },

  centerContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
};

// configure
configureStyle({sharedStyle});

Enhancers

withStyles

Allows you to specify component specific styles as well as access the shared style defined in configureStyle.

Helper Signature

Parameter Type Description
componentStyles js object or js func component specific styles or a function that returns the component specific styles. if a function is specified, it is provided with the current props.
conditions array (optional) like other enhances such as withState, this controls how often the componentStyles value is re-evaluted

Example

Typescript

import React from 'react';
import {compose} from '@truefit/bach';
import {compose, withState, withCallback, StringKeyMap} from '@truefit/bach';
import {withStyles, WithTheme} from '@truefit/bach-rn-elements';

import {View, StyleProp, ViewStyle, TextStyle} from 'react-native';
import {Text} from 'react-native-elements';

type Props = {
  styles: {
    container: StyleProp<ViewStyle>;
    title: StyleProp<TextStyle>;
  };
} & WithTheme;

const Landing = ({styles}: Props) => {
  return (
    <View style={styles.centerContent}>
      <Text h1 style={styles.title}>
        Welcome to the React Native Playground
      </Text>
    </View>
  );
};

const styles = ({theme}: Props): NamedStyles => ({
  title: {
    textAlign: 'center',
    color: theme.colors.primary,
  },
});

export default compose(
  withStyles(styles),
)(Landing);

Javascript

import React from 'react';
import {compose} from '@truefit/bach';
import {withStyles} from '@truefit/bach-rn-elements';
import {Text} from 'react-native-elements';

import Layout from './layout';

const Landing = ({styles}) => {
  return (
    <Layout style={styles.centerContent} full>
      <Text h1 style={styles.title}>
        Welcome to the React Native Playground
      </Text>
    </Layout>
  );
};

export default compose(
  withStyles(({theme}) => {
    return {
      title: {
        textAlign: 'center',
        color: theme.colors.primary,
      },
    };
  }),
)(Landing);