first commit

Author: csath

.gitignore

@@ -0,0 +1,11 @@
+
+# OSX
+#
+.DS_Store
+
+# node.js
+#
+node_modules
+npm-debug.log
+yarn-error.log
+  

.npmignore

@@ -0,0 +1,2 @@
+node_modules
+example

README.md

@@ -1,2 +1,64 @@
 # react-native-animated-text-input
-React Native text input component with a floating label - using  react-native-reanimated
+React Native text input component with a floating label - using  react-native-reanimated.
+
+## Peer Dependancies
+
+``` 
+react-native-reanimated 
+```
+
+# Demo
+
+![Alt text](/demo.gif?raw=true "AnimatedTextInput")
+
+# Installation
+```
+yarn add react-native-animated-text-input
+```
+ or 
+```
+npm install --save react-native-animated-text-input
+```
+
+# Usage
+```js
+import Input from 'react-native-animated-text-input';
+
+ <Input
+          label={"User name"}
+          value={userName}
+          onChangeText={(t) => setUserName(t)}
+          activeColor={'green'}
+          activeLabelColor={'green'}
+          containerStyle={{ marginVertical: 20 }}
+          onBlur={() => !userName ? setUsernameError('User name is mandotory') : null}
+          error={usernameError}
+ />
+ ```
+ # Prop-types
+ 
+ | Prop name  |Type |
+| ------------- | ------------- |
+| error  | string - error text to display if any error available  |
+| errorColor  | color - color to decorate text input border and error text |
+| errorTextStyle  | Text style - styles to override error text styles  |
+| textInputStyle  | Input style - style obj to oveerride text input styles  |
+| containerStyle  | View style - style to override textinput container (EG: padding , margins)  |
+| labelTextStyle  | Text style -  styles to override label(placeholder) text style  |
+| isKeyboardInput  | boolean -  default true, if false this will not open keboard, instead give a callback via onPress if this is false  |
+| onPress  | function -  function to execute onPress in `isKeyboardInput = true` |
+| labelTextColor  | color -  default label(placeholder) color if labelTextStyle is not set  |
+| activeLabelColor  | color -  default label(placeholder) color if labelTextStyle is not set and label is floaing on top(text input is active) |
+| activeColor  | color -  border color when the text input is active |
+| {...props} | TextInput props - All react native text input props |
+
+# Example
+
+checkout example/test directory and findout a react-native app.
+``` 
+yarn android
+```
+ or 
+```
+yarn ios
+```

animationUtils.js

@@ -0,0 +1,70 @@
+import {
+    Easing,
+    timing as retiming,
+    Clock,
+    Value,
+    set,
+    startClock,
+    clockRunning,
+    stopClock,
+    cond,
+    block,
+    not,
+} from 'react-native-reanimated';
+
+
+export const timing = (params) => {
+    const { clock, easing, duration, from, to } = {
+        clock: new Clock(),
+        easing: Easing.linear,
+        duration: 250,
+        from: 0,
+        to: 1,
+        ...params
+    };
+
+    const state = {
+        finished: new Value(0),
+        position: new Value(0),
+        time: new Value(0),
+        frameTime: new Value(0)
+    };
+
+    const config = {
+        toValue: new Value(0),
+        duration,
+        easing
+    };
+
+    return block([
+        onInit(clock, [set(config.toValue, to), set(state.frameTime, 0)]),
+        animate({
+            clock,
+            fn: retiming,
+            state,
+            config,
+            from
+        })
+    ]);
+};
+
+export const animate = ({
+    fn,
+    clock,
+    state,
+    config,
+    from
+}) =>
+    block([
+        onInit(clock, [
+            set(state.finished, 0),
+            set(state.time, 0),
+            set(state.position, from),
+            startClock(clock)
+        ]),
+        fn(clock, state, config),
+        cond(state.finished, stopClock(clock)),
+        state.position
+    ]);
+
+export const onInit = (clock, sequence) => cond(not(clockRunning(clock)), sequence);

demo.gif

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

example/test/.buckconfig

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

example/test/.eslintrc.js

@@ -0,0 +1,75 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore polyfills
+node_modules/react-native/Libraries/polyfills/.*
+
+; These should not be required directly
+; require from fbjs/lib instead: require('fbjs/lib/warning')
+node_modules/warning/.*
+
+; Flow doesn't support platforms
+.*/Libraries/Utilities/LoadingView.js
+
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.ios.js
+
+munge_underscores=true
+
+module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
+module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+inexact-spread=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+deprecated-utility=error
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+
+[version]
+^0.105.0

example/test/.flowconfig

@@ -0,0 +1 @@
+*.pbxproj -text

example/test/.gitattributes

@@ -0,0 +1,59 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

example/test/.gitignore

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/test/.prettierrc.js

@@ -0,0 +1 @@
+{}

example/test/.watchmanconfig

@@ -0,0 +1,59 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  ScrollView,
+  StatusBar,
+} from 'react-native';
+
+import Input from 'react-native-animated-text-input';
+
+const App: () => React$Node = () => {
+  const [userName, setUserName] = useState('')
+  const [password, setPassword] = useState('')
+  const [usernameError, setUsernameError] = useState('')
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          contentContainerStyle={styles.scrollView}>
+         
+         <Input 
+          label={"User name"}
+          value={userName}
+          onChangeText={(t) => setUserName(t)}
+          activeColor={'green'}
+          activeLabelColor={'green'}
+          containerStyle={{ marginVertical: 20 }}
+          onBlur={() => !userName ? setUsernameError('User name is mandotory') : null}
+          error={usernameError}
+         />
+         <Input 
+          label={"Password"}
+          value={password}
+          onChangeText={(t) => setPassword(t)}
+          containerStyle={{ marginVertical: 20 }}
+         />
+        </ScrollView>
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    padding: 30
+  },
+});
+
+export default App;

example/test/App.js

@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});