This is a collection of useful classes for RN projects.

1. Installation.
2. Package contents.
3. Version history.

Install with:

npm i --save react-native-common-utils 

For RN < 0.60: My code depends on react-native-localization which needs linking:

react-native link react-native-localization 

You also need to execute

react-native link react-native-common-utils 

, if you want to use the native modules defined in my package.

1. Native modules
2. Preferences
3. ContextMenu
4. DateTimePicker
5. StaticUtils
6. ApplicationSession
7. strings
8. styles

Warning: These native modules are currently implemented only for Android. I'll implement them for iOS as soon as I learn Swift / Objective-C well enough.

1. ShareData
2. GetPath

Shares arbitrary data.

import { ShareData } from "react-native-common-utils"; 

• deleteTempFiles()

  Invoke to delete the temp files created internally by the module.

   ShareData.deleteTempFiles(); 

• send()

  Shares data returning a Promise.

  If you specify an attachment, one of "base64", "path", "uri" must be specified, otherwise the promise will be rejected with the code "ERROR_NO_SRC_TO_COPY".

  A temp file with the content being sent is created for each attachment. If the directory where a temp file is to be created is unavailable, the promise is rejected with the code "ERROR_NO_TEMP_FILE_DST". If a temp file fails to be created, the promise is rejected with the code "ERROR_TEMP_FILE_CREATE".

  Please, bear in mind that these temp files can't be deleted automatically so consider using ShareData.deleteTempFiles().

   const options = { mime: String, // One of the mime types. Default: "*/*". to: String / [String], // "to" address(es). Default: undefined. cc: String / [String], // "cc" address(es). Default: undefined. bcc: String / [String], // "bcc" address(es). Default: undefined. subject: String, // The email subject. Default: null. text: String, // The body of the email. Default: undefined. html: String, // The body of the email. Can contain html. Default: undefined. attachments: [{ fileName: String, // The name of an attachment, as seen by a recipient of the email. Default: uuid. fileExtension: String, // The extension of an attachment, as seen by a recipient of the email. Default: "". base64: String, // Base64 encoded string with the content of an attachment. Default: undefined. path: String, // Path to a file to send as an attachment. Default: undefined. uri: String, // Uri pointing to a file to send as an attachment. Default: undefined. }], createChooser: Boolean, // Android only. Whether to use Intent.createChooser(). Default: true. chooserTitle: String // Android only. Title for the chooser. Default: null. }; ShareData.send(options); 

Gets the path/uri of the specified file.

import { GetPath } from "react-native-common-utils"; 

• get()

  This function returns a Promise resolving to the path/uri of the specified file. "pathType" must be one of:

  Value	Meaning
  "DB"	The file is a db file.

  The promise is rejected with the code "Invalid path type" if pathType is invalid.

   const options = { pathType: String, // The file path type. This parameter must be specified. fileName: String, // The file name. Default: "". fileExtension: String // The file extension. Default: "". }; GetPath.get(options); 

A collection of different static utility methods extending StaticUtils from simple-common-utils.

import { StaticUtils } from "react-native-common-utils"; 

• spinkitColor()

  Taking an RGBA value, returns a string of the form #rrggbb (as react-native-spinkit recognizes).

   StaticUtils.spinkitColor(10); // #000000 StaticUtils.spinkitColor(0xFF487210); // #ff4872 

• getLocaleId()

  Gets the current locale id.

   StaticUtils.getLocaleId(); // GB 

A tiny styling infrastructure based on react-native-extended-stylesheet, coming with several predefined styles.

Warning: v3.0.0 introduces a backwards-incompatible change. When using react-native-common-ui-components, everything must be imported from react-native-common-ui-components/js/styles, as predefined styles for components are moved there.

Please bear in mind that predefined styles must be initialized even if you're not going to use them yourself.

// Somewhere BEFORE the first use of dependent classes. const stls = require("react-native-common-utils/js/styles"); stls.create(); stls.build(); 

The usage is quite simple and is illustrated by an example below. Please note create() after the import directive and build() andindexObjectWithClassName() at the last lines. Variables and font / fontSize() are described later and examples of custom style creation are given here.

// customStyles.js import indexObjectWithClassName, { styles, font, create, build, fontSize } from "react-native-common-utils/js/styles"; // Tweak variables here and after that invoke... create(); // Define your custom styles. styles.mainScene = { mySuperView: { flex: ... , backgroundColor: ... , ... }, ... }; styles.anotherScene = { ... }; styles.common = { ... }; build(); module.exports = indexObjectWithClassName; 

Then in MainScene.js:

const styles = require("customStyles")("mainScene"); <View style={styles.mySuperView} /> <View style={styles.all.common} /> 

That is, if you need styles defined in styles.mainScene you simply write styles.styleToReference. If you need "common" styles you write styles.all.styleToReference.

It's not necessary to specify "the name" of a class when requiringcustomStyles:

const styles = require("customStyles")(); <View style={styles.mainScene.mySuperView} /> <View style={styles.common} /> 

Variables are used to make different UI parts look the same. Their default values are given in brackets. Feel free to modify them as you choose. In any case don't forget to call create().

• marginPadding (15)

  A value used for margins, paddings and the like.

• activeOpacity (0.5)

  A value for activeOpacity.

• baseHeight (50)

  Some referent value to base different height values upon. For example the height of buttons or list view items.

• textColor (0x55606EFF )

• textColorDisabled (0xD0CECEFF )

• backgroundColor (0xE9E9E9FF )

  These mean what their names suggest.

• centerCenter

  Centers content along both axes.

• centerCenterFlex1

  Does exactly what the name suggests.

Apart from these, there are styles that depend on variables. That's why create() needs to be called: these styles are created during its invocation. They are described below:

• navigator

  To be used for a Navigator. This style sets the navigator background color equal to backgroundColor.

• navigatorWithPadding

  The same as navigator but with padding equal to marginPadding.

• scene

  A style for scenes just making them fullscreen.

• sceneWithMargin

  The same as scene but with margins set to marginPadding.

• screen

  Used to style top-level views.

  • container

    Adds padding and a background color.

Font sizes are calculated as baseFontSize + numberOfSteps * step. font contains all the values and fontSize() is a function to calculate the font size: fontSize(someInteger);.

font fields (with default values in brackets):

• size (14)

  This is a base font size.

• step (3)

  This is a step value.

• smallMediumSteps (1)

• mediumSteps (2)

• largeSteps (3)

  Variables to use as a number of steps. Assuming font fields have default values, fontSize(mediumSteps), for example, will give 20.

Written with StackEdit.