packages = new PackageList(this).getPackages();
27 | // Packages that cannot be autolinked yet can be added manually here, for example:
28 | // packages.add(new MyReactNativePackage());
29 | return packages;
30 | }
31 |
32 | @Override
33 | protected String getJSMainModuleName() {
34 | return "index";
35 | }
36 | };
37 |
38 | @Override
39 | public ReactNativeHost getReactNativeHost() {
40 | return mReactNativeHost;
41 | }
42 |
43 | @Override
44 | public void onCreate() {
45 | super.onCreate();
46 | SoLoader.init(this, /* native exopackage */ false);
47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
48 | }
49 |
50 | /**
51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like
52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
53 | *
54 | * @param context
55 | * @param reactInstanceManager
56 | */
57 | private static void initializeFlipper(
58 | Context context, ReactInstanceManager reactInstanceManager) {
59 | if (BuildConfig.DEBUG) {
60 | try {
61 | /*
62 | We use reflection here to pick up the class that initializes Flipper,
63 | since Flipper library is not available in release mode
64 | */
65 | Class aClass = Class.forName("com.rnsearch.ReactNativeFlipper");
66 | aClass
67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
68 | .invoke(null, context, reactInstanceManager);
69 | } catch (ClassNotFoundException e) {
70 | e.printStackTrace();
71 | } catch (NoSuchMethodException e) {
72 | e.printStackTrace();
73 | } catch (IllegalAccessException e) {
74 | e.printStackTrace();
75 | } catch (InvocationTargetException e) {
76 | e.printStackTrace();
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 | ## [1.4.0](https://github.com/timelessco/react-native-search-component/compare/v1.3.1...v1.4.0) (2020-10-31)
6 |
7 |
8 | ### Features
9 |
10 | * :tada: Added types ([89594e5](https://github.com/timelessco/react-native-search-component/commit/89594e5d45e183ddc78671c2074c80a332d9fe33))
11 | * Added typescript ([f25f44d](https://github.com/timelessco/react-native-search-component/commit/f25f44d0c20b45bb6fb0d61a4e31ed239a584333))
12 |
13 |
14 | ### Bug Fixes
15 |
16 | * :zap: Added missing props ([d97654b](https://github.com/timelessco/react-native-search-component/commit/d97654bd92ec35a38053547cf48eb025da7b6b51))
17 | * :zap: Added prop types for missing props ([06aa32b](https://github.com/timelessco/react-native-search-component/commit/06aa32b8d349822285aaef14c17cbea20e7e1e66))
18 | * :zap: Added proptypes for customSearchInputStyle and customCancelTextStyle ([287e0b3](https://github.com/timelessco/react-native-search-component/commit/287e0b325bb0054c766a182600424b1e9cbfa4e5))
19 | * Changed type of render function ([e3aef0d](https://github.com/timelessco/react-native-search-component/commit/e3aef0dc1d7802d97c84fe41279dcd6911aebbb5))
20 |
21 | ### [1.3.1](https://github.com/timelessco/react-native-search-component/compare/v1.3.0...v1.3.1) (2020-10-30)
22 |
23 | ## [1.3.0](https://github.com/timelessco/react-native-search-component/compare/v1.2.0...v1.3.0) (2020-10-05)
24 |
25 |
26 | ### Features
27 |
28 | * ✨ Added .triggerFocus() method ([1493181](https://github.com/timelessco/react-native-search-component/commit/1493181c07d37ece680b6fc49255d52652f09d34))
29 | * 🎉 Update issue templates ([d87ac4b](https://github.com/timelessco/react-native-search-component/commit/d87ac4b24c0f05524bed7b94751215142a29aa7a))
30 |
31 | ## [1.2.0](https://github.com/timelessco/react-native-search-component/compare/v1.0.3...v1.2.0) (2020-08-23)
32 |
33 |
34 | ### Features
35 |
36 | * :sparkles: Added isLoading and LoadingTintColor ([d14c06d](https://github.com/timelessco/react-native-search-component/commit/d14c06dfaa2c6cc3e3692cc6206fb80b21aeaad9))
37 | * :sparkles: Added isLoading and LoadingTintColor props ([0d06291](https://github.com/timelessco/react-native-search-component/commit/0d06291265b5628c8caef4e6569511d241295e82))
38 |
39 | ## [1.1.0](https://github.com/timelessco/react-native-search-component/compare/v1.0.3...v1.1.0) (2020-08-09)
40 |
41 |
42 | ### Features
43 |
44 | * :sparkles: Added isLoading and LoadingTintColor ([749674c](https://github.com/timelessco/react-native-search-component/commit/749674cb14c5bb96df45afc3ed432b8ae882ff44))
45 | * :sparkles: Added isLoading and LoadingTintColor props ([73660ce](https://github.com/timelessco/react-native-search-component/commit/73660cee22445d9eade72a2bebb3074e040f9dec))
46 |
47 | ### [1.0.3](https://github.com/timelessco/react-native-search-component/compare/v1.0.2...v1.0.3) (2020-08-06)
48 |
49 |
50 | ### Bug Fixes
51 |
52 | * :bug: Added theme variable to props ([7b1b51b](https://github.com/timelessco/react-native-search-component/commit/7b1b51bea03e1d38570a51ffa8af484f9a6c4877))
53 |
54 | ### 1.0.2 (2020-08-06)
55 |
56 | ### 1.0.1 (2020-08-06)
57 |
--------------------------------------------------------------------------------
/example/RNSearch/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto init
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto init
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :init
68 | @rem Get command-line arguments, handling Windows variants
69 |
70 | if not "%OS%" == "Windows_NT" goto win9xME_args
71 |
72 | :win9xME_args
73 | @rem Slurp the command line arguments.
74 | set CMD_LINE_ARGS=
75 | set _SKIP=2
76 |
77 | :win9xME_args_slurp
78 | if "x%~1" == "x" goto execute
79 |
80 | set CMD_LINE_ARGS=%*
81 |
82 | :execute
83 | @rem Setup the command line
84 |
85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
86 |
87 | @rem Execute Gradle
88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
89 |
90 | :end
91 | @rem End local scope for the variables with windows NT shell
92 | if "%ERRORLEVEL%"=="0" goto mainEnd
93 |
94 | :fail
95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
96 | rem the _cmd.exe /c_ return code!
97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
98 | exit /b 1
99 |
100 | :mainEnd
101 | if "%OS%"=="Windows_NT" endlocal
102 |
103 | :omega
104 |
--------------------------------------------------------------------------------
/example/RNSearch/android/app/src/debug/java/com/rnsearch/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.rnsearch;
8 |
9 | import android.content.Context;
10 | import com.facebook.flipper.android.AndroidFlipperClient;
11 | import com.facebook.flipper.android.utils.FlipperUtils;
12 | import com.facebook.flipper.core.FlipperClient;
13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
22 | import com.facebook.react.ReactInstanceManager;
23 | import com.facebook.react.bridge.ReactContext;
24 | import com.facebook.react.modules.network.NetworkingModule;
25 | import okhttp3.OkHttpClient;
26 |
27 | public class ReactNativeFlipper {
28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
29 | if (FlipperUtils.shouldEnableFlipper(context)) {
30 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
31 |
32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
33 | client.addPlugin(new ReactFlipperPlugin());
34 | client.addPlugin(new DatabasesFlipperPlugin(context));
35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
36 | client.addPlugin(CrashReporterPlugin.getInstance());
37 |
38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39 | NetworkingModule.setCustomClientBuilder(
40 | new NetworkingModule.CustomClientBuilder() {
41 | @Override
42 | public void apply(OkHttpClient.Builder builder) {
43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44 | }
45 | });
46 | client.addPlugin(networkFlipperPlugin);
47 | client.start();
48 |
49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
50 | // Hence we run if after all native modules have been initialized
51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
52 | if (reactContext == null) {
53 | reactInstanceManager.addReactInstanceEventListener(
54 | new ReactInstanceManager.ReactInstanceEventListener() {
55 | @Override
56 | public void onReactContextInitialized(ReactContext reactContext) {
57 | reactInstanceManager.removeReactInstanceEventListener(this);
58 | reactContext.runOnNativeModulesQueueThread(
59 | new Runnable() {
60 | @Override
61 | public void run() {
62 | client.addPlugin(new FrescoFlipperPlugin());
63 | }
64 | });
65 | }
66 | });
67 | } else {
68 | client.addPlugin(new FrescoFlipperPlugin());
69 | }
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/example/RNSearch/ios/RNSearch.xcodeproj/xcshareddata/xcschemes/RNSearch.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/example/RNSearch/ios/RNSearch.xcodeproj/xcshareddata/xcschemes/RNSearch-tvOS.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/example/RNSearch/ios/RNSearch/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
25 |
31 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/example/RNSearch/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 | # Determine the Java command to use to start the JVM.
86 | if [ -n "$JAVA_HOME" ] ; then
87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
88 | # IBM's JDK on AIX uses strange locations for the executables
89 | JAVACMD="$JAVA_HOME/jre/sh/java"
90 | else
91 | JAVACMD="$JAVA_HOME/bin/java"
92 | fi
93 | if [ ! -x "$JAVACMD" ] ; then
94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
95 |
96 | Please set the JAVA_HOME variable in your environment to match the
97 | location of your Java installation."
98 | fi
99 | else
100 | JAVACMD="java"
101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
102 |
103 | Please set the JAVA_HOME variable in your environment to match the
104 | location of your Java installation."
105 | fi
106 |
107 | # Increase the maximum file descriptors if we can.
108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
109 | MAX_FD_LIMIT=`ulimit -H -n`
110 | if [ $? -eq 0 ] ; then
111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
112 | MAX_FD="$MAX_FD_LIMIT"
113 | fi
114 | ulimit -n $MAX_FD
115 | if [ $? -ne 0 ] ; then
116 | warn "Could not set maximum file descriptor limit: $MAX_FD"
117 | fi
118 | else
119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
120 | fi
121 | fi
122 |
123 | # For Darwin, add options to specify how the application appears in the dock
124 | if $darwin; then
125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
126 | fi
127 |
128 | # For Cygwin or MSYS, switch paths to Windows format before running java
129 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
132 | JAVACMD=`cygpath --unix "$JAVACMD"`
133 |
134 | # We build the pattern for arguments to be converted via cygpath
135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
136 | SEP=""
137 | for dir in $ROOTDIRSRAW ; do
138 | ROOTDIRS="$ROOTDIRS$SEP$dir"
139 | SEP="|"
140 | done
141 | OURCYGPATTERN="(^($ROOTDIRS))"
142 | # Add a user-defined pattern to the cygpath arguments
143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
145 | fi
146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
147 | i=0
148 | for arg in "$@" ; do
149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
151 |
152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
154 | else
155 | eval `echo args$i`="\"$arg\""
156 | fi
157 | i=`expr $i + 1`
158 | done
159 | case $i in
160 | 0) set -- ;;
161 | 1) set -- "$args0" ;;
162 | 2) set -- "$args0" "$args1" ;;
163 | 3) set -- "$args0" "$args1" "$args2" ;;
164 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
165 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
166 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
167 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
168 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
169 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
170 | esac
171 | fi
172 |
173 | # Escape application args
174 | save () {
175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
176 | echo " "
177 | }
178 | APP_ARGS=`save "$@"`
179 |
180 | # Collect all arguments for the java command, following the shell quoting and substitution rules
181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
182 |
183 | exec "$JAVACMD" "$@"
184 |
--------------------------------------------------------------------------------
/src/searchComponent/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
3 | import { ActivityIndicator, Platform, StyleSheet, Text, TextInput, TouchableOpacity, useWindowDimensions, View, ViewPropTypes } from 'react-native';
4 | import Animated, { Easing, spring, timing, Value } from 'react-native-reanimated';
5 | import Svg, { Path } from 'react-native-svg';
6 |
7 | const styledTheme = {
8 | LIGHT: {
9 | background: '#FFFFFF',
10 | textColor: '#000000',
11 | placeholderTextColor: '#8E8E93',
12 | textInputBackground: "rgba(142,142,147,0.12)",
13 | searchFill: '#8E8E93',
14 | },
15 | DARK: {
16 | background: '#000000',
17 | textColor: '#FFFFFF',
18 | placeholderTextColor: '#636366',
19 | textInputBackground: "rgba(44,44,46,0.8)",
20 | searchFill: '#b0b0b2',
21 | }
22 | }
23 |
24 | const textInputWidth = new Value(0);
25 | const cancelTextOpacity = new Value(0);
26 |
27 | const SearchIcon = ({ theme }) => {
28 | return (
29 |
32 | )
33 | }
34 |
35 | const CloseIcon = ({ theme }) => {
36 | return (
37 |
40 | )
41 | }
42 |
43 | const SearchComponent = forwardRef((props, ref) => {
44 | const [searchInputFocussed, setSearchInputFocussed] = useState(false);
45 | const { width } = useWindowDimensions();
46 | const memoizedTextInputOnFocusWidth = useMemo(() => width - (50 + 32 + 32), [width]);
47 | const memoizedTextInputOnBlurWidth = useMemo(() => width - 32, [width]);
48 | const focusTextInput = useCallback(() => setSearchInputFocussed(true), []);
49 | const blurTextInput = useCallback(() => setSearchInputFocussed(false), []);
50 | const handleChange = useCallback((e) => {
51 | props?.onChange(e);
52 | }, [props?.onChange]);
53 | const handleClearSearch = useCallback(() => {
54 | props?.onSearchClear();
55 | })
56 | const handlePressCancel = useCallback(() => {
57 | searchTextInput?.blur();
58 | props?.onSearchClear();
59 | });
60 | useImperativeHandle(ref, () => ({
61 | searchInputRef() {
62 | return searchTextInput;
63 | }
64 | }));
65 | useEffect(() => {
66 | if (searchInputFocussed) {
67 | spring(textInputWidth, {
68 | toValue: memoizedTextInputOnFocusWidth,
69 | mass: 1,
70 | stiffness: 120,
71 | damping: 20,
72 | }).start();
73 | timing(cancelTextOpacity, {
74 | toValue: 1,
75 | duration: 200,
76 | easing: Easing.linear
77 | }).start();
78 | } else {
79 | spring(textInputWidth, {
80 | toValue: memoizedTextInputOnBlurWidth,
81 | mass: 1,
82 | stiffness: 120,
83 | damping: 20,
84 | }).start();
85 | timing(cancelTextOpacity, {
86 | toValue: 0,
87 | duration: 200,
88 | easing: Easing.linear
89 | }).start();
90 | }
91 | }, [searchInputFocussed]);
92 | return (
93 |
94 |
95 |
96 |
97 |
98 | searchTextInput = ref}
104 | onFocus={focusTextInput}
105 | onBlur={blurTextInput}
106 | style={[
107 | styles.searchInputStyle,
108 | {
109 | backgroundColor: styledTheme[props?.theme].textInputBackground,
110 | color: styledTheme[props?.theme].textColor,
111 | },
112 | props.customSearchInputStyle,
113 | ]}
114 | placeholder={props?.placeholder}
115 | placeholderTextColor={props?.placeholderTextColor || styledTheme[props?.theme].placeholderTextColor}
116 | />
117 | {
118 | props?.isLoading ? (
119 |
120 |
121 |
122 | ) : (searchInputFocussed && props?.value?.length > 0) && (
123 |
124 |
125 |
126 | )
127 | }
128 |
129 |
130 |
131 | Cancel
132 |
133 |
134 |
135 | )
136 | })
137 |
138 |
139 | const styles = StyleSheet.create({
140 | searchInputWrapper: {
141 | paddingLeft: 16,
142 | paddingRight: 16,
143 | display: 'flex',
144 | flexDirection: 'row',
145 | justifyContent: 'flex-start',
146 | zIndex: 10,
147 | },
148 | searchInputStyle: {
149 | fontSize: 18,
150 | fontWeight: '400',
151 | lineHeight: 22,
152 | letterSpacing: 0.5,
153 | paddingHorizontal: 12,
154 | paddingVertical: 10,
155 | borderRadius: 12,
156 | paddingLeft: 32
157 | },
158 | searchIconWrapper: {
159 | position: 'absolute',
160 | left: 25,
161 | top: Platform.OS === 'android' ? 21 : 18
162 | },
163 | closeIconWrapper: {
164 | position: 'absolute',
165 | right: 8,
166 | top: Platform.OS === 'android' ? 21 : 18
167 | },
168 | loadingIconWrapper: {
169 | position: 'absolute',
170 | right: 10,
171 | top: Platform.OS === 'android' ? 18 : 15
172 | },
173 | })
174 |
175 |
176 | SearchComponent.propTypes = {
177 | placeholder: PropTypes.string,
178 | placeholderTextColor: PropTypes.string,
179 | onChange: PropTypes.func.isRequired,
180 | value: PropTypes.string.isRequired,
181 | onSearchClear: PropTypes.func,
182 | theme: PropTypes.oneOf(['LIGHT', 'DARK']),
183 | isLoading: PropTypes.bool,
184 | loadingTintColor: PropTypes.string,
185 | cancelColor: PropTypes.string,
186 | customSearchInputStyle: ViewPropTypes.style,
187 | customCancelTextStyle: Text.propTypes.style,
188 | }
189 |
190 |
191 | SearchComponent.defaultProps = {
192 | placeholder: 'Search',
193 | placeholderTextColor: null,
194 | onChange: () => { },
195 | value: '',
196 | onSearchClear: () => { },
197 | theme: 'LIGHT',
198 | isLoading: false,
199 | loadingTintColor: '#636366',
200 | cancelColor: '#007AFF',
201 | customSearchInputStyle: {},
202 | customCancelTextStyle: {},
203 | }
204 |
205 | export default SearchComponent;
206 |
--------------------------------------------------------------------------------
/example/RNSearch/src/UISearchBar/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, { useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
3 | import { ActivityIndicator, Platform, StyleSheet, TextInput, TouchableOpacity, useWindowDimensions, View, ViewPropTypes, Text } from 'react-native';
4 | import Animated, { Easing, spring, timing, Value } from 'react-native-reanimated';
5 | import Svg, { Path } from 'react-native-svg';
6 |
7 | const styledTheme = {
8 | LIGHT: {
9 | background: '#FFFFFF',
10 | textColor: '#000000',
11 | placeholderTextColor: '#8E8E93',
12 | textInputBackground: "rgba(142,142,147,0.12)",
13 | searchFill: '#8E8E93',
14 | },
15 | DARK: {
16 | background: '#000000',
17 | textColor: '#FFFFFF',
18 | placeholderTextColor: '#636366',
19 | textInputBackground: "rgba(44,44,46,0.8)",
20 | searchFill: '#b0b0b2',
21 | }
22 | }
23 |
24 | const textInputWidth = new Value(0);
25 | const cancelTextOpacity = new Value(0);
26 |
27 | const SearchIcon = ({ theme }) => {
28 | return (
29 |
32 | )
33 | }
34 |
35 | const CloseIcon = ({ theme }) => {
36 | return (
37 |
40 | )
41 | }
42 |
43 | const SearchComponent = forwardRef((props, ref) => {
44 | const [searchInputFocussed, setSearchInputFocussed] = useState(false);
45 | const { width } = useWindowDimensions();
46 | const memoizedTextInputOnFocusWidth = useMemo(() => width - (50 + 32 + 32), [width]);
47 | const memoizedTextInputOnBlurWidth = useMemo(() => width - 32, [width]);
48 | const focusTextInput = useCallback(() => setSearchInputFocussed(true), []);
49 | const blurTextInput = useCallback(() => setSearchInputFocussed(false), []);
50 | const handleChange = useCallback((e) => {
51 | props?.onChange(e);
52 | }, [props?.onChange]);
53 | const handleClearSearch = useCallback(() => {
54 | props?.onSearchClear();
55 | })
56 | const handlePressCancel = useCallback(() => {
57 | searchTextInput?.blur();
58 | props?.onSearchClear();
59 | });
60 | useImperativeHandle(ref, () => ({
61 | searchInputRef() {
62 | return searchTextInput;
63 | }
64 | }));
65 | useEffect(() => {
66 | if (searchInputFocussed) {
67 | spring(textInputWidth, {
68 | toValue: memoizedTextInputOnFocusWidth,
69 | mass: 1,
70 | stiffness: 120,
71 | damping: 20,
72 | }).start();
73 | timing(cancelTextOpacity, {
74 | toValue: 1,
75 | duration: 200,
76 | easing: Easing.linear
77 | }).start();
78 | } else {
79 | spring(textInputWidth, {
80 | toValue: memoizedTextInputOnBlurWidth,
81 | mass: 1,
82 | stiffness: 120,
83 | damping: 20,
84 | }).start();
85 | timing(cancelTextOpacity, {
86 | toValue: 0,
87 | duration: 200,
88 | easing: Easing.linear
89 | }).start();
90 | }
91 | }, [searchInputFocussed]);
92 | return (
93 |
94 |
95 |
96 |
97 |
98 | searchTextInput = ref}
104 | onFocus={focusTextInput}
105 | onBlur={blurTextInput}
106 | style={[
107 | styles.searchInputStyle,
108 | {
109 | backgroundColor: styledTheme[props?.theme].textInputBackground,
110 | color: styledTheme[props?.theme].textColor,
111 | },
112 | props.customSearchInputStyle,
113 | ]}
114 | placeholder={props?.placeholder}
115 | placeholderTextColor={props?.placeholderTextColor || styledTheme[props?.theme].placeholderTextColor}
116 | />
117 | {
118 | props?.isLoading ? (
119 |
120 |
121 |
122 | ) : (searchInputFocussed && props?.value?.length > 0) && (
123 |
124 |
125 |
126 | )
127 | }
128 |
129 |
130 |
131 | Cancel
132 |
133 |
134 |
135 | )
136 | })
137 |
138 |
139 | const styles = StyleSheet.create({
140 | searchInputWrapper: {
141 | paddingLeft: 16,
142 | paddingRight: 16,
143 | display: 'flex',
144 | flexDirection: 'row',
145 | justifyContent: 'flex-start',
146 | zIndex: 10,
147 | },
148 | searchInputStyle: {
149 | fontSize: 18,
150 | fontWeight: '400',
151 | lineHeight: 22,
152 | letterSpacing: 0.5,
153 | paddingHorizontal: 12,
154 | paddingVertical: 10,
155 | borderRadius: 12,
156 | paddingLeft: 32
157 | },
158 | searchIconWrapper: {
159 | position: 'absolute',
160 | left: 25,
161 | top: Platform.OS === 'android' ? 21 : 18
162 | },
163 | closeIconWrapper: {
164 | position: 'absolute',
165 | right: 8,
166 | top: Platform.OS === 'android' ? 21 : 18
167 | },
168 | loadingIconWrapper: {
169 | position: 'absolute',
170 | right: 10,
171 | top: Platform.OS === 'android' ? 18 : 15
172 | },
173 | })
174 |
175 |
176 | SearchComponent.propTypes = {
177 | placeholder: PropTypes.string,
178 | placeholderTextColor: PropTypes.string,
179 | onChange: PropTypes.func.isRequired,
180 | value: PropTypes.string.isRequired,
181 | onSearchClear: PropTypes.func,
182 | theme: PropTypes.oneOf(['LIGHT', 'DARK']),
183 | isLoading: PropTypes.bool,
184 | loadingTintColor: PropTypes.string,
185 | cancelColor: PropTypes.string,
186 | customSearchInputStyle: ViewPropTypes.style,
187 | customCancelTextStyle: Text.propTypes.style,
188 | }
189 |
190 |
191 | SearchComponent.defaultProps = {
192 | placeholder: 'Search',
193 | placeholderTextColor: null,
194 | onChange: () => { },
195 | value: '',
196 | onSearchClear: () => { },
197 | theme: 'LIGHT',
198 | isLoading: false,
199 | loadingTintColor: '#636366',
200 | cancelColor: '#007AFF',
201 | customSearchInputStyle: {},
202 | customCancelTextStyle: {},
203 | }
204 |
205 | export default SearchComponent;
206 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 | [](https://www.npmjs.com/package/react-native-search-component)
5 | [](https://www.npmjs.com/package/react-native-search-component)
6 | [](https://badgen.net/npm/types/tslib)
7 |
8 |
React Native Search Component
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
170 |
171 |
172 |
173 |