react-native-simple-picker-sh

Highly customizable small sized picker library for react native

Getting started

$ npm install react-native-simple-picker-sh --save

E.g.:

import {Picker} from 'react-native-simple-picker'
export default class TestPicker extends Component{
	state={
		pickedItem:''
	}
	render(){
		return(
			<View>
				<Picker
					items={['foo','bar']}
					selectedValue={this.state.pickedItem}
					placeHolder="Select an item"
					onChange={(item)=>this.setState({pickedItem:item})}
					height={40}
					width={170}
					itemsHeight={40}
					itemsWidth={150}
				/>
			</View>
		)
	}
} 

##Props

A. onChange (required)

Callback when item is selected onChange={(text)=>onChangeText(text)}

B. items (required)

Array of items to be shown items=['foo','bar']

C. selectedValue

What should be shown after the item selection

1. backgroundColor

Background color for the picker view

default value : '#F5F5F5'

2. borderColor

Border color for the picker view

default value : '#E0E0E0'

3. borderWidth

Border width for the picker view

4. borderRadius

Border radius for the picker view

5. height

Height of the picker view

default value : 50

6. width

Width of the picker view

default value : 170

7. justifyContent

Justify content flex property for the selected or placeholder value and the dropdown icon

default value : 'space-between'

8. alignItems

Align items flex property for the selected or placeholder value and the dropdown icon

default value : 'center'

9. padding

Padding for the items inside the picker view

default value : 10

10. activeOpacity

Opacity for the onPress event of the picker view(range[0-1])

default value : 0.2

11. placeHolder

Placeholder to be shown in dropdown in case of no picked selected value or default selected value

default value : 'Select...'

12. placeHolderColor

Color of the placeholder or the selected item

default value : '#212121'

13. PlaceHolderFontSize

Font size of the placeholder or the selected item

default value : 20

14. iconColor

Color of the dropdown icon

default value : '#000'

15. backgroundVisibility

Transparency outside the picker popup(range[0-1])

default value : 0.8

16. offSetX

absolute X position of the picker popup

17. offSetY

absolute Y position of the picker popup

18. itemsHeight

Height of a single item inside picker popup

default value : 40

19. itemsWidth

Width of a single item inside picker popup

default value : 150

20. itemsBackgroundColor

BackgroundColor of the items inside the picker popup

default value : '#E0E0E0'

21. itemsDividerColor

default value : '#E0E0E0'

22. itemsDividerWidth

default value : 1

23. itemsTextColor

default value : '#000'

24. itemsFontSize

default value : 19