Options
All
  • Public
  • Public/Protected
  • All
Menu

Kancha

semantic-release code style: prettier CircleCI codecov

Kancha is a React Native UI library for building decentralised identity wallet apps for iOS & Android.

Getting started

Install dependencies

yarn install

Build the library locally and run the demo app from xcode

yarn build && yarn xcode

In a separate terminal run metro bundler

yarn start

Start a development watcher. This will compile typescript when you make changes and the app will reload.

yarn develop

Contributing

Commitlint makes sure that all commit messages follow a pattern. Check it out here :point_right: Commitlint

Releases

Releases are automatically handled by Semantic Release All version numbers and release notes are decided on based on the commit messages provided.

There are currently 2 channels. Master is for the main library release and beta is for beta releases.

Testing

Unit tests will run on every commit. Full e2e test will run on merging to beta or master

Documentation

TypeDoc auto generates the documentation from the typescript interfaces and comments. To generate the docs run:

yarn docs

This will get published to github pages as part of the CI build

Index

Modules

Enumerations

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

BlockPropsOptions

BlockPropsOptions: "outlined" | "filled" | "clear" | undefined

BrandPropOptions

BrandPropOptions: "primary" | "secondary" | "tertiary" | "accent" | "warning" | "confirm" | "custom" | undefined

ToastType

ToastType: "alert" | "info" | "error" | "confirm" | null

Variables

Const GRAVATAR_URI

GRAVATAR_URI: "https://www.gravatar.com/avatar/" = "https://www.gravatar.com/avatar/"

Const OPEN_BOTTOM_SHEET

OPEN_BOTTOM_SHEET: "OPEN_BOTTOM_SHEET" = "OPEN_BOTTOM_SHEET"

Const SHOW_TOAST

SHOW_TOAST: "SHOW_TOAST" = "SHOW_TOAST"

Const SwitchEmitter

SwitchEmitter: internal = new EventEmitter()

ThemeProvider

ThemeProvider: ComponentClass<object, any> | FunctionComponent<object>

Const ToastEmitter

ToastEmitter: internal = new EventEmitter()

Const fields

fields: object[] = [{type: 'name',value: 'test value',},]

height

height: number

Const isAndroid

isAndroid: boolean = Platform.OS === 'android'

Const isIOS

isIOS: boolean = Platform.OS === 'ios'

Const jwt

jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"

Const mockOpenURL

mockOpenURL: Mock<any, any> = jest.fn()

useTheme

useTheme: useTheme

width

width: number

withTheme

withTheme: function

Type declaration

    • <Props, C>(WrappedComponent: React.ComponentType<Props> & C): React.ComponentType<$Without<Props, "theme"> & object> & hoistNonReactStatics.NonReactStatics<ComponentClass<Props, any> & C | FunctionComponent<Props> & C>
    • Type parameters

      • Props: object

      • C

      Parameters

      • WrappedComponent: React.ComponentType<Props> & C

      Returns React.ComponentType<$Without<Props, "theme"> & object> & hoistNonReactStatics.NonReactStatics<ComponentClass<Props, any> & C | FunctionComponent<Props> & C>

Functions

Const AccordionItem

