@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);