@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

1import {configureStyle, NamedStyles} from '@truefit/bach-rn-elements';
2
3// styles
4const sharedStyle: NamedStyles = {
5  container: {
6    flex: 1,
7    justifyContent: 'flex-start',
8    alignItems: 'flex-start',
9  },
10
11  centerContent: {
12    justifyContent: 'center',
13    alignItems: 'center',
14  },
15};
16
17#### Javascript
18
19// configure
20configureStyle({sharedStyle});

1import {configureStyle} from '@truefit/bach-rn-elements';
2
3// styles
4const sharedStyle = {
5  container: {
6    flex: 1,
7    justifyContent: 'flex-start',
8    alignItems: 'flex-start',
9  },
10
11  centerContent: {
12    justifyContent: 'center',
13    alignItems: 'center',
14  },
15};
16
17// configure
18configureStyle({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

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {compose, withState, withCallback, StringKeyMap} from '@truefit/bach';
4import {withStyles, WithTheme} from '@truefit/bach-rn-elements';
5
6import {View, StyleProp, ViewStyle, TextStyle} from 'react-native';
7import {Text} from 'react-native-elements';
8
9type Props = {
10  styles: {
11    container: StyleProp<ViewStyle>;
12    title: StyleProp<TextStyle>;
13  };
14} & WithTheme;
15
16const Landing = ({styles}: Props) => {
17  return (
18    <View style={styles.centerContent}>
19      <Text h1 style={styles.title}>
20        Welcome to the React Native Playground
21      </Text>
22    </View>
23  );
24};
25
26const styles = ({theme}: Props): NamedStyles => ({
27  title: {
28    textAlign: 'center',
29    color: theme.colors.primary,
30  },
31});
32
33export default compose(
34  withStyles(styles),
35)(Landing);

Javascript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withStyles} from '@truefit/bach-rn-elements';
4import {Text} from 'react-native-elements';
5
6import Layout from './layout';
7
8const Landing = ({styles}) => {
9  return (
10    <Layout style={styles.centerContent} full>
11      <Text h1 style={styles.title}>
12        Welcome to the React Native Playground
13      </Text>
14    </Layout>
15  );
16};
17
18export default compose(
19  withStyles(({theme}) => {
20    return {
21      title: {
22        textAlign: 'center',
23        color: theme.colors.primary,
24      },
25    };
26  }),
27)(Landing);