inputRef prop is here and Example is updated with inputRef usage with Clear TextInput example

Author: WrathChaos

README.md

@@ -23,7 +23,7 @@
  </td>
  </tr>
  <tr>
- <td align="center"> 
+ <td align="center">
   <img alt="React Native Text Input" src="assets/Screenshots/react-native-text-input.png" width="686px" />
  </td>
  <td align="center">
@@ -106,6 +106,7 @@ should work of the example project.
 | textInputStyle | TextStyle | default | set or override the style object for the text input style |
 | iconImageStyle | ImageStyle | default | set or override the style object for the image icon style |
 | ImageComponent | Image | default | set your own component instead of default react-native Image component |
+| inputRef | reference | undefined | set the TextInput reference for the programmatic usage |
 
 ## Future Plans
 

example/App.tsx

@@ -1,8 +1,36 @@
 import React from "react";
-import { StatusBar, SafeAreaView } from "react-native";
-import RNTextInput from "@freakycoder/react-native-text-input";
+import {
+ Text,
+ StatusBar,
+ TextInput,
+ SafeAreaView,
+ TouchableOpacity,
+} from "react-native";
+// import RNTextInput from "@freakycoder/react-native-text-input";
+import RNTextInput from "./lib/RNTextInput";
 
 const App = () => {
+ let _inputRef: TextInput | null = null;
+
+ const renderClearInputButton = () => (
+ <TouchableOpacity
+ style={{
+ width: 300,
+ height: 50,
+ marginTop: 64,
+ borderRadius: 12,
+ backgroundColor: "#d7aefb",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onPress={() => {
+ _inputRef?.clear();
+ }}
+ >
+ <Text style={{ color: "#fff", fontWeight: "bold" }}>Clear TextInput</Text>
+ </TouchableOpacity>
+ );
+
  return (
  <>
  <StatusBar barStyle="dark-content" />
@@ -15,9 +43,12 @@ const App = () => {
  }}
  >
  <RNTextInput
+ inputRef={(ref: any) => (_inputRef = ref)}
  placeholder="E-mail"
  onChangeText={(text: string) => console.log("Text: ", text)}
+ onPress={() => _inputRef?.focus()}
  />
+ {renderClearInputButton()}
  </SafeAreaView>
  </>
  );

example/lib/RNTextInput.style.ts

@@ -0,0 +1,43 @@
+import { ViewStyle, ImageStyle, TextStyle, StyleSheet } from "react-native";
+
+interface Style {
+ container: ViewStyle;
+ contentContainer: ViewStyle;
+ textInputStyle: TextStyle;
+ buttonStyle: ViewStyle;
+ iconImageStyle: ImageStyle;
+}
+
+export default StyleSheet.create<Style>({
+ container: {
+ height: 60,
+ width: 300,
+ paddingLeft: 16,
+ paddingRight: 3,
+ borderRadius: 16,
+ justifyContent: "center",
+ backgroundColor: "#fdfdfd",
+ },
+ contentContainer: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ },
+ textInputStyle: {
+ width: "78%",
+ fontSize: 16,
+ fontWeight: "800",
+ },
+ buttonStyle: {
+ width: 55,
+ height: 55,
+ borderRadius: 16,
+ alignItems: "center",
+ justifyContent: "center",
+ backgroundColor: "#933fe3",
+ },
+ iconImageStyle: {
+ width: 20,
+ height: 20,
+ tintColor: "#fdfdfd",
+ },
+});

example/lib/RNTextInput.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import {
+ View,
+ Image,
+ StyleProp,
+ TextInput,
+ ViewStyle,
+ TextStyle,
+ ImageStyle,
+ ViewProps,
+ TextInputProps,
+} from "react-native";
+import RNBounceable, {
+ IRNBounceableProps,
+} from "@freakycoder/react-native-bounceable";
+/**
+ * ? Local Imports
+ */
+import styles from "./RNTextInput.style";
+
+const defaultArrowIcon = require("./local-assets/right-arrow.png");
+
+type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+
+export interface ISource {
+ source: string | { uri: string };
+}
+
+interface IRNTextInputProps extends IRNBounceableProps, TextInputProps {
+ inputRef?: any;
+ ImageComponent?: any;
+ placeholder?: string;
+ buttonStyle?: ViewStyle;
+ textInputStyle?: TextStyle;
+ iconImageStyle?: ImageStyle;
+ disableButton?: boolean;
+ style?: CustomStyleProp;
+ onPress?: () => void;
+}
+
+const RNTextInput: React.FC<IRNTextInputProps> = ({
+ style,
+ inputRef,
+ placeholder,
+ buttonStyle,
+ textInputStyle,
+ iconImageStyle,
+ disableButton = false,
+ ImageComponent = Image,
+ onPress,
+ ...props
+}) => {
+ const renderContent = () => (
+ <View style={styles.contentContainer}>
+ <TextInput
+ placeholderTextColor="#ead4ff"
+ {...props}
+ ref={inputRef}
+ placeholder={placeholder}
+ style={[styles.textInputStyle, textInputStyle]}
+ />
+ {!disableButton && (
+ <RNBounceable style={[styles.buttonStyle, buttonStyle]}>
+ <ImageComponent
+ source={defaultArrowIcon}
+ style={[styles.iconImageStyle, iconImageStyle]}
+ />
+ </RNBounceable>
+ )}
+ </View>
+ );
+
+ return (
+ <RNBounceable
+ bounceEffect={0.97}
+ {...props}
+ style={[styles.container, style]}
+ onPress={onPress}
+ >
+ {renderContent()}
+ </RNBounceable>
+ );
+};
+
+export default RNTextInput;

example/lib/local-assets/right-arrow.png

@@ -27,6 +27,7 @@ export interface ISource {
 }
 
 interface IRNTextInputProps extends IRNBounceableProps, TextInputProps {
+ inputRef?: any;
  ImageComponent?: any;
  placeholder?: string;
  buttonStyle?: ViewStyle;
@@ -39,6 +40,7 @@ interface IRNTextInputProps extends IRNBounceableProps, TextInputProps {
 
 const RNTextInput: React.FC<IRNTextInputProps> = ({
  style,
+ inputRef,
  placeholder,
  buttonStyle,
  textInputStyle,
@@ -48,20 +50,13 @@ const RNTextInput: React.FC<IRNTextInputProps> = ({
  onPress,
  ...props
 }) => {
- let inputRef: TextInput | null = null;
-
- const handleOnPress = () => {
- inputRef?.focus();
- onPress && onPress();
- };
-
  const renderContent = () => (
  <View style={styles.contentContainer}>
  <TextInput
  placeholderTextColor="#ead4ff"
  {...props}
+ ref={inputRef}
  placeholder={placeholder}
- ref={(ref) => (inputRef = ref)}
  style={[styles.textInputStyle, textInputStyle]}
  />
  {!disableButton && (
@@ -80,7 +75,7 @@ const RNTextInput: React.FC<IRNTextInputProps> = ({
  bounceEffect={0.97}
  {...props}
  style={[styles.container, style]}
- onPress={handleOnPress}
+ onPress={onPress}
  >
  {renderContent()}
  </RNBounceable>

lib/RNTextInput.tsx

@@ -1,6 +1,6 @@
 {
  "name": "@freakycoder/react-native-text-input",
- "version": "0.1.1",
+ "version": "0.1.2",
  "description": "Modern text input with fully customization options for React Native",
  "main": "./build/dist/RNTextInput.js",
  "repository": "git@github.com:WrathChaos/react-native-text-input.git",