Const ActivityItem

  • ActivityItem(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • actions: undefined | string[]
      • activity: undefined | string
      • attachments: undefined | any[]
      • attachmentsAction: undefined | function
      • confirm: undefined | function
      • credentialStyle: any
      • date: number
      • issuer: Identity
      • message: any
      • profileAction: function
          • (id: string): void
          • Parameters

            • id: string

            Returns void

      • reason: undefined | string
      • reject: undefined | function
      • subject: Identity
      • theme: any
      • type: string
      • viewer: Identity

    Returns Element

Const ActivityItemHeader

  • ActivityItemHeader(__namedParameters: object): Element

Const Avatar

Const Banner

Const BottomSheetWrapper

  • BottomSheetWrapper(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • children: function | function & string | function & number | function & false | function & true | function & ReactElement<any, string | function | object> | function & ReactNodeArray | function & ReactPortal
      • enabledInnerScrolling: undefined | false | true
      • id: string
      • initialSnap: undefined | number
      • snapPoints: number[]
      • theme: any

    Returns Element

Const Button

  • Button(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • block: undefined | "outlined" | "filled" | "clear"
      • bold: undefined | false | true
      • buttonText: undefined | string
      • centered: undefined | false | true
      • disabled: undefined | false | true
      • fullWidth: undefined | false | true
      • icon: undefined | null | string | number | false | true | __type | ReactElement<any, string | function | object> | ReactNodeArray | ReactPortal
      • iconButton: undefined | false | true
      • navButton: undefined | false | true
      • noPadding: undefined | false | true
      • onPress: function
          • (): void
          • Returns void

      • shadowOpacity: undefined | number
      • small: undefined | false | true
      • testID: undefined | string
      • textDecorationLine: undefined | "none" | "underline" | "line-through" | "underline line-through"
      • theme: any
      • type: undefined | "primary" | "secondary" | "tertiary" | "accent" | "warning" | "confirm" | "custom"

    Returns Element

Const Card

  • Card(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • background: undefined | "primary" | "secondary" | "tertiary" | "accent" | "warning" | "confirm" | "custom"
      • br: undefined | number
      • children: undefined | null | string | number | false | true | __type | ReactElement<any, string | function | object> | ReactNodeArray | ReactPortal
      • onPress: undefined | function
      • shadow: undefined | number
      • testID: undefined | string

    Returns Element

Const ClaimExplore

Const Container

  • Container is the most fundamental building block in Kancha and should be used anywhere you would use a View. In most cases the built-in React Native View component is used in conjunction with some some simple layout styles like flexbox casuing a mess of styles. Using a Container these can just be added as props for declarative layouts that are easy to read.

    <Container br={4} flex={1} alignItems={'center'}>
      <Text>Hey, This is a container</Text>
    </Container>

    Parameters

    Returns Element

Const Credential

  • Credential(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • background: undefined | "primary" | "secondary" | "tertiary" | "accent" | "warning" | "confirm" | "custom"
      • fields: any
      • issuer: Identity
      • onPress: undefined | function
      • shadow: undefined | number
      • subject: Identity
      • testID: undefined | string
      • theme: any

    Returns Element

Const FabButton

Const IndicatorBar

  • IndicatorBar(__namedParameters: object): Element

Const KanchaText

  • KanchaText(props: TextProps & object): Element

Const ListItem

Const LogItem

Const MenuItem

  • MenuItem(props: MenuItem & object): Element

Optional active

active: undefined | false | true

Show item as active

Optional icon

icon: undefined | object

Provide an left icon

onPress

onPress: function

onPress function

Type declaration

    • (): void
    • Returns void

Optional testID

testID: undefined | string

Provide testID

theme

theme: any

Provided by HOC

Const MessageItem

  • MessageItem(__namedParameters: object): Element

Const Modal

Const Radio

Const RequestItem

  • RequestItem(__namedParameters: object): Element
  • Request list item for request flows

    Parameters

    • __namedParameters: object
      • claimType: string
      • closeAfterSelect: undefined | false | true
      • credentials: RequestCredential[]
      • dividerBottom: undefined | false | true
      • issuers: undefined | Issuers[]
      • itemNote: undefined | string
      • last: undefined | false | true
      • onPressVC: undefined | function
      • onSelectItem: function
          • (id: string | null, jwt: string | null, claimType: string): void
          • Parameters

            • id: string | null
            • jwt: string | null
            • claimType: string

            Returns void

      • reason: undefined | string
      • required: undefined | false | true
      • testID: undefined | string
      • theme: any

    Returns Element

claimType

claimType: string

Subtitle to show over main text

Optional closeAfterSelect

closeAfterSelect: undefined | false | true

Theme

credentials

credentials: RequestCredential[]

Credential property options

Optional dividerBottom

dividerBottom: undefined | false | true

Remove bottom divider

Optional issuers

issuers: Issuers[]

Issuers

Optional itemNote

itemNote: undefined | string

Note to show on the right

Optional last

last: undefined | false | true

Remove bottom divider

Optional onPressVC

onPressVC: undefined | function

When a VC is pressed

onSelectItem

onSelectItem: function

Return the selected item

Type declaration

    • (id: string | null, jwt: string | null, claimType: string): void
    • Parameters

      • id: string | null
      • jwt: string | null
      • claimType: string

      Returns void

Optional reason

reason: undefined | string

Reason

Optional required

required: undefined | false | true

The item being request is required

Optional testID

testID: undefined | string

Pass a test ID to button

theme

theme: any

Theme

Const Screen

Const Section

Const Toast

Const checkValidity

  • checkValidity(exp: number, revoked: boolean): object
  • Check val;idity of a claim

    Parameters

    • exp: number
    • revoked: boolean

    Returns object

    • status: string
    • valid: boolean

Const createTheme

  • createTheme(customColors?: undefined | object): object
  • Create theme allows you to pass custom colors to the theme file. The existing color keys need to be used with with createTheme.

    If you are using a color object with custom key names you should use mergeTheme and overwrite all color references

     export default createTheme(CUSTOM_COLORS)

    Parameters

    • Optional customColors: undefined | object

    Returns object

    • statusBarStyle: string
    • activity: object
      • messages: object
        • sdr: string
        • w3c.vc: string
        • w3c.vp: string
    • colors: object
      • accent: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • confirm: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • custom: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • inverted: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • primary: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • secondary: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • status: object
        • confirm: string
        • error: string
        • info: string
        • warn: string
      • tertiary: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
      • warning: object
        • accessories: string
        • background: string
        • brand: string
        • button: string
        • divider: string
        • text: string
        • underlay: string
        • buttonText: object
          • clear: string
          • filled: string
          • outlined: string
    • delays: object
      • toasts: number
    • icons: object
      • CHECKED: object
        • iconFamily: string
        • name: string
      • CLOSE: object
        • iconFamily: string
        • name: string
      • CONFIRM: object
        • iconFamily: string
        • name: string
      • DOWN: object
        • iconFamily: string
        • name: string
      • EDIT: object
        • iconFamily: string
        • name: string
      • ERROR: object
        • iconFamily: string
        • name: string
      • FORWARD: object
        • iconFamily: string
        • name: string
      • INCOMING_ITEM: object
        • iconFamily: string
        • name: string
      • INFO: object
        • iconFamily: string
        • name: string
      • LINK: object
        • iconFamily: string
        • name: string
      • OUTGOING_ITEM: object
        • iconFamily: string
        • name: string
      • RADIO_OFF: object
        • iconFamily: string
        • name: string
      • RADIO_ON: object
        • iconFamily: string
        • name: string
      • SUCCESS: object
        • iconFamily: string
        • name: string
      • UP: object
        • iconFamily: string
        • name: string
      • WARN: object
        • iconFamily: string
        • name: string
    • roundedCorners: object
      • buttons: number
      • cards: number
      • textInputs: number
      • toasts: number
    • spacing: object
      • default: number
      • section: number
    • text: object
      • lineHeights: object
        • body: number
      • sizes: object
        • activitySubTitle: number
        • activityTitle: number
        • body: number
        • button: number
        • buttonSmall: number
        • h1: number
        • h2: number
        • h3: number
        • h4: number
        • h5: number
        • h6: number
        • listItem: number
        • listItemNote: number
        • listItemRight: number
        • navButton: number
        • sectionHeader: number
        • subTitle: number
        • summary: number

Const isTopLevelSingleKey

  • isTopLevelSingleKey(claimObject: any, level: number): boolean
  • Returns true if the item being passed in is the only key ina claim and it's the top level = 0

    Parameters

    • claimObject: any
    • level: number

    Returns boolean

Const mergeTheme

  • mergeTheme(themeSection: function, customColors?: undefined | object): Object
  • A theme section can be merged with the default theme to create variations. If you use colors in your section you can pass in your custom color object

     const themeSection = (colors) => {
       return {
         roundedCorners: {
           buttons: 5,
         },
         someCustomElement: {
           borderColor: colors.MY_CUSTOM_COLOR
         }
       }
     }
     export default mergeTheme(themeSection, CUSTOM_COLORS)

    Parameters

    • themeSection: function
        • (colors?: any): any
        • Parameters

          • Optional colors: any

          Returns any

    • Optional customColors: undefined | object

    Returns Object

Const normaliseClaimTree

  • normaliseClaimTree(claimObject: any, level?: number, isListItem?: boolean): ClaimTreeNormalised[]

Const renderCrendentialItem

  • renderCrendentialItem(contentItem: any): null | string | number | false
  • Parameters

    • contentItem: any

    Returns null | string | number | false

Const useLayout

  • useLayout(): any[]

Object literals

Const ATTACHMENT_1

ATTACHMENT_1: object

exp

exp: number = 123445678910

fields

fields: object[] = [{type: 'name',value: 'Test name',},{type: 'phone',value: 'Test phone',},]

hash

hash: string = "01"

jwt

jwt: string = "01"

iss

iss: object

did

did: string = "0x1efgh"

profileImage

profileImage: string = ""

shortId

shortId: string = "Test Issuer 1"

sub

sub: object

did

did: string = "0x1efghssesd"

profileImage

profileImage: string = ""

shortId

shortId: string = "Test Subject 1"

Const ATTACHMENT_2

ATTACHMENT_2: object

fields

fields: object[] = [{type: 'name',value: 'Test name',},{type: 'phone',value: 'Test phone',},]

hash

hash: string = "01"

jwt

jwt: string = "01"

iss

iss: object

did

did: string = "0x1efghssss"

profileImage

profileImage: string = ""

shortId

shortId: string = "Test Issuer 2"

sub

sub: object

did

did: string = "0x1efghssesdss"

profileImage

profileImage: string = ""

shortId

shortId: string = "Test Subject 2"

Const BottomSnap

BottomSnap: object

to

  • to(snapIndex: number, sheetId: string): void

Const BrandOptions

BrandOptions: object

Accent

Accent: "accent" = "accent"

Confirm

Confirm: "confirm" = "confirm"

Custom

Custom: "custom" = "custom"

Primary

Primary: "primary" = "primary"

Secondary

Secondary: "secondary" = "secondary"

Tertiary

Tertiary: "tertiary" = "tertiary"

Warning

Warning: "warning" = "warning"

Const ButtonBlocks

ButtonBlocks: object

Clear

Clear: "clear" = "clear"

Filled

Filled: "filled" = "filled"

Outlined

Outlined: "outlined" = "outlined"

Const Constants

Constants: object

BrandOptions

BrandOptions: BrandTypeStatic

ButtonBlocks

ButtonBlocks: BlocksStatic

TextTypes

TextTypes: TextTypesStatic

Const Device

Device: object

height

height: number

isAndroid

isAndroid: boolean

isIOS

isIOS: boolean

width

width: number

Const Icon

iconFamily

iconFamily: string = "Ionicons"

name

name: string = "ios-settings"

Const IconsFontFamilies

IconsFontFamilies: object

AntDesign

AntDesign: Icon

Entypo

Entypo: Icon

EvilIcons

EvilIcons: Icon

Feather

Feather: Icon

FontAwesome

FontAwesome: Icon

FontAwesome5

FontAwesome5: FontAwesome5Icon

FontAwesome5Pro

FontAwesome5Pro: FontAwesome5Icon

Foundation

Foundation: Icon

Ionicons

Ionicons: Icon

MaterialCommunityIcons

MaterialCommunityIcons: Icon

MaterialIcons

MaterialIcons: Icon

Const TextTypes

TextTypes: object

ActivitySubTitle

ActivitySubTitle: "activitySubTitle" = "activitySubTitle"

ActivityTitle

ActivityTitle: "activityTitle" = "activityTitle"

Body

Body: "body" = "body"

Button

Button: "button" = "button"

ButtonSmall

ButtonSmall: "buttonSmall" = "buttonSmall"

H1

H1: "h1" = "h1"

H2

H2: "h2" = "h2"

H3

H3: "h3" = "h3"

H4

H4: "h4" = "h4"

H5

H5: "h5" = "h5"

ListItem

ListItem: "listItem" = "listItem"

ListItemNote

ListItemNote: "listItemNote" = "listItemNote"

ListItemRight

ListItemRight: "listItemRight" = "listItemRight"

NavButton

NavButton: "navButton" = "navButton"

SectionHeader

SectionHeader: "sectionHeader" = "sectionHeader"

SubTitle

SubTitle: "subTitle" = "subTitle"

Summary

Summary: "summary" = "summary"

Const Toaster

Toaster: object

confirm

  • confirm(title: string, message: string, delay?: undefined | number): void

error

  • error(title: string, message: string, delay?: undefined | number): void

info

  • info(title: string, message: string, delay?: undefined | number): void

warn

  • warn(title: string, message: string, delay?: undefined | number): void

Const bannerSize

bannerSize: object

medium

medium: number = 250

small

small: number = 180

Const baseVc

baseVc: object

exp

exp: number = 123455678

iat

iat: number = 123455678

jwt

jwt: string = "001"

nbf

nbf: number = 123455678

type

type: string = ""

iss

iss: object

did

did: string = "0xfksksdkeprgj"

shortId

shortId: string = "Serto Issuer"

sub

sub: object

did

did: string = "0xwrhfowiehrf"

shortId

shortId: string = "Sert User"

Const claim

claim: object

Serto ID

Serto ID: object

children

children: object[] = [{name: 'Bob',age: 4,},{name: 'Alice',age: 9,},]

country

country: string = "USA"

dateOfBirth

dateOfBirth: string = "22-01-75"

name

name: string = "Sarah Adamson"

pets

pets: string[] = ['fish', 'cats', 'birds']

photoID

photoID: string = "https://somewebsite.jpg"

address

address: object

houseNumber

houseNumber: number = 22

streetName

streetName: string = "Privacy Ville"

Const complexVerification

complexVerification: object

claim

claim: object

Complex Claim

Complex Claim: object

cars

cars: object[] = [{name: 'Audi',model: 'R8',used: false,},{name: 'Jaguar',model: 'Unknown',used: true,},]

address

address: object

city

city: string = "Test City"

street

street: string = "21 Testing Avenue"

Const credentialItems

credentialItems: object

falsey

falsey: boolean = false

image

image: string = "https://aws.bucket.funnycats.jpg"

number

number: number = 123

string

string: string = "hello Credential item"

truthy

truthy: boolean = true

url

url: string = "https://www.funnycats.com"

Const issuer

issuer: object

did

did: string = "0xf1234"

profileImage

profileImage: string = "http://"

shortId

shortId: string = "Issuer Name"

Const rootClaim

rootClaim: object

children

children: object[] = [{name: 'Bob',age: 4,},{name: 'Alice',age: 9,},]

country

country: string = "USA"

dateOfBirth

dateOfBirth: string = "22-01-75"

name

name: string = "Sarah Adamson"

Const simpleVerification

simpleVerification: object

claim

claim: object

age

age: number = 100

location

location: string = "Spain"

name

name: string = "Test"

Const singleOptionCredential_01

singleOptionCredential_01: object

fields

fields: object[] = [{type: 'name',value: 'Single Option A',isObj: false,},]

hash

hash: string = "001"

parentHash

parentHash: string = "00001"

Const singleOptionCredential_02

singleOptionCredential_02: object

fields

fields: object[] = [{type: 'name',value: 'Single Option B',isObj: false,},]

hash

hash: string = "002"

parentHash

parentHash: string = "00002"

Const subject

subject: object

did

did: string = "0xf1234"

profileImage

profileImage: string = "http://"

shortId

shortId: string = "Issuer Name"

Const verificationWithSinglekey

verificationWithSinglekey: object

claim

claim: object

Single key Claim

Single key Claim: object

location

location: string = "Africa"

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc