wrathchaos / react-native-dynamic-search-bar Goto Github PK

I get an error that the react-native-iphone-x-helper module can't be found.

I run C:\folder\app\android> ./gradlew assembleRelease

I get this error: error Unable to resolve module react-native-iphone-x-helperfromnode_modules\react-native-dynamic-search-bar\lib\src\SearchBar.style.js: react-native-iphone-x-helper could not be found within the project.

Thanks (again)!

How to change placeholder text color

C:/Users/Lex Aguilar/Documents/React Native/test/node_modules/react-native-dynamic-vector-icons/lib/components/Icon.tsx
Module not found: Can't resolve '@expo/vector-icons/Fontisto' in 'C:\Users\Lex Aguilar\Documents\React Native\test\node_modules\react-native-dynamic-vector-icons\lib\components'

package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@egjs/hammerjs": "^2.0.17",
"@expo/vector-icons": "^10.0.6",
"@freakycoder/react-native-helpers": "^0.1.2",
"@react-native-community/masked-view": "0.1.5",
"@react-navigation/bottom-tabs": "^5.0.0",
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
"@react-navigation/web": "~1.0.0-alpha.9",
"expo": "~36.0.0",
"expo-asset": "~8.0.0",
"expo-constants": "~8.0.0",
"expo-font": "~8.0.0",
"expo-web-browser": "~8.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-dynamic-search-bar": "^0.3.1",
"react-native-dynamic-vector-icons": "^0.2.2",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "~1.5.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7"

},
"devDependencies": {
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0",
"jest-expo": "~36.0.1"
},
"private": true
}

I tried installing with expo, but got this message:

`npm i WrathChaos/react-native-dynamic-search-bar#expo
npm ERR! code 1
npm ERR! Command failed: git checkout expo
npm ERR! error: pathspec 'expo' did not match any file(s) known to git
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/andordavoti/.npm/_logs/2020-02-13T18_40_43_567Z-debug.log`

Everything works fine on my local environment (yarn install, running my app on my own iPhone, running my app on android emulator, etc.), but when I try to actually build the app into the iOS and Android versions, I get the following error:

The commands I'm running in my own terminal are: npx eas build -p ios and npx eas build --platform android. Both give me the above error. Obviously this repository exists, so I'm very confused on why Expo/EAS is not recognizing it.

Hello, using your lib, thanks for making it!

I've found a small annoyance and I'm wondering if you can assist. When you click on the search box anywhere other than the direct 'Search...' text, the onPress handler activates. I'm not sure if this was by design, but i'd expect a press on a search box to activate the keyboard or something similar, otherwise you just get a press action, and what seems like no result.

I've created the video below to demonstrate the problem. In this screen cap I'm clicking in between the search text and the X (cancel), and you can see the "meaningless" press.

Is there any chance this behaviour could be changed?

This works:

backgroundColor={COL_DARK_HIGHLIGHT}
fontFamily="ProximaNova-Regular"

But is not documented in the configuration props :)

as title, can u give me some advices? Thanks

The feature to change the complete source data depending on the searchText. So, the input data to be fed to the component will be a result from the elasticsearch data which will change everytime depending on the searchText. In my usecase, the list is very long and I don't want the complete list to be transfered over the network.

No matter I use yarn or npm, I can't install it.

my version:

"expo": "~40.0.0"
"react": "16.13.1"
"react-dom": "16.13.1"
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz"

So while using the search bar in a project of mine I ran into a peculiar issue. If I use the search bar in the following way

<SearchBar fontColor="#aa8dcc" iconColor="#d7bdf5" cancelIconColor="#d7bdf5" backgroundColor="#f9f9f9" placeholder="Search here" onChangeText={this.onChangeText} onPressCancel={() => { this.setState({ isSearching: false }); }} onPressToFocus={true} onSubmitEditing={this.onSubmit} noExtraMargin={true} />

that causes the application to be broken on android while iOS works properly. However removing the background color property all together fixes the issue. I am not sure if I am setting the background color in a weird way or is there something I should be doing to differently.

Hi, I just forked the project and I was attempting to run the example, but I had some struggling. Part of it is because of my env here, but, anyway, I'm writing a README here for future contributors that can have the same problems to know how to overcome them.

I just wrote the iOS part and now I'm going to write the Android one.

If you could assign this issue to me I'd appreciate.

Thanks!

Hi, i want to create searchBarRef to avoid re-render searchBar and no need to using state to hold the text

ref={seachBarRef}

now i want to get the text, but it's only return null, can u help?
here is my code:
seachBarRef.current.text

I have followed the readme in a latest expo project and this is what I get:

yarn:

% yarn add WrathChaos/react-native-dynamic-search-bar#expo
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
error Couldn't find match for "expo" in "refs/heads/dev,refs/heads/master,refs/pull/11/head,refs/pull/14/head,refs/pull/16/head,refs/pull/17/head,refs/pull/2/head,refs/pull/20/head,refs/pull/23/head,refs/pull/24/head,refs/pull/3/head,refs/pull/5/head,refs/pull/6/head,refs/pull/7/head,refs/pull/9/head,refs/tags/0.0.1,refs/tags/0.0.11,refs/tags/0.0.12,refs/tags/0.0.13,refs/tags/0.1.1,refs/tags/0.1.11,refs/tags/0.2.0,refs/tags/0.2.1,refs/tags/0.3.0,refs/tags/0.3.1,refs/tags/1.0.0,refs/tags/1.0.1" for "https://github.com/WrathChaos/react-native-dynamic-search-bar.git".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

npm:

% npm i WrathChaos/react-native-dynamic-search-bar#expo
npm ERR! code 1
npm ERR! Command failed: git checkout expo
npm ERR! error: pathspec 'expo' did not match any file(s) known to git
npm ERR! 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/parksunwoo/.npm/_logs/2020-04-22T06_44_13_258Z-debug.log

When I try to install the "Expo version" with command: npm i Wrath Chaos/react-native-dynamic-search-bar#expo I receive the following error:

