How to add a Button inside TextInput in React Native

AnujKapse
August 21, 2022
102 views
0 votes
2 Answers

I wanna add a "Verify" button inside my TextInput as shown in the picture. I tried adding a TouchableOpacity component but I think I’m doing it wrong. You guys have a solution?

Tags: react-native

Answers

Try this code it should work for you

<View style={{flexDirection:'row'}}>
<View>
  <TextInput
      style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}}
      value = {this.state.emailId}
      onChangeText = {(emailId) => {this.setState({emailId})}}
      placeholder = 'Enter your email id'
      onSubmitEditing = {()=>{this._fetchResults()}}
      />
</View>
<TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'>
    <View>
        <Text>Verify</Text>
    </View>
</TouchableHighlight>

I couldnt get the styling down right but here’s this will get you in the right direction

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.firstBox}>
        <View style={styles.row}>
          <TextInput
            placeholder="Email id"
            placeholderTextColor="gray"
            style={styles.input} />
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Verify</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    padding: 8,
    backgroundColor: 'lightgreen',
  },
 buttonText:{
    textDecorationLine:"underline"
   
 },
  input: {
    flex: 2,
    borderRadius:5
  },
  button: {
    flex: 0.5,
    alignItems: 'center',
  },
  firstBox: {
    backgroundColor: 'green',
    paddingBottom: 2,
    top:-2,
    borderRadius:5
  },
  row: {
    flexDirection: 'row',
    width: '100%',
    backgroundColor: 'white',
    padding:5,
    borderRadius:5
  },
});

Please signup or login to give your own answer.

Click here to cancel reply.