react-native-elements

A react native framework for building Chelsea Apps cross platform mobile applications.

Getting started

This library should be already part of the react-native-starter, our starting point for mobile applications, but in case it isn't simply run:

npm install @chelseaapps/react-native-elements

Once the package is installed, make sure it's using the latest version and inside the src/common/elements you should have folders for each of the components that are part of this package.

Example:

/elements/Input/index.tsx
/elements/Icon/index.tsx
...

These local files are Styled wrappers for the components included in the package. They are the ones that are actually going to be imported throughout the project.

/elements/Input/index.tsx:

import React from 'react';
import {
	Input as InputElement,
	InputProps as InputElementProps,
} from '@chelseaapps/react-native-elements';

const Input = ({ ...props }: InputElementProps) => <InputElement {...props} />;

export default Input;

Updating the library

In order to update the library with some new functionality there is a checklist that needs to followed thoroughly:

• git clone react-native-elements project locally
• Add the necessary changes (shouldn't be more than props at this stage)
• Using jsDocs, document your new changes
• Update the docs by running npx typedoc --out docs src/index.tsx
• Increase the version by one where x is in case: 1.x if your change is an addition or 1.11.x if your change is a bug fix.
• Publish the new version of the package using npm publish
• View your new version at App Registry

## Adding a new component

Adding a new component should follow the same steps as updating the library but before cloning the library and updating it, the component should be created either inside the current project or inside the react-native-starter in order for the changes to be seen.

Considerations to keep in mind when creating a new component:

• Should be created with global usage in mind
• A lot of use cases should be taken into consideration and the functionality should be available through props
• Customisability is a must have and the component should have props available for styling as much of it as possible

Advanced Usage

Advanced usage refers to a case where you want a specific component to do a specific action. Here's a full list of props for any Element:

• Button Props
• DefaultButton Props
• OutlineButton Props
• RoundedButton Props
• CheckboxSelectRow Props
• DropdownLink Props
• Icon Props
• Input Props
• InputPressable Props
• RadioSelectRow Props
• SwitchRow Props
• Textarea Props
• TextareaLink Props
• Txt Props
• Wrapper Props
• OptionalWrapper Props
• LoadingWrapper Props
• ErrorWrapper Props

The general rule of thumb is that components/elements/ should be minimalistic files which contain only styling props if possible, while locally should sit all the other props that you might need.

In the rare case where a component requires some additional functionality you will have to Update the library globally.