How to add a Button inside TextInput in React Native - react-native

Question

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?

Answer 1

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>

Answer 2

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
},
});