Skip to content

Commit 29dbd79

Browse files
halilbhalilb
committed
added more examples and adjusted colors
1 parent d27d363 commit 29dbd79

File tree

12 files changed

+208
-106
lines changed

12 files changed

+208
-106
lines changed

‎Example/TextInputEffectsExample.js

Lines changed: 176 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,26 @@ export default class TextInputEffectsExample extends Component {
3030
style={styles.container}
3131
contentContainerStyle={styles.content}
3232
>
33-
<View style={[styles.card, { backgroundColor: '#8781bd' }]}>
33+
<View style={[styles.card1, { backgroundColor: '#F9F7F6' }]}>
34+
<Text style={styles.title}>Kaede</Text>
35+
<Kaede
36+
label={'Website'}
37+
/>
38+
<Kaede
39+
style={styles.input}
40+
label={'Number'}
41+
labelStyle={{
42+
color: 'white',
43+
backgroundColor: '#fcb794',
44+
}}
45+
inputStyle={{
46+
color: 'white',
47+
backgroundColor: '#db8d67',
48+
}}
49+
keyboardType="numeric"
50+
/>
51+
</View>
52+
<View style={[styles.card2, { backgroundColor: '#8781bd' }]}>
3453
<Text style={styles.title}>Sae</Text>
3554
<Sae
3655
label={'Email Address'}
@@ -44,72 +63,153 @@ export default class TextInputEffectsExample extends Component {
4463
iconClass={FontAwesomeIcon}
4564
/>
4665
</View>
47-
<Kaede
48-
style={styles.input}
49-
label={'Number'}
50-
labelStyle={{
51-
color: '#990fe2',
52-
backgroundColor: '#f5f785',
53-
}}
54-
inputStyle={{
55-
color: 'white',
56-
backgroundColor: '#d693f9',
57-
}}
58-
keyboardType="numeric"
59-
/>
60-
<Hoshi
61-
style={styles.input}
62-
label={'Street'}
63-
backgroundColor={'#F9F7F6'}
64-
borderColor={'#00ffaa'}
65-
/>
66-
<Fumi
67-
style={styles.input}
68-
label={'Degree'}
69-
iconClass={FontAwesomeIcon}
70-
iconName={'graduation-cap'}
71-
iconColor={'#00aeef'}
72-
/>
73-
<Jiro
74-
style={styles.input}
75-
label={'Cat\'s name'}
76-
borderColor={'#00ffaa'}
77-
/>
78-
<Isao
79-
style={styles.input}
80-
label={'Middle name'}
81-
borderColor={'#da7071'}
82-
/>
83-
<Akira
84-
style={styles.input}
85-
label={'Maiden Name'}
86-
borderColor={'#7A7593'}
87-
/>
88-
<Madoka
89-
style={styles.input}
90-
label={'Weight'}
91-
borderColor={'#7A7593'}
92-
/>
93-
<Hideo
94-
style={styles.input}
95-
iconClass={FontAwesomeIcon}
96-
iconName={'envelope'}
97-
iconColor={'white'}
98-
/>
99-
<Kohana
100-
style={styles.input}
101-
label={'Phone'}
102-
iconClass={FontAwesomeIcon}
103-
iconName={'phone'}
104-
iconColor={'#ddd'}
105-
/>
106-
<Makiko
107-
style={styles.input}
108-
label={'Comment'}
109-
iconClass={FontAwesomeIcon}
110-
iconName={'comment'}
111-
iconColor={'white'}
112-
/>
66+
<View style={[styles.card1, { backgroundColor: '#F9F7F6' }]}>
67+
<Text style={styles.title}>Hoshi</Text>
68+
<Hoshi
69+
label={'Town'}
70+
borderColor={'#b76c94'}
71+
backgroundColor={'#F9F7F6'}
72+
/>
73+
<Hoshi
74+
style={styles.input}
75+
label={'Street'}
76+
backgroundColor={'#F9F7F6'}
77+
borderColor={'#7ac1ba'}
78+
/>
79+
</View>
80+
<View style={[styles.card1, { backgroundColor: '#dee0e0' }]}>
81+
<Text style={styles.title}>Jiro</Text>
82+
<Jiro
83+
label={'Dog\'s name'}
84+
borderColor={'#9b537a'}
85+
inputStyle={{ color: 'white' }}
86+
/>
87+
<Jiro
88+
style={styles.input}
89+
label={'Cat\'s name'}
90+
borderColor={'#f7c665'}
91+
inputStyle={{ color: 'white' }}
92+
/>
93+
</View>
94+
<View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
95+
<Text style={styles.title}>Fumi</Text>
96+
<Fumi
97+
label={'Course Name'}
98+
iconClass={FontAwesomeIcon}
99+
iconName={'university'}
100+
iconColor={'#f95a25'}
101+
/>
102+
<Fumi
103+
style={styles.input}
104+
label={'Degree'}
105+
iconClass={FontAwesomeIcon}
106+
iconName={'graduation-cap'}
107+
iconColor={'#77116a'}
108+
/>
109+
</View>
110+
<View style={[styles.card1, { backgroundColor: '#7f3e61' }]}>
111+
<Text style={styles.title}>Isao</Text>
112+
<Isao
113+
label={'First Name'}
114+
activeColor={'#da7071'}
115+
passiveColor={'#dadada'}
116+
/>
117+
<Isao
118+
style={styles.input}
119+
label={'Middle Name'}
120+
activeColor={'#da7071'}
121+
passiveColor={'#dadada'}
122+
/>
123+
</View>
124+
<View style={[styles.card2, { backgroundColor: '#f9f3cf' }]}>
125+
<Text style={styles.title}>Akira</Text>
126+
<Akira
127+
label={'First Name'}
128+
borderColor={'#a5d1cc'}
129+
labelStyle={{ color: '#ac83c4' }}
130+
/>
131+
<Akira
132+
style={styles.input}
133+
label={'Maiden Name'}
134+
borderColor={'#a5d1cc'}
135+
labelStyle={{ color: '#ac83c4' }}
136+
/>
137+
</View>
138+
<View style={styles.card2}>
139+
<Text style={styles.title}>Madoka</Text>
140+
<Madoka
141+
style={styles.input}
142+
label={'Frequency'}
143+
borderColor={'#aee2c9'}
144+
labelStyle={{ color: '#008445' }}
145+
inputStyle={{ color: '#f4a197' }}
146+
/>
147+
<Madoka
148+
style={styles.input}
149+
label={'Weight'}
150+
borderColor={'#aee2c9'}
151+
labelStyle={{ color: '#008445' }}
152+
inputStyle={{ color: '#f4a197' }}
153+
/>
154+
</View>
155+
<View style={[styles.card2, { backgroundColor: '#6b6b6b' }]}>
156+
<Text style={styles.title}>Hideo</Text>
157+
<Hideo
158+
iconClass={FontAwesomeIcon}
159+
iconName={'envelope'}
160+
iconColor={'white'}
161+
iconBackgroundColor={'#f2a59d'}
162+
inputStyle={{ color: '#464949' }}
163+
/>
164+
<Hideo
165+
style={styles.input}
166+
iconClass={FontAwesomeIcon}
167+
iconName={'user'}
168+
iconColor={'white'}
169+
iconBackgroundColor={'#f2a59d'}
170+
inputStyle={{ color: '#464949' }}
171+
/>
172+
</View>
173+
<View style={[styles.card2, { backgroundColor: '#b792a6' }]}>
174+
<Text style={styles.title}>Kohana</Text>
175+
<Kohana
176+
style={{ backgroundColor: '#f9f5ed' }}
177+
label={'Line'}
178+
iconClass={FontAwesomeIcon}
179+
iconName={'bus'}
180+
iconColor={'#f4d29a'}
181+
labelStyle={{ color: '#91627b' }}
182+
inputStyle={{ color: '#91627b' }}
183+
/>
184+
<Kohana
185+
style={[styles.input, { backgroundColor: '#f9f5ed' }]}
186+
label={'Phone'}
187+
iconClass={FontAwesomeIcon}
188+
iconName={'phone'}
189+
iconColor={'#ddd'}
190+
iconColor={'#f4d29a'}
191+
labelStyle={{ color: '#91627b' }}
192+
inputStyle={{ color: '#91627b' }}
193+
/>
194+
</View>
195+
<View style={[styles.card2, { backgroundColor: '#d0efe0' }]}>
196+
<Text style={styles.title}>Makiko</Text>
197+
<Makiko
198+
label={'Destination'}
199+
iconClass={FontAwesomeIcon}
200+
iconName={'plane'}
201+
iconColor={'white'}
202+
inputStyle={{ color: '#db786d' }}
203+
/>
204+
<Makiko
205+
style={styles.input}
206+
label={'Comment'}
207+
iconClass={FontAwesomeIcon}
208+
iconName={'comment'}
209+
iconColor={'white'}
210+
inputStyle={{ color: '#db786d' }}
211+
/>
212+
</View>
113213
</ScrollView>
114214
);
115215
}
@@ -119,21 +219,25 @@ const styles = StyleSheet.create({
119219
container: {
120220
flex: 1,
121221
paddingTop: 24,
122-
backgroundColor: '#F9F7F6',
222+
backgroundColor: 'white',
123223
},
124224
content: {
125-
// not cool but enough to make all inputs visible when keyboard is active
225+
// not cool but good enough to make all inputs visible when keyboard is active
126226
paddingBottom: 300,
127227
},
128-
card: {
129-
height: 180,
228+
card1: {
229+
paddingVertical: 16,
230+
},
231+
card2: {
232+
padding: 16,
130233
},
131234
input: {
132235
marginTop: 4,
133236
},
134237
title: {
238+
paddingBottom: 16,
135239
textAlign: 'center',
136-
color: 'white',
240+
color: '#404d5b',
137241
fontSize: 20,
138242
fontWeight: 'bold',
139243
opacity: 0.8,

‎lib/Akira.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class Akira extends BaseInput {
4545
} = this.state;
4646

4747
return (
48-
<View style={[containerStyle, styles.container]} onLayout={this._onLayout}>
48+
<View style={containerStyle} onLayout={this._onLayout}>
4949
<TouchableWithoutFeedback onPress={this._focus}>
5050
<Animated.View style={{
5151
width,
@@ -134,9 +134,6 @@ export default class Akira extends BaseInput {
134134
}
135135

136136
const styles = StyleSheet.create({
137-
container: {
138-
marginHorizontal: 16,
139-
},
140137
label: {
141138
backgroundColor: 'transparent',
142139
fontFamily: 'Arial',

‎lib/Fumi.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default class Fumi extends BaseInput {
9090
height: inputHeight,
9191
top: focusedAnim.interpolate({
9292
inputRange: [0, 0.5, 0.51, 0.7, 1],
93-
outputRange: [22, ANIM_PATH, NEGATIVE_ANIM_PATH, NEGATIVE_ANIM_PATH, 8],
93+
outputRange: [24, ANIM_PATH, NEGATIVE_ANIM_PATH, NEGATIVE_ANIM_PATH, PADDING / 2],
9494
}),
9595
}}>
9696
<Animated.Text style={[styles.label, labelStyle, {
@@ -113,7 +113,6 @@ export default class Fumi extends BaseInput {
113113
style={[styles.textInput, inputStyle, {
114114
marginLeft: ICON_WIDTH + PADDING,
115115
color: iconColor,
116-
marginBottom: PADDING * -1,
117116
}]}
118117
value={value}
119118
onBlur={this._onBlur}
@@ -127,12 +126,9 @@ export default class Fumi extends BaseInput {
127126

128127
const styles = StyleSheet.create({
129128
container: {
130-
flex: 1,
131-
flexDirection: 'row',
132-
backgroundColor: 'white',
133-
marginHorizontal: PADDING,
134129
overflow: 'hidden',
135130
paddingTop: 16,
131+
backgroundColor: 'white',
136132
},
137133
label: {
138134
fontSize: 18,

‎lib/Hideo.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ const styles = StyleSheet.create({
9999
container: {
100100
flex: 1,
101101
flexDirection: 'row',
102-
marginHorizontal: 16,
103102
},
104103
textInput: {
105104
flex: 1,

‎lib/Hoshi.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,20 +90,23 @@ export default class Hoshi extends BaseInput {
9090
const styles = StyleSheet.create({
9191
container: {
9292
borderBottomWidth: 2,
93+
borderBottomColor: '#b9c1ca',
9394
},
9495
labelContainer: {
9596
position: 'absolute',
9697
},
9798
label: {
98-
fontSize: 18,
99+
fontSize: 16,
100+
fontWeight: 'bold',
99101
color: '#6a7989',
100102
},
101103
textInput: {
102104
position: 'absolute',
103105
bottom: 8,
104106
left: 16,
105-
color: 'black',
107+
color: '#6a7989',
106108
fontSize: 18,
109+
fontWeight: 'bold',
107110
},
108111
labelMask: {
109112
height: 24,

0 commit comments

Comments
 (0)