mobile-ui

Widergy mobile team components

A suitcase of commonly used cross-project UI Components

Usage

1. react-native-vector-icons is needed as a peer dependency. Please, follow react-native-vector-icons installation guide before installing mobile-ui.
2. yarn add @widergy/mobile-ui.
3. There also three other native modules dependencies react-native-image-resizer, react-native-image-picker and react-native-document-picker which you will have to link after installing. To do so, the command react-native link <package-name> should suffice. If not, refer to each library documentation.

Theming

To configure the theming of your app, you must add the ThemeProvider high in your component tree. Check the docs here

import { ThemeProvider } from '@widergy/mobile-ui';

const theme = {
    colors: {
        effect: 'red'
    }
};

const App = () => (
    <ThemeProvider theme={theme}>
      {/** your code here **/}
    </ThemeProvider>
)

export default App;

Features

• utils: Useful commonly used js functions.
  • scaleUtils: Scaling functions and dimension constants. Check the docs here.
  • platformUtils: Constants related to device platform. Check the docs here.
• components: Common mobile team components
  • Touchable: A component that provides the capability to capture tapping gestures and displays native feedback when a gesture is recognized. Check the docs here.
  • Icon: Render an icon using react-native-vector-icons. Check the docs here.
  • IconButton: : Render an icon using react-native-vector-icons, wrapped by Touchable. Check the docs here.
  • ActivityIndicator: Displays a loading indicator. Check the docs here.
  • Snackbar: Shows a bottom bar to display notifications. Check the docs here.
  • RadioGroup: Simple and easy to use radio buttons, that allows users to select a specific option among an array of options. Check the docs here.
• HOCs: mobile team commonly used HOCs
  • withLoading: Displays a view with an activity indicator. Check the docs here.

Publish a new version:

Create a new tag, release branch and push it to github using yarn run release $version

A new version is published on npm using bitrise every time we push commits on master. To publish a new version manually, follow the next steps:

1. npm adduser
2. npm login
3. npm publish