react-native-solinor-components

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://[e-mail]: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} />