npm ERR! prepareGitDep 1>
npm ERR! prepareGitDep > @expo/[email protected] prepare C:\Users\user\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-eb8ba27f
npm ERR! prepareGitDep > expo-module prepare && npm run generate-lazy && npm run copy-vendor
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep C:\Users\user\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-eb8ba27f\node_modules\expo-module-scripts\bin\expo-module-prepare:3
npm ERR! prepareGitDep set -eo pipefail
npm ERR! prepareGitDep         ^^^^^^^^
npm ERR! prepareGitDep
npm ERR! prepareGitDep SyntaxError: Unexpected identifier
npm ERR! prepareGitDep     at wrapSafe (internal/modules/cjs/loader.js:1070:16)
npm ERR! prepareGitDep     at Module._compile (internal/modules/cjs/loader.js:1120:27)
npm ERR! prepareGitDep     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
npm ERR! prepareGitDep     at Module.load (internal/modules/cjs/loader.js:1000:32)
npm ERR! prepareGitDep     at Function.Module._load (internal/modules/cjs/loader.js:899:14)
npm ERR! prepareGitDep     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
npm ERR! prepareGitDep     at internal/main/run_main_module.js:18:47
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! @expo/[email protected] prepare: `expo-module prepare && npm run generate-lazy && npm run copy-vendor`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the @expo/[email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-04-30T12_01_05_745Z-debug.log
npm ERR! prepareGitDep
npm ERR! premature close

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-04-30T12_01_05_909Z-debug.log

Any idea?

like in the picture below

for the icons, i edited android/app/build.gradle by adding in the end:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
but still there is no animation,

when running inside expo, we need to install react-native-iphone-x-helper or it will not work.

After install this library and its dependencies, my app crash with this error:

Invariant Violation: requireNativeComponent: "RNSpinkit" was not found in the UIManager

My code:

<SearchBar
                    height={56}
                    placeholderTextColor='#fff'
                    placeholder="Procurar oradores..."
                    spinnerVisibility={true}
                    onPress={() => alert("onPress")}
                    style={{ backgroundColor: '#14292F', borderRadius: 0, width: '100%', height: 56, shadowColor: '#14292F' }}
                    searchIconImageStyle={{ tintColor: '#fff' }}
                    clearIconImageStyle={{ tintColor: '#fff' }}
                    textInputStyle={styles.inputs}
                    onClearPress={() => null }
                    onChangeText={(text) => console.log(text)}
                />

Missing Props

• height
• width
  etc...

Hello,

I am Maheshwari from team GeekyAnts.

On behalf of Start React, we add open source products which we find helpful to the community & also we provide credits to author itself.

Let me know if you are interested showcase your product in our open source website.

Looking forward to hear from you.

Please help

First, thank you for the lovely library 😄

Context: I was using the library to render a search bar that uses onSubmitEditing to fire off a function. I noticed that the function was getting called twice.

Digging through the source, I think this line is causing the issue. I think spreading props to both the TextInput as well as the RNBounceable component is the root of the issue.

The way I verified this hunch is by inspecting the node that fired the event:

<SearchBar onSubmitEditing={(e) => { console.log(e.currentTarget._children)} />

One of the events showed 3 children (the wrapper rending the TextInput and two icons) while the other showed 0 children (the TextInput rendering nothing).

Some possible solutions include:

1. Only pass the props explicitly defined in RNBounceable to that component instead of {...this.props}. This could cause some regressions and would probably warrant a major version bump.
2. Add TextInputProps as a parameter to the base component and only spread those props to the TextInput. This would be more explicit (nice) but more cumbersome to use (less nice). This would also warrant a major version bump.
3. Remove onSubmitEditing from the props passed to RNBounceable. This would be the least intrusive, but leaves the underlying issue of passing the same props to two components.

Let me know what y'all think and I can help with a PR to fix this!

To reproduce:

<SearchBar onSubmitEditing={() console.log('called')} />
// open it up and press enter

Hi,

So in my app, I made it so that the user's search results get cleared once they click on the search bar again using:
onTouchStart={...}, But the problem is that the search text still stays there and the user has to manually remove the text, is there any way that I can programatically clear the search bar text, any help would be appreciated

Thanks

This is the error:

./node_modules/@freakycoder/react-native-bounceable/build/dist/RNBounceable.js 30:16
Module parse failed: Unexpected token (30:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     render() {
|         const { children, style } = this.props;
>         return (<react_native_1.TouchableWithoutFeedback {...this.props} onPress={this.onPress.bind(this, react_native_1.Easing.bounce)}>
|         <react_native_1.Animated.View style={[{ transform: [{ scale: this.state.springValue }] }, style]}>
|           {children}

This is my dependencies:

"dependencies": {
    "@freakycoder/react-native-bounceable": ">= 0.2.2",
    "add": "^2.0.6",
    "expo": "~45.0.0",
    "expo-app-loading": "^2.0.0",
    "expo-font": "^10.1.0",
    "expo-status-bar": "~1.3.0",
    "prettier-plugin-organize-imports": "^3.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-animated-spinkit": "^1.4.1",
    "react-native-dynamic-search-bar": "WrathChaos/react-native-dynamic-search-bar#expo",
    "react-native-dynamic-vector-icons": "WrathChaos/react-native-dynamic-vector-icons#expo",
    "react-native-element-dropdown": "^2.1.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-user-avatar-component": "^0.0.4",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "0.17.7",
    "styled-components": "^5.3.5",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/jest": "^28.1.6",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "@types/react-test-renderer": "^18.0.0",
    "@types/styled-components": "^5.1.25",
    "@types/styled-components-react-native": "^5.1.3",
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "eslint": "^8.20.0",
    "eslint-config-universe": "^11.0.0",
    "jest": "^28.1.3",
    "jest-expo": "^45.0.1",
    "prettier": "^2.7.1",
    "react-test-renderer": "^18.2.0",
    "ts-jest": "^28.0.7",
    "typescript": "~4.3.5"
  }

This lib has so many dependencies so i'm not sure where the error comes from.
Version: RN 0.62.2 (Non-Expo)
Everything at @latest

Trying to install the expo version with npm i WrathChaos/react-native-dynamic-search-bar#expo
Error:

npm ERR! prepareGitDep 1> 
npm ERR! prepareGitDep > @expo/[email protected] prepare /home/bishoy/.npm/_cacache/tmp/git-clone-3eb47acd
npm ERR! prepareGitDep > expo-module prepare && npm run generate-lazy && npm run copy-vendor
npm ERR! prepareGitDep 
npm ERR! prepareGitDep expo-module-scripts: README.md exists, not updating
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep /home/bishoy/.npm/_cacache/tmp/git-clone-3eb47acd/node_modules/expo-module-scripts/bin/npx: line 8: yarn: command not found
npm ERR! prepareGitDep npm ERR! file sh
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno ENOENT
npm ERR! prepareGitDep npm ERR! syscall spawn
npm ERR! prepareGitDep npm ERR! @expo/[email protected] prepare: `expo-module prepare && npm run generate-lazy && npm run copy-vendor`
npm ERR! prepareGitDep npm ERR! spawn ENOENT
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the @expo/[email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /home/bishoy/.npm/_logs/2020-10-21T02_14_11_264Z-debug.log
npm ERR! prepareGitDep 
npm ERR! premature close

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bishoy/.npm/_logs/2020-10-21T02_14_11_745Z-debug.log

Any ideas how to solve it?
The whole idea of using expo branch is for the spin animation. I think the react-native-spinkit will not work with pure expo cause it is a native module. I recommend substituting that with React Native Animated SpinKit

i.e Both are the same but this one is optimized to work well with expo. In this case the same version will work with both expo and non expo users

I am trying to remove the shadow that Android gives around the search bar, so I passed shadowStyle={{ elevation: 0 }} into the component.
However, the shadowStyle prop doesn't seem to have any effect, as opposed to what is stated in the readme.
I have looked at the source, and it seems like you are just reading _shadowStyle from the style file, where it sets the elevation to 5.
Presumably, it needs to pass through props.shadowStyle as well, so I can override the default style?