react-native-solinor-components

Common Components to be used in Solinor React Native projects. Instead of reinventing the wheel all the time, here are some components that can be reused freely.

Usage

Components are in a private repo, so you need to have access to Solinor org and Mobile dev group and have your ssh setup for github. Ask Juha Linnanen for access to Mobile dev group if necessary.

• To install:

yarn add git+ssh://[email protected]:solinor/react-native-solinor-components.git#master

• To use in a project:

import { SwipeConfirm } from 'react-native-solinor-components'

<SwipeConfirm
  bgColor={'#eeeeee'}
  buttonColor={'#333333'}
  text={'PAY 11,00 €'}
  onSwipeCompleted={ () => { window.alert('payment received!')} }
  />

Contributions

You may add new components, but need to make sure that they are:

• Reusable
• Flow-typed
• Tested (if they include logic)
• Document how-to use the component

Available Components

SwipeConfirm

Swipeable button to confirm for example, payments. After user swipes over 55% away, it is considered a full swipe and will be animated to the end.

| Attribute | Type | Default | Description | |:------------------|:----------------|:-----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | height | number | 60 | Height of the whole component | | width | number | 280 | Width of the whole component | | bgColor | color | '#999999' | Background color for the component | | buttonColor | color | '#111111' | Color of the swipeable round button | | text | string | '' | Text displayed in the center of the component | | textColor | color | '#000000' | Color of the text | | iconSize | number | 25 | > Icon size inside the button | | iconColor | color | '#666666' | > Icon color | | disabled | boolean | 'false' | Makes swipe enable/disabled | | onSwipeCompleted | function | () => {} | Callback function, which gets called when swipe is completed. |

ProgressiveImage

          <ProgressiveImage
            thumbnailSource={{uri: url}}
            imageSource={{uri: url}}
            placeHolderSource={require('../Images/placeholder-image.jpg')}
            style={imageStyle} />