@@ -18,100 +18,7 @@ Easy to use and fully customized modal picker for both iOS and Android. Have sam
1818
1919## Usage
2020
21- For simple modal picker example
22-
23- ``` js
24- import React , {Component } from ' react' ;
25- import {StyleSheet , Text , View , Button , TouchableOpacity } from ' react-native' ;
26- import Picker from ' react-native-simple-modal-picker' ;
27-
28- export default class Example extends Component {
29- constructor (props ){
30- super (props)
31- this .state = {
32- selectedIndex: 0
33- }
34- this .data = [
35- {
36- name: ' Option 1' ,
37- value: ' 1'
38- },
39- {
40- name: ' Option 2' ,
41- value: ' 2'
42- },
43- {
44- name: ' Option 3' ,
45- value: ' 3'
46- },
47- {
48- name: ' Option 4' ,
49- value: ' 4'
50- },
51- {
52- name: ' Option 5' ,
53- value: ' 5'
54- }
55- ]
56- }
57-
58- render () {
59- return (
60- < View style= {styles .container }>
61- {this .simplePickerView ()}
62- {this .customRowPickerView ()}
63- {this .dropDownView ()}
64- < / View>
65- );
66- }
67-
68- simplePickerView (){
69- return (
70- < View>
71- < Picker
72- ref= {instance => this .simplePicker = instance}
73- data= {this .data }
74- label= {' name' }
75- value= {' value' }
76- onValueChange= {(value ) => alert (value + ' selected' )} / >
77-
78- < View style= {styles .subContainer }>
79- < Button
80- title= {' Open Simple Picker' }
81- onPress= {() => this .simplePicker .setModalVisible (true )} / >
82- < / View>
83- < / View>
84- )
85- }
86-
87- }
88-
89- const styles = StyleSheet .create ({
90- container: {
91- flex: 1 ,
92- justifyContent: ' center' ,
93- backgroundColor: ' #F5FCFF' ,
94- },
95- subContainer: {
96- margin: 8
97- },
98- rowStyle: {
99- backgroundColor: ' #FFF' ,
100- color: ' #333' ,
101- padding: 8 ,
102- fontSize: 20
103- },
104- dropDownContainer: {
105- borderBottomWidth: 1 ,
106- padding: 8
107- },
108- dropDownText: {
109- fontSize: 20 ,
110- margin: 8
111- }
112- });
113-
114- ```
21+ Here full [ example] ( https://github.com/binbytes/react-native-simple-modal-picker/tree/master/example ) of package usage
11522
11623#### Simple Modal Picker
11724
@@ -126,7 +33,7 @@ const styles = StyleSheet.create({
12633
12734```
12835
129- ![ Simple] ( https://github. com/binbytes/react-native-simple-modal-picker/blob/master/screenshot/simple .gif?raw=true )
36+ ![ Simple] ( https://i.imgur. com/xcriwIC .gif )
13037
13138#### Modal Picker with Custom Row
13239
@@ -142,7 +49,7 @@ const styles = StyleSheet.create({
14249
14350```
14451
145- ![ Custom] ( https://github. com/binbytes/react-native-simple-modal-picker/blob/master/screenshot/custom .gif?raw=true )
52+ ![ Custom] ( https://i.imgur. com/NSZ0NfW .gif )
14653
14754#### DropDown View
14855
@@ -164,4 +71,4 @@ const styles = StyleSheet.create({
16471
16572```
16673
167- ![ DropDown] ( https://github. com/binbytes/react-native-simple-modal-picker/blob/master/screenshot/dropdown .gif?raw=true )
74+ ![ DropDown] ( https://i.imgur. com/rPTVTh6 .gif )
0 commit comments