@@ -31,247 +31,5 @@ import Button from 'HSButton'
3131
3232```
3333
34-
35- # Included
36- - [x] [ Buttons] ( https://github.com/dabit3/react-native-hackathon-starter#buttons )
37- - [x] Pricing Component
38- - [x] [ Social Icons / Buttons] ( https://github.com/dabit3/react-native-hackathon-starter#social-icons--buttons )
39- - [x] [ Card component] ( https://github.com/dabit3/react-native-hackathon-starter#card )
40- - [x] [ React Native Vector Icons] ( https://github.com/oblador/react-native-vector-icons )
41- - [x] [ Form Elements] ( https://github.com/dabit3/react-native-hackathon-starter#forms )
42- - [x] [ List] ( https://github.com/dabit3/react-native-hackathon-starter#lists )
43- - [x] [ Linked List] ( https://github.com/dabit3/react-native-hackathon-starter#lists )
44- - [x] [ Redux] ( https://github.com/reactjs/redux )
45- - [x] Tabs ([ React Native TabNavigator] ( https://github.com/exponentjs/react-native-tab-navigator ) )
46- - [x] Navigator Setup
47- - [x] HTML style headings (h1, h2, etc...)
48-
49- #### Roadmap
50- - [ ] Add icons to TextInputs
51- - [ ] Add Profile Component
52- - [ ] Add Picker
53- - [ ] Add Search Bar
54- - [ ] Add Side Menu
55- - [ ] Something you's like to see? Submit an [ issue] ( https://github.com/dabit3/react-native-hackathon-starter/issues ) or a [ pull request] ( https://github.com/dabit3/react-native-hackathon-starter/pulls ) .
56-
57- # API
58-
59- ## Buttons
60-
61- ![ Buttons] ( http://i.imgur.com/aZNhgFp.png )
62-
63- ```
64- import Button from 'HSButton'
65-
66- <Button
67- raised
68- icon={{name: 'cached'}}
69- title='RAISED WITH ICON' />
70- ```
71-
72- | prop | default | type | description |
73- | ---- | ---- | ----| ---- |
74- | buttonStyle | none | object (style) | add additional styling for button component (optional) |
75- | title | none | string | button title (required) |
76- | onPress | none | function | onPress method (required) |
77- | icon | none | object {name(string), color(string), size(number)} | [ Material Icon Name] ( https://design.google.com/icons/ ) (optional) |
78- | secondary | false | boolean | secondary button flag (optional) |
79- | backgroundColor | primary color | string (color) | background color of button (optional) |
80- | color | white | string(color) | font color (optional) |
81- | textStyle | none | object (style) | text styling (optional) |
82- | fontSize | 18 | number | font size (optional) |
83- | underlayColor | transparent | string(color) | underlay color for button press (optional) |
84- | raised | false | boolean | flag to add raised button styling (optional) |
85-
86- ## Social Icons & Buttons
87-
88- ![ Social Icons] ( http://i.imgur.com/k9jQh2u.png )
89-
90- ```
91- import SocialIcon from 'HSSocialIcon'
92-
93- // Icon
94- <SocialIcon
95- type='twitter'
96- />
97-
98- // Button
99- <SocialIcon
100- title='Sign In With Facebook'
101- button
102- type='facebook'
103- />
104- ```
105-
106- | prop | default | type | description |
107- | ---- | ---- | ----| ---- |
108- | component | TouchableHighlight | React Native Component | type of button (optional) |
109- | type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon) | social media type (required) |
110- | button | false | boolean | creates button (optional) |
111- | onPress | none | funciton | onPress method (optional) |
112- | iconStyle | none | object (style) | extra styling for icon component ([ React Native Vector Icons] ( https://github.com/oblador/react-native-vector-icons ) ) (optional) |
113- | style | none | object (style) | button styling (optional) |
114- | iconColor | white | string | icon color (optional) |
115- | title | none | string | title if made into a button (optional) |
116-
117- ## Lists
118-
119- ![ Lists] ( http://i.imgur.com/D8Y4mp3l.png )
120-
121- #### Using Map Function. Implemented with icons.
122-
123- ```
124- import List from 'HSList'
125- import ListItem from 'HSListItem'
126-
127- <List>
128- {
129- list1.map((l, i) => (
130- <ListItem
131- key={i}
132- onPress={log}
133- title={l.title}
134- icon={{name: l.icon}}
135- />
136- ))
137- }
138- </List>
139- ```
140-
141- #### Using RN ListView. Implemented with avatars.
142-
143- ```
144- renderRow (rowData, sectionID) {
145- return (
146- <ListItem
147- key={sectionID}
148- onPress={log}
149- title={rowData.title}
150- icon={{name: rowData.icon}}
151- />
152- )
153- }
154-
155- render () {
156- return (
157- <List>
158- <ListView
159- renderRow={this.renderRow}
160- dataSource={this.state.dataSource}
161- />
162- </List>
163- )
164- }
165-
166- ```
167-
168- #### HSList Props
169-
170- | prop | default | type | description |
171- | ---- | ---- | ----| ---- |
172- | containerStyle | none | object (style) | style the list container |
173-
174-
175- #### HSListItem Props
176-
177- | prop | default | type | description |
178- | ---- | ---- | ----| ---- |
179- | avatar | none | string | left avatar (optional) |
180- | avatarStyle | none | object (style) | avatar styling (optional) |
181- | chevronColor | #bdc6cf | string | set chevron color |
182- | component | View or TouchableHighlight if onPress method is added as prop | React Native element | replace element with custom element (optional) |
183- | containerStyle | none | object (style) | additional main container styling (optional) |
184- | hideChevron | false | boolean | set if you do not want a chevron (optional) |
185- | icon | none | object {name, color, style} | icon configuration for left icon (optional) |
186- | onPress | none | function | onPress method for link (optional) |
187- | rightIcon | chevron | string | right icon (optional) ([ material icon name] ( https://design.google.com/icons/ ) ) |
188- | roundAvatar | false | boolan | make left avatar round |
189- | subtitle | none | string | subtitle text (optional) |
190- | subtitleStyle | none | object (style) | additional subtitle styling (optional ) |
191- | title | none | string | main title for list item (required) |
192- | titleStyle | none | object (style) | additional title styling (optional) |
193- | wrapperStyle | none | object (style) | additional wrapper styling (optional) |
194- | underlayColor | white | string | define underlay color for TouchableHighlight (optional) |
195-
196- ## Forms
197-
198- ![ Forms] ( http://i.imgur.com/9idGiXr.png )
199-
200- ```
201- import FormLabel from 'HSFormLabel'
202- import FormInput from 'HSFormInput'
203-
204- <FormLabel containerStyle={styles.labelContainerStyle}>Name</FormLabel>
205- <FormInput onChangeText={someFunction}/>
206-
207- ```
208- ### FormInput
209-
210- ##### This component inherits [ all native TextInput props that come with a standard React Native TextInput element] ( https://facebook.github.io/react-native/docs/textinput.html ) , along with the following:
211-
212- | prop | default | type | description |
213- | ---- | ---- | ----| ---- |
214- | containerStyle | none | object (style) | TextInput container styling (optional) |
215- | inputStyle | none | object (style) | TextInput styling (optional) |
216-
217- ### FormLabel
218-
219- | prop | default | type | description |
220- | ---- | ---- | ----| ---- |
221- | containerStyle | none | object (style) | additional label container style (optional) |
222- | labelStyle | none | object (style) | additional label styling (optional) |
223-
224- ## Card
225-
226- ![ Card Component] ( http://i.imgur.com/eRaY7Ok.png )
227-
228- ```
229- import Card from 'HSCard'
230-
231- <Card
232- title='CARD WITH DIVIDER'>
233- {
234- users.map((u, i) => {}
235- }
236- </Card>
237- ```
238-
239- | prop | default | type | description |
240- | ---- | ---- | ----| ---- |
241- | flexDirection | column | string | flex direction (row or column) |
242- | containerStyle | none | object (style) | outer container style |
243- | wrapperStyle | none | object (style) | inner container style |
244- | title | none | string | optional card title |
245- | titleStyle | none | object (style) | additional title styling (if title provided) |
246- | dividerStyle | none | object (style) | additional divider styling (if title provided) |
247-
248- ## Colors
249-
250- Colors are configured in ` ./src/config/colors ` :
251-
252- ````
253- /**
254- * @providesModule HSColors
255- */
256-
257- export default {
258- primary: '#397af8',
259- primary1: '#4d86f7',
260- primary2: '#6296f9',
261- secondary: '#8F0CE8',
262- secondary2: '#00B233',
263- secondary3: '#00FF48',
264- grey1: '#43484d',
265- grey2: '#5e6977',
266- grey3: '#86939e',
267- grey4: '#bdc6cf',
268- grey5: '#e1e8ee',
269- dkGreyBg: '#232323',
270- greyOutline: '#cbd2d9'
271- }
272-
273-
274- ```
275-
276-
34+ The for React Native Elements is located [ here] ( https://github.com/dabit3/React-Native-Elements ) .
27735
0 commit comments