From fde6de568cb7d1095268ebdaa842978040c8dbb6 Mon Sep 17 00:00:00 2001 From: HariAcidReign Date: Sat, 15 May 2021 03:07:10 +0530 Subject: [PATCH 1/3] Few bugs left --- src/views/floatingInput.tsx | 102 ++++++++++++++++++++++++++++++++++++ src/views/inputs.tsx | 13 ++++- 2 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 src/views/floatingInput.tsx diff --git a/src/views/floatingInput.tsx b/src/views/floatingInput.tsx new file mode 100644 index 00000000..86aaf35b --- /dev/null +++ b/src/views/floatingInput.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { + View, + Animated, + StyleSheet, + TextInput, + TextStyle, + StyleProp, + TextInputProps, +} from 'react-native'; +import { RneFunctionComponent } from 'react-native-elements/dist/helpers'; +import { withTheme } from 'react-native-elements/dist/config/index'; +export type FloatingInputProps = TextInputProps & { + label?: string; + labelActiveSize?: number; + labelInActiveSize?: number; + labelActiveColor?: string; + labelInActiveColor?: string; + textInputStyles?: StyleProp; +}; +const FloatingTextInput: RneFunctionComponent = ({ + labelActiveSize = 14, + labelInActiveSize = 15, + labelActiveColor = 'grey', + labelInActiveColor = '#86939E', + textInputStyles = {}, + ...props +}) => { + const [isFieldActive, setIsFieldActive] = React.useState(false); + const { current: position } = React.useRef( + new Animated.Value(isFieldActive ? 1 : 0) + ); + const handleFocus = () => { + if (!isFieldActive) { + setIsFieldActive(true); + Animated.timing(position, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }).start(); + } + }; + const handleBlur = () => { + if (isFieldActive && props.value) { + setIsFieldActive(false); + Animated.timing(position, { + toValue: 0, + duration: 250, + useNativeDriver: false, + }).start(); + } + }; + const returnAnimatedlabelStyle = () => { + return { + top: position.interpolate({ + inputRange: [0, 1], + outputRange: [14, 0], + }), + fontSize: isFieldActive ? labelActiveSize : labelInActiveSize, + color: isFieldActive ? labelActiveColor : labelInActiveColor, + }; + }; + return ( + + + {props.label} + + + + ); +}; +const styles = StyleSheet.create({ + container: { + width: '90%', + borderRadius: 5, + borderStyle: 'solid', + borderColor: '#86939E', + borderWidth: 0.5, + height: 50, + marginVertical: 6, + }, + textInput: { + fontSize: 15, + marginTop: 20, + marginLeft: 13, + fontFamily: 'Avenir-Medium', + color: '#86939E', + }, + labelStyles: { + position: 'absolute', + fontFamily: 'Avenir-Medium', + left: 13, + }, +}); +export { FloatingTextInput }; +export default withTheme(FloatingTextInput, 'FloatingInput'); \ No newline at end of file diff --git a/src/views/inputs.tsx b/src/views/inputs.tsx index 6c565602..70013e34 100644 --- a/src/views/inputs.tsx +++ b/src/views/inputs.tsx @@ -16,6 +16,7 @@ import { ThemeProvider, InputProps, } from 'react-native-elements'; +import FloatingTextInput, { FloatingInputProps } from './floatingInput'; import { Header, SubHeader } from '../components/header'; const SCREEN_WIDTH = Dimensions.get('window').width; @@ -46,6 +47,8 @@ const Inputs: React.FunctionComponent = () => { }; const inputProps = {}; + const floatingInputProps = {}; + return ( = () => { placeholder="Simple input" style={InputFieldsStyle} /> + Date: Sat, 15 May 2021 05:04:21 +0530 Subject: [PATCH 2/3] Yarn lint fixes --- src/views/floatingInput.tsx | 2 +- src/views/inputs.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/floatingInput.tsx b/src/views/floatingInput.tsx index 86aaf35b..66303f25 100644 --- a/src/views/floatingInput.tsx +++ b/src/views/floatingInput.tsx @@ -99,4 +99,4 @@ const styles = StyleSheet.create({ }, }); export { FloatingTextInput }; -export default withTheme(FloatingTextInput, 'FloatingInput'); \ No newline at end of file +export default withTheme(FloatingTextInput, 'FloatingInput'); diff --git a/src/views/inputs.tsx b/src/views/inputs.tsx index 70013e34..386db294 100644 --- a/src/views/inputs.tsx +++ b/src/views/inputs.tsx @@ -438,4 +438,4 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', }, -}); \ No newline at end of file +}); From c233e42f37c03b8111b702dafb9750e8dec8f344 Mon Sep 17 00:00:00 2001 From: HariAcidReign Date: Sun, 16 May 2021 11:29:52 +0530 Subject: [PATCH 3/3] Added Floating Label demo --- src/views/floatingInput.tsx | 102 ------------------------------------ src/views/inputs.tsx | 3 +- 2 files changed, 2 insertions(+), 103 deletions(-) delete mode 100644 src/views/floatingInput.tsx diff --git a/src/views/floatingInput.tsx b/src/views/floatingInput.tsx deleted file mode 100644 index 66303f25..00000000 --- a/src/views/floatingInput.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react'; -import { - View, - Animated, - StyleSheet, - TextInput, - TextStyle, - StyleProp, - TextInputProps, -} from 'react-native'; -import { RneFunctionComponent } from 'react-native-elements/dist/helpers'; -import { withTheme } from 'react-native-elements/dist/config/index'; -export type FloatingInputProps = TextInputProps & { - label?: string; - labelActiveSize?: number; - labelInActiveSize?: number; - labelActiveColor?: string; - labelInActiveColor?: string; - textInputStyles?: StyleProp; -}; -const FloatingTextInput: RneFunctionComponent = ({ - labelActiveSize = 14, - labelInActiveSize = 15, - labelActiveColor = 'grey', - labelInActiveColor = '#86939E', - textInputStyles = {}, - ...props -}) => { - const [isFieldActive, setIsFieldActive] = React.useState(false); - const { current: position } = React.useRef( - new Animated.Value(isFieldActive ? 1 : 0) - ); - const handleFocus = () => { - if (!isFieldActive) { - setIsFieldActive(true); - Animated.timing(position, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }).start(); - } - }; - const handleBlur = () => { - if (isFieldActive && props.value) { - setIsFieldActive(false); - Animated.timing(position, { - toValue: 0, - duration: 250, - useNativeDriver: false, - }).start(); - } - }; - const returnAnimatedlabelStyle = () => { - return { - top: position.interpolate({ - inputRange: [0, 1], - outputRange: [14, 0], - }), - fontSize: isFieldActive ? labelActiveSize : labelInActiveSize, - color: isFieldActive ? labelActiveColor : labelInActiveColor, - }; - }; - return ( - - - {props.label} - - - - ); -}; -const styles = StyleSheet.create({ - container: { - width: '90%', - borderRadius: 5, - borderStyle: 'solid', - borderColor: '#86939E', - borderWidth: 0.5, - height: 50, - marginVertical: 6, - }, - textInput: { - fontSize: 15, - marginTop: 20, - marginLeft: 13, - fontFamily: 'Avenir-Medium', - color: '#86939E', - }, - labelStyles: { - position: 'absolute', - fontFamily: 'Avenir-Medium', - left: 13, - }, -}); -export { FloatingTextInput }; -export default withTheme(FloatingTextInput, 'FloatingInput'); diff --git a/src/views/inputs.tsx b/src/views/inputs.tsx index 386db294..1010f985 100644 --- a/src/views/inputs.tsx +++ b/src/views/inputs.tsx @@ -11,12 +11,13 @@ import { import { Input, SearchBar, + FloatingTextInput, Icon, Button, ThemeProvider, InputProps, + FloatingInputProps, } from 'react-native-elements'; -import FloatingTextInput, { FloatingInputProps } from './floatingInput'; import { Header, SubHeader } from '../components/header'; const SCREEN_WIDTH = Dimensions.get('window').width;