From 1f1a89fdb25d0fabe9accd02e56e34bde10b4105 Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Sat, 9 Oct 2021 08:37:51 +0330 Subject: [PATCH] reza added two component --- package.json | 1 + src/components/CustomTextInput.js | 54 ++++++++++++++++++++++++++++ src/components/FormButton.js | 31 +++++++++++++++++ yarn.lock | 58 +++++++++++++++++++++++++++++++ 4 files changed, 144 insertions(+) create mode 100644 src/components/CustomTextInput.js create mode 100644 src/components/FormButton.js diff --git a/package.json b/package.json index 8a72728..e91c7f9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@react-navigation/native-stack": "^6.2.2", "@react-navigation/stack": "^6.0.9", "axios": "^0.22.0", + "jetifier": "^2.0.0", "react": "17.0.2", "react-native": "0.65.1", "react-native-awesome-alerts": "^1.5.2", diff --git a/src/components/CustomTextInput.js b/src/components/CustomTextInput.js new file mode 100644 index 0000000..1da25fd --- /dev/null +++ b/src/components/CustomTextInput.js @@ -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 ( + + {label} + onChangeText(text)} + onFocus={() => setIsFocused(true)} + onBlur={() => (value ? setIsFocused(true) : setIsFocused(false))} + /> + + ); +}; + +export default FloatingLabelInput; \ No newline at end of file diff --git a/src/components/FormButton.js b/src/components/FormButton.js new file mode 100644 index 0000000..6aa5c17 --- /dev/null +++ b/src/components/FormButton.js @@ -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 ( + onPress} + > + {text} + + ); +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index a3becd1..e4e3931 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1024,6 +1024,13 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@react-native-community/async-storage@^1.12.1": + version "1.12.1" + resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.12.1.tgz#25f821b4f6b13abe005ad67e47c6f1cee9f27b24" + integrity sha512-70WGaH3PKYASi4BThuEEKMkyAgE9k7VytBqmgPRx3MzJx9/MkspwqJGmn3QLCgHLIFUgF1pit2mWICbRJ3T3lg== + dependencies: + deep-assign "^3.0.0" + "@react-native-community/cli-debugger-ui@^6.0.0-rc.0": version "6.0.0-rc.0" resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-6.0.0-rc.0.tgz#774378626e4b70f5e1e2e54910472dcbaffa1536" @@ -2450,6 +2457,18 @@ dedent@^0.7.0: resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw= +deep-assign@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2" + integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw== + dependencies: + is-obj "^1.0.0" + +deep-diff@^0.3.5: + version "0.3.8" + resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84" + integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ= + deep-is@^0.1.3, deep-is@~0.1.3: version "0.1.4" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" @@ -3711,6 +3730,11 @@ is-number@^7.0.0: resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== +is-obj@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" + integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8= + is-plain-object@^2.0.3, is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" @@ -4333,6 +4357,11 @@ jetifier@^1.6.2: resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.8.tgz#e88068697875cbda98c32472902c4d3756247798" integrity sha512-3Zi16h6L5tXDRQJTb221cnRoVG9/9OvreLdLU2/ZjRv/GILL+2Cemt0IKvkowwkDpvouAU1DQPOJ7qaiHeIdrw== +jetifier@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-2.0.0.tgz#699391367ca1fe7bc4da5f8bf691eb117758e4cb" + integrity sha512-J4Au9KuT74te+PCCCHKgAjyLlEa+2VyIAEPNCdE5aNkAJ6FAJcAqcdzEkSnzNksIa9NkGmC4tPiClk2e7tCJuQ== + joi@^17.2.1: version "17.4.2" resolved "https://registry.yarnpkg.com/joi/-/joi-17.4.2.tgz#02f4eb5cf88e515e614830239379dcbbe28ce7f7" @@ -5613,6 +5642,13 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-native-awesome-alerts@^1.5.2: + version "1.5.2" + resolved "https://registry.yarnpkg.com/react-native-awesome-alerts/-/react-native-awesome-alerts-1.5.2.tgz#eb8e05a8bc22ac304c59f82eab6be19308942c32" + integrity sha512-PPTzKLpwDKbjeghvrRkg7OunND4C7d4bQORVLBnhqUK2z2PfZiI3UCULU0tczzeOyavv5hVSrYNXKPXlvhfmVg== + dependencies: + prop-types "^15.7.2" + react-native-codegen@^0.0.7: version "0.0.7" resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.7.tgz#86651c5c5fec67a8077ef7f4e36f7ed459043e14" @@ -5622,6 +5658,11 @@ react-native-codegen@^0.0.7: jscodeshift "^0.11.0" nullthrows "^1.1.1" +react-native-device-info@^8.4.0: + version "8.4.0" + resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.4.0.tgz#c434af5c928c7f8e2c3b1a1ca07061b83d50ccd4" + integrity sha512-/ZHDJajkEmjNmjvm52o7pqIpR2uKocD66iH00GMe5QpUdM9u9vDxS2hgcRbgrVaKEfA5IRIBctpalYMrrbQU+Q== + react-native-gesture-handler@^1.10.3: version "1.10.3" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0" @@ -5633,6 +5674,11 @@ react-native-gesture-handler@^1.10.3: invariant "^2.2.4" prop-types "^15.7.2" +react-native-restart@0.0.22: + version "0.0.22" + resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.22.tgz#81fcb7f31e35951d85410c68b9556acf3ab88705" + integrity sha512-XwCqAMAKsO8yCM3xACPFKvkDQZe41lcavOuO0gUEu803IuTLtciualCq/qs83ryRDCDh1jkXYRqFjsGjLMCN3Q== + react-native-safe-area-context@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed" @@ -5752,6 +5798,18 @@ redux-devtools-extension@^2.13.9: resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7" integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A== +redux-logger@^3.0.6: + version "3.0.6" + resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf" + integrity sha1-91VZZvMJjzyIYExEnPC69XeCdL8= + dependencies: + deep-diff "^0.3.5" + +redux-persist@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8" + integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ== + redux-thunk@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"