How to hide image on pressing textinput in react-native

user_15142650 0
Viewed 158

This is my current code..

I am totally new to react native..please help.

import React from 'react';
import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
export default function App() {
  return (      
    <SafeAreaView>
    <View style={styles.container}>
    <TextInput 
      
      placeholder="Search"
      style={styles.searchbox}                        
    ></TextInput>        
    <View style={styles.makecentral} > 
    <Image                  
        style={styles.tinyLogo}
        source={require('./assets/icons8_search_200px_3.png')}        
      />
    </View>
  </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {    
    backgroundColor: '#fff',    
  },
  searchbox:{
    backgroundColor:'#f2f2f2',
    marginTop : StatusBar.currentHeight+5,
    height : 50,
    marginLeft:10,
    marginRight : 10,
    borderRadius : 20,
    textAlignVertical:'center',
    textAlign : 'center',
    alignItems:'center',        
  },
  tinyLogo: {
    position : 'absolute',
    width: 30,
    height: 30,
    opacity: 0.5,
    marginTop: -40,    
  },
  makecentral: {
    alignItems:'center',
    marginRight:80,    
  }  
});

I want to hide the search image by pressing text input.

I have an image in search box and I want to hide that image when the user touch text input.

react-native reactjs
2 Answers
import React, {  useState } from 'react'; //import useState
import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
export default function App() {
    const [search, setSearch] = useState(''); //add this line
  return (      
    <SafeAreaView>
    <View style={styles.container}>
    <TextInput 
      onChangeText={(text) => setSearch(text)}
      placeholder="Search"
      style={styles.searchbox}                        
    ></TextInput>        
    <View style={styles.makecentral} >   
    {search.length < 1 ? <Image               
        style={styles.tinyLogo}
        source={require('./assets/icons8_search_200px_3.png')}        
      /> : ( 
          null  //add clear text image and clear search text
      )}
    
    </View>
  </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {    
    backgroundColor: '#fff',    
  },
  searchbox:{
    backgroundColor:'#f2f2f2',
    marginTop : StatusBar.currentHeight+5,
    height : 50,
    marginLeft:10,
    marginRight : 10,
    borderRadius : 20,
    textAlignVertical:'center',
    textAlign : 'center',
    alignItems:'center',        
  },
  tinyLogo: {
    position : 'absolute',
    width: 30,
    height: 30,
    opacity: 0.5,
    marginTop: -40,    
  },
  makecentral: {
    alignItems:'center',
    marginRight:80,    
  }  
});
user_117629070

I'd suggest a combination of a show/hide state for the image coupled with an onFocus and onBlur (if you want to again display image when focus is lost) callback set to conditionally render the image.

export default function App() {
  const [inputFocused, setInputFocused] = useState(false);

  return (      
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput 
          placeholder="Search"
          style={styles.searchbox}
          onFocus={() => setInputFocused(true)}
          onBlur={() => setInputFocused(false)}
        />        
        <View style={styles.makecentral}> 
          {!inputFocused && <Image                  
            style={styles.tinyLogo}
            source={require('./assets/icons8_search_200px_3.png')}        
          />}
        </View>
      </View>
    </SafeAreaView>
  );
}
user_86908570
Related