CODEWITHSUNDEEP
react-native
Hossein
Hossein

Reputation: 4559

Button in TextInput in react native

How can I insert and style a button in text input in react native like this: enter image description here

Can I use any code like this?

<Textinput>
   <Button></Button>
</Textinput>

Upvotes: 8

Views: 29508

Answers (3)

kwishnu
kwishnu

Reputation: 1851

Sorry for the delay, but something like this should work:

<View style={{flexDirection:'row', width: window.width, margin: 10, padding:4, alignItems:'center', justifyContent:'center', borderWidth:4, borderColor:'#888, borderRadius:10, backgroundColor:'#fff'}}>
  <View style={{flex:4}}>
    <TextInput
        onChangeText = {(textEntry) => {this.setState({searchText: textEntry})}}
        style={{backgroundColor:'transparent'}}
        onSubmitEditing = {()=>{this.onSubmit(this.state.searchText)}}
      />
  </View>
  <View style={{flex:1}}>
    <Button onPress={ () => this.onSubmit(this.state.searchText) }>
        <Image source={ require('../images/searchImage.png') } style={ { width: 50, height: 50 } } />
    </Button>
  </View>
</View>

where you adjust the size based on your image and Button is imported like:

import Button from '../components/Button';

I like to keep the button in an external folder, where it is like:

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';

class Button extends Component {
  handlePress(e) {
    if (this.props.onPress) {
        this.props.onPress(e);
    }
  }
  render() {
    return (
        <TouchableOpacity
            onPress={ this.handlePress.bind(this) }
            style={ this.props.style } >
            <Text>{ this.props.children }</Text>
        </TouchableOpacity>
    );
  }
}
export default Button;

Good luck!

Upvotes: 10

Vikram Belde
Vikram Belde

Reputation: 1189

<View style={{flexDirection:'row'}}>
    <View>
      <TextInput
          style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}}
          value = {this.state.searchString}
          onChangeText = {(searchString) => {this.setState({searchString})}}
          placeholder = 'Search'
          keyboardType = 'web-search'
          onSubmitEditing = {()=>{this._fetchResults()}}
          ref = 'searchBar'
          />
    </View>
    <TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'>
        <View>
          <Icon name="search" size = {20} color = "#4285F4" />
        </View>
    </TouchableHighlight>
</View>

if you are not using react-native-vector-icons replace icon with .png magnifying glass image

Upvotes: 4

Talor A
Talor A

Reputation: 85

wrapping both in a View with flexDirection:row should get you there.

If you want to get more advanced, you could look at the react-native-textinput-effects package that will give you some very nicely styled inputs.

Upvotes: 5

Related Questions