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

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

Heres a full example of what you want (https://snack.expo.dev/bjzBFuE4W). And below I explain the code.

Fist I made a Modal from react native that takes in modalVisible, setModalVisible, and appears when modalVisible is true.

import * as React from 'react';
import { Text, View, StyleSheet,TextInput ,TouchableOpacity,Modal} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons'; 

const ModalInfo = ({modalVisible, setModalVisible})=>{
  return (
     <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={{
           flex: 1,
          justifyContent: "center",
          alignItems: "center",
          
        }}>
          <View
          style={{
            width:200,height:200,backgroundColor:"gray",borderWidth:2,
            justifyContent:"center",alignItems:"center"

          }}
          >

             <TouchableOpacity onPress={()=>{setModalVisible(false)}}>
             
                <MaterialIcons name="cancel" size={24} color="black" />
             </TouchableOpacity>

          </View>
        </View>
      </Modal>
  )
}

Next I made a View to wrap around the textInput so I can also add an svg of the info icon. And then set the outside view to have flexDirection:"row", so everything would be ordered the way you wan't.

const TextInputWithModal = ()=>{
  const [modalVisible, setModalVisible] = React.useState(false);
  const [AllatNev,setAllatNev]= React.useState("");
  return (
    <View style={styles.textInputContainer}>
       <TextInput
        placeholder="Állat neve"
        value={AllatNev}
        style={styles.textBox}
        onChangeText={(text) => setAllatNev(text)}
        />
        
        <TouchableOpacity onPress={()=>{setModalVisible(true)}}>
          <AntDesign name="infocirlceo" size={24} color="black" />
        </TouchableOpacity>
      <ModalInfo modalVisible={modalVisible} setModalVisible={setModalVisible}/>
    </View>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
        <TextInputWithModal/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:"center",
  },
  textInputContainer:{
      borderRadius:10,
      padding: 10,
      flexDirection:"row",
      margin:15,

      borderWidth:2,
  },
  textBox:{
    fontFamily:'Quicksand-Medium',
    marginRight:20,
  },
 
});