How to add information pop-up for TextInput in React Native?

Question

I want to achieve something like this in React Native:

I have a TextInput component and I want to put an icon to the right side. The user can click it, then I can display some text in a modal or in a another component.

Is this possible in react native?

return(
<View style={styles.container}>

        <TextInput
        placeholder="Állat neve"
        value={AllatNev}
        style={styles.textBox}
        onChangeText={(text) => setAllatNev(text)}
        />

</View>
 );
 }
 )



  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: color_theme_light.bodyBackground
      justifyContent: 'center',
      alignItems:'center'
    },
    textBox:{
      borderWidth:2,
      borderColor: color_theme_light.textBoxBorder,
      margin:15,
      borderRadius:10,
      padding: 10,
      fontFamily:'Quicksand-Medium'
       },
    }); 

Answer 1

Yes -- you can position your info button over the TextInput using absolute positioning and a zIndex, for example:

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textBoxParent}>
        <TextInput style={styles.textBox} placeholder="Állat neve"/>
        <TouchableOpacity style={styles.textBoxButton} onPress={() => {
          //launch your modal
        }}>
          <Text>i</Text>
        </TouchableOpacity>
      </View>
    </View>
  );  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  textBoxParent: {
    justifyContent: 'center'
  },
  textBox:{
      borderWidth:2,
      borderColor: 'gray',
      margin:15,
      borderRadius:10,
      padding: 10,
  },
  textBoxButton: {
    position: 'absolute',
    right: 20,
    zIndex: 100,
    width: 20,
    height: 20,
    borderWidth: 1,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Working example: https://snack.expo.dev/OFMTc8GHE