https://github.com/3sidedcube/react-native-elements
📱Frontend Library to be used inside Chelsea Apps Mobile applications.
https://github.com/3sidedcube/react-native-elements
Last synced: about 1 month ago
JSON representation
📱Frontend Library to be used inside Chelsea Apps Mobile applications.
- Host: GitHub
- URL: https://github.com/3sidedcube/react-native-elements
- Owner: 3sidedcube
- License: mit
- Created: 2021-10-29T07:34:20.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-26T00:01:42.000Z (almost 2 years ago)
- Last Synced: 2025-11-23T04:04:35.939Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 9.43 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/chelsea-apps/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) => ;
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](https://github.com/chelsea-apps/react-native-elements) project locally
- Add the necessary changes (shouldn't be more than props at this stage)
- Using [jsDocs](https://jsdoc.app/), 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](http://registry.chelsea-apps.com:4873/-/web/detail/@chelsea-apps/react-native-elements)
## 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](/docs/interfaces/ButtonProps.md)
- [DefaultButton Props](/docs/interfaces/DefaultButtonProps.md)
- [OutlineButton Props](/docs/interfaces/OutlineButtonProps.md)
- [RoundedButton Props](/docs/interfaces/RoundedButtonProps.md)
- [CheckboxSelectRow Props](/docs/interfaces/CheckboxSelectRowProps.md)
- [DropdownLink Props](/docs/interfaces/DropdownLinkProps.md)
- [Icon Props](/docs/interfaces/IconProps.md)
- [Input Props](/docs/interfaces/InputProps.md)
- [InputPressable Props](/docs/interfaces/InputPressableProps.md)
- [RadioSelectRow Props](/docs/interfaces/RadioSelectRowProps.md)
- [SwitchRow Props](/docs/interfaces/SwitchRowProps.md)
- [Textarea Props](/docs/interfaces/TextareaProps.md)
- [TextareaLink Props](/docs/interfaces/TextareaLinkProps.md)
- [Txt Props](/docs/interfaces/TxtProps.md)
- [Wrapper Props](/docs/interfaces/WrapperProps.md)
- [OptionalWrapper Props](/docs/interfaces/OptionalWrapperProps.md)
- [LoadingWrapper Props](/docs/interfaces/LoadingWrapperProps.md)
- [ErrorWrapper Props](/docs/interfaces/ErrorWrapperProps.md)
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.