@digitalfactory/react-native-components v1.1.27

DF Design System React Native

This project can be ran on your local machine using iOS simulator.

Installing the library into your React Native project

Requirements

• react >=16.0
• react-native >=0.63.0
• react-native-device-info >=10.9.0 (npm install react-native-device-info)
• react-native-svg >=12.1.0 (npm install react-native-svg)
• phosphor-react-native >=1.1.1 (npm install phosphor-react-native)
• @react-native-clipboard/clipboard >=1.7.0 (npm install @react-native-clipboard/clipboard)
• @react-native-picker/picker >=2.4.0 (npm install @react-native-picker/picker)
• react-native-picker-select >=8.0.4 (npm install react-native-picker-select)
• react-native-gesture-handler >=2.8.0 (npm install react-native-gesture-handler)
• @react-native-async-storage/async-storage >=1.13.3 (npm install @react-native-async-storage/async-storage)
• @react-navigation/native 6.1.7 (npm install @react-navigation/native@6.1.7)
• @react-navigation/stack 6.3.17 (npm install @react-navigation/stack@6.3.17)

Install the library:

npm install --save @digitalfactory/react-native-components

For iOS, use cocoapods to link the packages:

npx pod-install

or alternatively:

cd ios &&
pod install &&
cd ..

Running the Design System for local development

Environment

• nodejs 14 or greater
• watchman (brew install watchman on mac osx)
• xcode 14.3
• cocoapods (sudo gem install cocoapods on maxc osx)
• ruby v2.7.4

Install dependencies

npm install

For iOS, use cocoapods to link the packages:

npx pod-install

or alternatively:

cd ios &&
pod install &&
cd ..

Running on Simulator

npm start to start Metro, the JavaScript bundler that ships with React Native. Metro takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies

npm run ios to run app in ios simulator

Debugging

see React Native debugging

npm run debug to start (React Developer Tools)https://reactnative.dev/docs/debugging#react-developer-tools

open Developer Menu on simulator

Select Debug to launch http://localhost:8081/debugger-ui/ in browser, open devtools to see console logs and set break points

Usage

Available components:

• useColors hook
• Button
• Icon
• InputAccessoryView
• InputContainer
• Loader
• Modal
• SelectInput
• TextInput
• Toast

useColors hook

The useColors hook provides you with a way to access the colours in our Figma Design System here. It uses React Native's useColorScheme hook to determine whether or not the user is in dark mode, and therefore which colour code to return for a selected colour. To see the list of colours and their associated hex codes, see here.

For example colors.greenApple would return the "#3F923C" hex color code. However if the user's mobile was in dark mode then "#54B450" would have been returned.

The colour names used by the hook were converted from hex using veli.ee/colorpedia.

Example usage

import { useColors } from "@digitalfactory/react-native-components";

const colors = useColors();
const primaryBlue = colors.blueScience;

Button

The Button component provides you with a way to use the buttons in our Figma Design System here. It is built on top of React Native's Pressable component and supports the icons in our Figma Design System which are based off of Phosphor Icons.

Example usage

import { Button } from "@digitalfactory/react-native-components";
import { PencilSimple } from "phosphor-react-native";

<Button
  buttonType="primaryRounded"
  text="Edit"
  icon={PencilSimple}
  onPress={() => console.log("clicked edit button!")}
/>

// You could provide child elements if you prefer:
<Button
  onPress={() => console.log("clicked button!")}
  buttonType="secondaryRounded">
  <View style={{ flexDirection: "row", alignItems: "center" }}>
    <PencilSimple color="#999999" size={20} weight="fill" />
    <Text
      accessible
      style={{
        fontSize: 16,
        fontWeight: "600",
        lineHeight: 20,
        color: "#999999",
        marginLeft: 12,
      }}>
      w/ child els
    </Text>
  </View>
</Button>

Props

Inherits all React Native Pressable props. All props in the table below are optional.

Icon

The Icon component provides default styling for commonly used icons, and icons that are not available in the Phosphor Icons library.

Example usage

import { Icon } from "@digitalfactory/react-native-components";

<View
  style={{
    aspectRatio: 1,
    width: 34,
    height: 34,
    padding: 5,
  }}>
  <Icon.CheckCircle color="#0058DB" />
</View>

Props

The icons all accept a color prop. To change the size of the icon, the icon should be wrapped in a View component which has a style of aspectRatio: 1. Then change the width and height as required.

InputAccessoryView

The InputAccessoryView is a component that can be used to display a view above the keyboard (or input selector) whenever an input has focus. It has previous and next arrows and a done button.

Example usage

import { InputAccessoryView } from "@digitalfactory/react-native-components";

<InputAccessoryView
  id="unique-id"
  onPressPrevious={() => inputRefPrev.current?.focus()}
  onPressNext={() => inputRefNext.current?.focus()}
/>

Props

All props in the table below are optional.

InputContainer

The InputContainer component provides a way of giving an input field a label, assistive text and status-related (e.g. error) text messages.

Example usage

import React, { useState } from "react";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { InputContainer, TextInput } from "@digitalfactory/react-native-components";

const TextInputExample = (): React.ReactElement => {
  const [value1, setValue1] = useState("");

  return (
    <KeyboardAwareScrollView keyboardShouldPersistTaps="handled">
      <InputContainer
        labelText="Input Label"
        assistiveTextTop="Example assistive text for a required input"
        required
      >
        <TextInput
          onChangeText={setValue1}
          placeholder="Placeholder text"
          value={value1}
        />
      </InputContainer>
    </View>
  );
};

Props

All props in the table below are optional.

Loader

The Loader component provides loading/spinner components that can be used for when you need to display a loading state.

Example usage

import { Loader } from "@digitalfactory/react-native-components";

const { ActivityIndicator, FadeSpinner } = Loader;

<View>
  <FadeSpinner size={75} color="blue" />
</View>

<View>
  <ActivityIndicator size="large" color="red" />
</View>

Props

FadeSpinner

ActivityIndicator

See: React Native ActivityIndicator.

Modal

The Modal component provides a generic customisable dialog box/popup window that is based on React Native's Modal component. It sets some sensible style defaults on the modal which can be overriden as required.

Example usage

import React, { useState } from "react";
import { Button, Modal, useColors } from "@digitalfactory/react-native-components";

const SimpleModal = (): React.ReactElement => {
  const colors = useColors();
  const [showModal, setShowModal] = useState(false);

  return (
    <View>
      <Button
        buttonType="primaryRounded"
        onPress={() => setShowModal(!showModal)}
        text="Show simple modal"
      />
      <Modal visible={showModal}>
        <Text style={{ color: colors.grayCod, fontSize: 16, marginBottom: 16 }}>
          Simple modal example
        </Text>
        <Button buttonType="primaryRounded" text="Close" onPress={() => setShowModal(false)} />
      </Modal>
    </View>
  );
};

Props

Inherits all React Native Modal props in addition to the below. All props in the table below are optional.

SelectInput

The SelectInput component is based off of react-native-picker-select and provides you with an input which allows you to select one of multiple options.

To use this component, make sure you have installed both the react-native-picker-select and @react-native-picker/picker packages.

Example usage

import React, { useState } from "react";
import { View } from "react-native";
import { SelectInput } from "@digitalfactory/react-native-components";

const SelectInputExample = (): React.ReactElement => {
  const [value1, setValue1] = useState("");

  const items = [
    { label: "Football", value: "football" },
    { label: "Baseball", value: "baseball" },
  ];

  return (
    <View>
      <SelectInput
        items={items}
        onValueChange={(val) => setValue1(val)}
        value={value1}
      />
    </View>
  );
};

Props

The component accepts all props as per: react-native-picker-select, except for the following:

• Icon - instead use iconLeft or iconRight (see below table).
• InputAccessoryView - instead use inputAccessoryViewProps (see here for available options) to pass props to the InputAccessoryView.

The component also accepts the following props, all of which are optional:

TextInput

The TextInput component is based off of React Native's TextInput and provides a way for the user to input text via the keyboard.

Example usage

import React, { useState } from "react";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { TextInput } from "@digitalfactory/react-native-components";

const TextInputExample = (): React.ReactElement => {
  const [value1, setValue1] = useState("");

  return (
    <KeyboardAwareScrollView keyboardShouldPersistTaps="handled">
      <TextInput
        onChangeText={setValue1}
        placeholder="Placeholder text"
        value={value1}
      />
    </View>
  );
};

Props

The component accepts all props as per: React Native's TextInput, as well as the following props which are all optional:

Toast

The Toast notification component is based off of react-native-toast-message and displays brief a message to the user at the top of the page.

Example usage

Render the Toast component in your app's entry file, as the LAST CHILD in the View hierarchy (along with any other components that might be rendered there):

// App.tsx
import { Toast } from "@digitalfactory/react-native-components";

export function App(props) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );
}

Then use it anywhere in your app by calling any Toast method directly:

// Foo.tsx
import { Button, Toast } from "@digitalfactory/react-native-components";

export function Foo(props) {
  const showToast = () => {
    Toast.show({
      type: "success",
      text1: "Positive Message",
    });
  }

  return (
    <Button
      onPress={showToast}
      text="Show success toast"
      buttonType="primarySquare"
    />
  )
}

API

The component methods and props are the same as described in the react-native-toast-message documentation here, with a couple of differences:

1. The type option of the Toast.show method has the available values: success, warning, error and info
2. The text2 option of the Toast.show method has no effect. This is because there are no requirement to support this currently. Put any text you want in the text1 option.

Props

Some additional props can be passed into the Toast.show options object under the props property: