parent
f2cacf9e26
commit
1f1a89fdb2
4 changed files with 144 additions and 0 deletions
@ -0,0 +1,54 @@ |
||||
import React, {useState} from 'react'; |
||||
import {TextInput, View, Text, Dimensions, StyleSheet} from 'react-native'; |
||||
|
||||
const FloatingLabelInput = ({ |
||||
label, |
||||
textAlign, |
||||
direction, |
||||
onInputChange, |
||||
labelBackgroundColor, |
||||
onChangeText, |
||||
value, |
||||
...props |
||||
}) => { |
||||
const [isFocused, setIsFocused] = useState(false); |
||||
const styles = StyleSheet.create({ |
||||
labelStyle: { |
||||
position: 'absolute', |
||||
right: 15, |
||||
backgroundColor: labelBackgroundColor, |
||||
zIndex : 100, |
||||
paddingHorizontal: 5, |
||||
textAlign: 'center', |
||||
top: !isFocused ? '50%' : 0, |
||||
fontSize: !isFocused ? Dimensions.get('window').width / 25 : 14, |
||||
transform: [{translateY: -Dimensions.get('window').width / 35}], |
||||
color: !isFocused ? '#000' : '#6CBE44', |
||||
// transition: Transitions.all(Transitions.)
|
||||
}, |
||||
inputStyle: { |
||||
fontSize: Dimensions.get('window').width / 25, |
||||
color: '#000', |
||||
borderWidth: 0.5, |
||||
borderColor: isFocused ? '#6CBE44' : '#555', |
||||
borderRadius: 10, |
||||
padding: 10, |
||||
direction: direction, |
||||
textAlign: textAlign, |
||||
}, |
||||
}); |
||||
return ( |
||||
<View style={{marginTop: 18}}> |
||||
<Text style={styles.labelStyle}>{label}</Text> |
||||
<TextInput |
||||
{...props} |
||||
style={styles.inputStyle} |
||||
onChangeText={text => onChangeText(text)} |
||||
onFocus={() => setIsFocused(true)} |
||||
onBlur={() => (value ? setIsFocused(true) : setIsFocused(false))} |
||||
/> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default FloatingLabelInput; |
||||
@ -0,0 +1,31 @@ |
||||
import React from 'react'; |
||||
import {StyleSheet, Text, Pressable, Dimensions } from 'react-native'; |
||||
|
||||
export default function FormButton({text, color, onPress}) { |
||||
const styles = StyleSheet.create({ |
||||
button: { |
||||
width : '100%', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
paddingVertical: 12, |
||||
paddingHorizontal: 0, |
||||
borderRadius: 6, |
||||
elevation: 3, |
||||
backgroundColor: color, |
||||
}, |
||||
text: { |
||||
fontSize: Dimensions.get('window').width / 25, |
||||
fontWeight: '300', |
||||
color: 'white', |
||||
}, |
||||
}); |
||||
return ( |
||||
<Pressable |
||||
color={color} |
||||
style={styles.button} |
||||
onPress={() => onPress} |
||||
> |
||||
<Text style={styles.text}>{text}</Text> |
||||
</Pressable> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue