umhan35 / react-native-search-bar Goto Github PK

I want to change the word Cancel to 取消,how can I to do ?
Thanks very much.

I'm trying to imitate the behavior where you click the Search Bar and it moves to the top of the screen, which is working for me so far, but how do you remove the top border?

The cancel button appears on app launch, but the text is not tinted. Tapping the bar after tints the text. Anyone know what may be causing this?

Do you guys see a little delay while dismissing the keyboard?
I don't see this while dismissing with keyboardDismissMode='on-drag'

<ScrollView style={styles.container}  automaticallyAdjustContentInsets={false} keyboardDismissMode='on-drag' keyboardShouldPersistTaps={false}>
            <SearchBar
                ref='searchBar'
                placeholder='Buscar'
                onSearchButtonPress={(event)=>{
                  this.refs.searchBar.unFocus()
                  this.refs.searchBar.blur()
                }}/>
            <View>
              <Text>Test</Text>
            </View>
          </ScrollView>

Also, when I search for something, tap on X, I cant unfocus from it, since my Search button is disabled.

Hello,

it would really be nice to be able to set a custom cancel button text via JS wrapper.

Regards
Philipp

@umhan35
Wondering how we can go about adding pulldown searchbar?

I'm getting this error using react native 0.13.2 and react-native-search-bar 2.5.0

Specifically breaks on this line:
https://github.com/umhan35/react-native-search-bar/blob/master/SearchBar.js#L48

The onCancelButtonPress property callback isn't working anymore for me with 2.0.0.

is there something I need to do to upgrade?

This error occurs after upgrading from react-native v0.11 to react-native v0.14
A brief description of my environment:

OS: OSX Yosemite v 10.10.4
XCode: v7.0.1 (7A1001)
Node: v4.1.2

Similar to #24, it would be valuable to be able to .blur() the search bar to hide the keyboard, as you can with the React Native TextInput component.

Hi,

Is there any way to programmatically focus the search bar ?

I want to automatically focus it when it appears.

Thanks.

Receiving this error:

RNSearchBarManager.m:71:6: Incompatible block pointer types sending 'void (^)(RCTUIManager *__strong, NSDictionary *__strong)' to parameter of type 'RCTViewManagerUIBlock' (aka 'void (^)(RCTUIManager *__strong, RCTSparseArray *__strong)')

Maybe I should be using this PR?
#43

Is there a way to either automatically or pragmatically dismiss the keyboard when tapping on another component?

I put a log on _onPress function in SearchBar.js but even this line is not firing

It seems that React.requireNativeComponent is undefined. Do I need to include other libraries as well? Could you please go into detail which files need to be linked?

Hi, may I know what can I do to dismiss the keyboard other than click on the "cancel" button? I tried to use TouchableWithoutFeedback, but it failed to work as expected.

Can you provide me with an example of styling the search bar because when try to use style={{ backroundColor: '#FAFAFA' }} then, search bar disappears.

Getting an error when including a basic example of the search bar in my project.

It's not finding "NativeModules.RNSearchBarManager.ComponentHeight".

Line 40: SearchBar.js

<SearchBar placeholder='Search' onChangeText={this.createEvent}/>

Hi, there,

As of 0.15.0, the signature of RCTEventDispatcher sendTextEventWithType has changed. See this commit.

As a workaround, I have modified RNSearchBar.m to pass a key of nil, as you aren't listening for the onKeyPress event, and this has got things working for me. But, if you want to implement this in the future, you might need to send back the text events being sent from UISearchBar.

Hi,

I don't know if this is a bug or if this is normal.

showsCancelButton={false} has a wrong behavious. In my opinion :

• no attribute : should show cancel only on focus => OK
• showsCancelButton={true} : should show the cancel button even if not focus => OK
• showsCancelButton={false} : should never show the cancel button => NOT OK.

What do you think ?

translate button 'cancel' to other language

Right now it's white, I need to change it to a different color. Throughout my app it's blue...

I don't know why, but when I set the width larger than 100px, the clear button (the one with the 'x' icon) doesn't work. This is very frustrating.
The search bar is inside a navigator component.
Any ideas?

I have a ScrollView below the Search bar as below

<ScrollView style={style.container}
          keyboardShouldPersistTaps={true}
          keyboardDismissMode='on-drag'
        />
</ScrollView>

When the search box is focussed and i drag the ScrollView, i am getting the following warning on Xcode. Cant seem to figure out how to fix it. I think it has something to do with searchBarTextDidEndEditing

2016-07-20 22:30:05.427 App[92773:15460947] -[UIWindow endDisablingInterfaceAutorotationAnimated:] called on <UITextEffectsWindow: 0x7fc42d007220; frame = (0 0; 375 667); opaque = NO; autoresize = W+H; layer = <UIWindowLayer: 0x7fc42adeeb60>> without matching -beginDisablingInterfaceAutorotation. Ignoring.

I've installed the search bar with no error using:
npm install react-native-search-bar@latest --save
rnpm link

And when I use the SearchBar inside a Drawer like this:

<Drawer ref="drawer" content={<MenuContent />}>
          <NavigationBar title={titleConfig} statusBar={statusBarConfig} />
          <View style={styles.container}>
             <SearchBar
                ref='searchBar'
                placeholder='Search'
                onChangeText={...}
                onSearchButtonPress={...}
                onCancelButtonPress={...}
               />
              <ListView .. />
          </View>
</Drawer>

There is only a space above the ListViewand no SearchBar, but when I move the SearchBar out of the Drawer it works.

Hi,

i'm struggling with keyboard that is not hidden when search is tapped on keyboard and also when cancel button (X) is tapped withing search bar.

I've googled out how to hide keyboard on search, by adding
[searchBar resignFirstResponder]; into searchBarSearchButtonClicked method,

but adding same line to searchBarCancelButtonClicked doesn't hide the keyboard.

Trying to import this in react-native 0.6,

var SearchBar = require('react-native-search-bar');

results in the following error,

sendTextEventWithType now requires a fourth parameter: nativeEventCount.

See

facebook/react-native@961c1eb

New in RN 0.25:

Requiring React API from react-native is now deprecated.

Instead of:
import React, { Component, View } from 'react-native';

you should now:
import React, { Component } from 'react';
import { View } from 'react-native';

Instead of importing everything from react-native, you should import some from react.

I set showsCancelButton={true} and it works correctly at the first time.
But after I click cancel and focus again, the cancel button doesn't show up. The value in UISearchBar is overwritten by [self setShowsCancelButton:NO animated:YES];

Causes naming conflicts with packager, no longer needed in new versions of RN.

According to some highlights of the release here:
http://www.reactnative.com/react-native-v0-16-0-rc-and-v0-15-0-released/

RCTSparseArray was replaced by NSDictionary.

Will you upgrade?

If so, then its good to mention.
If not, still worth mentioning in the Readme.md

Hi I'm wondering if anybody has a solution for this? I'm having trouble with modifying the tint of these UIImageViews.

Greatly appreciate any help!

Hi @umhan35,

I see there are a lot of on-going issues and pull requests on this great plugin.

Would you mind giving someone (I can do it if you want) write access to help you with it ?

Thanks !

Hello,

I have some troubles when I want to integrate this package to my project. For some reasons, I have to specify marginTop and height properties searchBar's style otherwise the bar doesn't show up.

The problem is the marginTop property move down my ListView component. I don't understand my I need to specify marginTop and height properties.

Here is my code:

import React, { View, Component, StyleSheet, ListView, PropTypes, Text } from 'react-native';

import SearchBar from 'react-native-search-bar';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchBar: {
    marginTop: 64,
    height: 44,
    backgroundColor: 'green',
  },
  listView: {
    backgroundColor: 'red',
  },
});

export default class ContactsComponent extends Component {
  static propTypes = { dataSource: PropTypes.object.isRequired }
  static defaultProps = { dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) }
  state = { dataSource: this.props.dataSource.cloneWithRows(['User 1', 'User 2', 'User 3', 'User 4', 'User 5']) }

  render() {
    return (
      <View style={styles.container}>
        <SearchBar placeholder="Search"
          style={styles.searchBar}
          barTintColor="#87D3D3"
          textFieldBackgroundColor="#D5EFEF"
          tintColor="#D5EFEF" />
        <ListView style={styles.listView} dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>} />
      </View>
    );
  }
}

Any suggestion?

Best,
Jean

rn version: 0.17

search-bar version: 2.8

with basic usage.

// 原来是**人哈

I'm getting this error when building it as a release build. Product -> Scheme -> Edit Scheme and mark as release build.

You can also use Product -> Archive and it will not build a package and give the error.

Hello,

Thanks for the work made to this package! I wonder how can I change the placeholder/loop color and the text color.

Thanks!
Jean

I'm building a landscape iPad app and am using the searchbar at full width, it appears to max-out at 1000px

Is it possible to programmatically clear the search bar input field? Something similar to setNativeProps({text: ''}) for TextInput component?

Hi, is it possible to support keyboardAppearance? Same with how it works with TextInput

When I focus into the Search box and then hit cancel and then focus back into the search box the cancel button is no longer on the screen.

Hello,

I'm using the search bar to filter a listview on change of the search bar text. Is there currently any way implemented to hide the keyboard the moment I press something in the listview - like a blur() function?

Thanks
Philipp

The search bar component appears to be rendered in the DOM, but I can't see anything. Here's my code.

import React from 'react'
import {
  View,
  Text,
} from 'react-native'
import SearchBar from 'react-native-search-bar'
import styles from './Topbar.styles'

class Topbar extends React.Component {
  componentDidMount() {
    this.refs.searchBar.focus()
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Topbar</Text>
        <SearchBar
          ref="searchBar"
          placeholder="Search..."
        />
      </View>
    )
  }
}
export default Topbar

I double checked that I linked the dependencies, tried deleting and re-adding the project. Any ideas?

I am trying to use the component search-bar https://github.com/umhan35/react-native-search-bar

I have followed the instructions and installed it correctly what I am confused about is how to use it as everything I am trying is throwing errors.

To test it I am using it on a program called testingReact which is just the starting react program.

I added the searchBar so the imports look like this.

'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, SearchBar } from 'react-native';

Now if I run it still does not throw an error

Now I add the following code (taken straight from the example

<View> 
  <SearchBar
    placeholder='Search'
    textFieldBackgroundColor='blue'
    />
</View>

When I run I get the following error "Element type is invalid : expected string(for built in components) or a class/function (for composite components) but got: undefined. Check the render method of 'testingReact'.

Hi,
First of all, very cool component!
Second, can I use a different font throughout the component?

Thanks!

Thank you for the SearchBar :).
Could you please add showsCancelButton support to be able to hide it

There is no way to pin the search bar to the top of the screen.