How to customise styles & components

In order to customise your app you need to go a little deeper and dive into the code renders and styles each of the components and elements.

Customise Your App

Components can be easily customised by following the guidelines below:

How to customise component styling

Step 1: Find your component by following the component tree: Screen - Child component - Grandchild component , etc. (Typically there are no more than three levels). Inside your code editor, click on the component name while pressing command (mac) / ctrl (windows) on your keyboard.

Step 2: Each group of components (buttons / charts / lists / views / etc.) share one styles.js file, which is imported somewhere at the top of each component file...

import { commentListItemStyles as styles } from './styles'; 

...and applied inside the style prop on a component inside the parent component's return statement:

//... SOMEWHERE INSIDE RETURN STATEMENT

<View
  style={styles.descriptionView}
  onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
>
  <Text
    text={item.description}
    fontFamily={BODY_FONT}
    style={styles.comment}
  />
</View>

//... REST OF COMPONENT

Step 3: Change the style properties, and saving your changes (command / ctrl S) will immediately render the updated style in your iOS simulator / android emulator / expo client.

export const commentListItemStyles = EStyleSheet.create({
  descriptionView: {
    height: 45,
  },
  comment: {
    width: VIEW_WIDTH - 64 - 82,
    marginTop: 25,
    marginLeft: 40,
    marginRight: 25,
    opacity: 0.8,
    fontSize: 14,
  },
  border: {
    width: VIEW_WIDTH - 40 - 82,
    marginLeft: 40,
    marginTop: 12,
    height: 1,
    backgroundColor: '$black',
    opacity: 0.2,
  },
});

How to add new components

Components can be easily extended by adding components. These are the steps:

Step 1: Import the component at the top of the file of the component that you are going to modify...

import { CustomText as Text, BODY_FONT } from '../text/CustomText';

...but make sure that you are importing from the correct folder:

• Same folder: import ... from './text/CustomText';

• Different folder same level: import ... from '../text/CustomText';

• Different folder one level up: import ... from '../../text/CustomText';

Step 2: Place the imported component inside the parent component's return statement...

//... SOMEWHERE INSIDE RETURN STATEMENT

<View
  style={styles.descriptionView}
  onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
>
  <Text
    text={item.title}
    fontFamily={TITLE_FONT}
    style={styles.commentTitle}
  />
  <Text
    text={item.description}
    fontFamily={BODY_FONT}
    style={styles.commentDescription}
  />
</View>

//... REST OF COMPONENT

...while keeping the following rules in mind:

• A component is always wrapped inside angle brackets like this: <YourNewComponent /> or <YourNewComponent><ChildComponent /></YourNewComponent>

• A component can have required props as well as optional props. Which props are required and which are optional is declared in the components PropTypes, which can be found at the bottom of a component's file:

// CUSTOMTEXT HAS 1 REQUIRED PROP AND 3 OPTIONAL PROPS
// NOTE THAT PROPS MUST COMPLY TO SPECIFIED TYPES, SUCH AS 'STRING'
// OR 'NUMBER'
CustomText.propTypes = {
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  fontFamily: PropTypes.string.isRequired,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  numberOfLines: PropTypes.number,
};

Be aware that removing components from your project is possible - if you know what you're doing - but could result in serious complications and could potentially break the application.