Kancha is a React Native UI library for building decentralised identity wallet apps for iOS & Android.
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
Commitlint makes sure that all commit messages follow a pattern. Check it out here :point_right: Commitlint
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.
Unit tests will run on every commit. Full e2e test will run on merging to beta
or master
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
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>
Show item as active
Provide an left icon
onPress function
Provide testID
Provided by HOC
Request list item for request flows
Subtitle to show over main text
Theme
Credential property options
Remove bottom divider
Issuers
Note to show on the right
Remove bottom divider
When a VC is pressed
Return the selected item
Reason
The item being request is required
Pass a test ID to button
Theme
Screen component provides useful UI helpers that are needed on most screens.
Check val;idity of a claim
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)
Returns true if the item being passed in is the only key ina claim and it's the top level = 0
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)
Generated using TypeDoc
Expandable list items for credentials