Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fixt/react-native-digits

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/fixt/react-native-digits
Owner: fixt
License: mit
Created: 2015-11-04T17:29:59.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2017-01-31T19:25:34.000Z (almost 8 years ago)
Last Synced: 2024-10-01T08:23:53.928Z (2 months ago)
Language: Java
Size: 30.3 KB
Stars: 61
Watchers: 6
Forks: 7
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-native - react-native-digits ★60 - Digits wrapper to use in React Native (Components / Integrations)
awesome-react-native - react-native-digits ★60 - Digits wrapper to use in React Native (Components / Integrations)
awesome-react-native - react-native-digits ★60 - Digits wrapper to use in React Native (Components / Integrations)
awesome-react-native - react-native-digits ★60 - Digits wrapper to use in React Native (Components / Integrations)
awesome-react-native-ui - react-native-digits ★58 - Digits wrapper to use in React Native (Components / Integrations)

README

        # React Native Digits

[![npm version](http://img.shields.io/npm/v/react-native-digits.svg?style=flat-square)](https://npmjs.org/package/react-native-digits "View this project on npm")

[![npm version](http://img.shields.io/npm/dm/react-native-digits.svg?style=flat-square)](https://npmjs.org/package/react-native-digits "View this project on npm")

## Getting Started

- [Installation](#installation)

- [Setup iOS](#setup-ios)

- [Setup Android](#setup-android)

- [Usage](#usage)

- [Properties](#properties)

## Installation

`npm install react-native-digits --save`

## Setup iOS

See React Native documentation on [Linking Libraries](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content)

1. Open your project in XCode

2. Right click on `Libraries` and click `Add Files to "YOUR_PROJECT _NAME"`

3. Add `libRNDigits.a` to `Build Phases -> Link Binary With Libraries`

## Setup Android

#### In `settings.gradle`

Add to bottom:

```java

include ':react-native-digits'

project(':react-native-digits').projectDir = new File(settingsDir, '../node_modules/react-native-digits')

```

#### In `android/build.gradle`

```java

allprojects {

  repositories {

    mavenLocal()

    jcenter()

    maven { url 'https://maven.fabric.io/public' }   <--- ADD THIS

  }

}

```

#### In `android/app/build.gradle`

```java

dependencies {

  compile fileTree(dir: 'libs', include: ['*.jar'])

  compile 'com.android.support:appcompat-v7:23.0.0'

  compile 'com.facebook.react:react-native:0.14.+'

  compile project(':react-native-digits')           <--- ADD THIS

}

```

#### In `MainActivity.java`

```java

import co.fixt.react.digits.*;                      <--- ADD THIS

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  private ReactInstanceManager mReactInstanceManager;

  private ReactRootView mReactRootView;

  

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    mReactRootView = new ReactRootView(this);

 

    mReactInstanceManager = ReactInstanceManager.builder()

                 .setApplication(getApplication())

                 .setBundleAssetName("index.android.bundle")

                 .setJSMainModuleName("index.android")

                 .addPackage(new MainReactPackage())

                 .addPackage(new RNDigitsModule())     <--- ADD THIS

                 .setUseDeveloperSupport(BuildConfig.DEBUG)

                 .setInitialLifecycleState(LifecycleState.RESUMED)

                 .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "DropBot", null);

    setContentView(mReactRootView);

  }

 ```

 

#### In `AndroidManifest.xml`

Add this inside the `application` tag.

```xml

```

## Android Custom Theme

In `android/app/src/main/res/values/styles.xml`

```xml

  ...

  <-- Customize this -->

  

    <item name="android:textColorPrimary">@android:color/black</item>

    <item name="android:textColorSecondary">@android:color/darker_gray</item>

    <item name="android:windowBackground">@android:color/white</item>

    <item name="android:textColorLink">#000000</item>

    <item name="android:colorAccent">#000000</item>

    <item name="dgts__accentColor">#000000</item>

  

```

[Documentation here](https://docs.fabric.io/android/digits/theming.html#examples)

## Usage

```javascript

import React, { Component } from 'react-native'

import Button from ‘./button’

import Digits from 'react-native-digits'

export default class Login extends Component {

  handleDigitsError(err) {

    this.setState({showDigits: false})

    console.warn(‘Login failed’, err)

  }

  

  handleDigitsLogin(credentials) {

    this.setState({showDigits: false})

    console.log(‘Login successful’, credentials)

  }

  

  render() {

    return (

      

         this.setState({showDigits: true}) }

        >

          Login

        

        

        

      

    )

  }

}

```

## Properties

| Prop             | Default                      | Type       | Description                                                             |

| :--------------: | :--------------------------: | :--------: | :---------------------------------------------------------------------: |

| accentColor      |                              | `string`   | The main color of elements associated with user actions (e.g. buttons). |

| backgroundColor  |                              | `string`   | The background color for all views in the Digits flow.                  |

| onError          | `(err) => console.warn(err)` | `function` | Callback on error.                                                      |

| onLogin          |                              | `function` | Callback on success. `credentials` are passed back.                     |

| visible          | `false`                      | `bool`     | Show the Digits viewController                                          |