Touchable Image Components in React-Native

-
React-Native logo

Touchable Components in React-Native

          Image components do not have a prop or event that allows click or touch. Touchable is used to make an image touchable and set what touching the image will do. The three touchable components in react-native are touchable highlight, touchable opacity and touchable without feedback. The component first has to be imported from react-native. 


      Touchable without feedback: after importing the component, to make the image touchable wrap the image in a <TouchableWithoutFeedback> component. This component has events like onPress and onLongPress. The onLongPress is useful if you want a user to tap and hold on a component. To handle the onPress event we pass a function by adding in this example a console.log to show the image has been tapped by adding onPress={() => console.log (“Image Tapped”)}>. Now when the image is tapped it does not give any feedback due to the Touchable without feedback component, looking at the terminal however will show the “Image Tapped” message we set in the function.


TouchableOpacity: Following the same steps as before (import and wrapping). To replace the TouchableWithoutFeedback you can use multi cursor editing by highlighting the opening <TouchableWithoutFeedback> and pressing (on windows ctrl + d) and change the without feedback to Opacity, press escape to exit multi cursor editing (I don’t own a mac so I don’t know if that works) Now tapping on the image will reduce its opacity allowing you to see the background for a fraction of a second.


Touchable Opacity code
TouchableOpacity Code


Touchable Opacity image before touch
TouchableOpacity Image

Touchable Opacity Image touched response
TouchableOpacity Selected


TouchableHighlight: Same again (Import, wrap, change the component to Highlight) now touching on the image it will get dark for a fraction of a second. These are the three cross-platform components that are used with touchable react-native images. There are native touchable components but I will stick with cross-platform for this blog. Key note (TouchableHighlight does not work without a console.log). 



React-Native Touchable Highlight code
TouchableHighlight Code

Touchable highlight image before touch
TouchableHighlight Image

Touchable highlight image after touch
TouchableHighlight Selected

If you want to read the official React-Native documentation on these components I will leave the link here.

Thank you for reading my blog about some of the fundamental techniques used in creating a React-Native with Expo cross-platform mobile application. I will add more to this blog as I continue my journey. 

Comments

Post a Comment

Popular posts from this blog

React-Native with Expo

-
Image
React-Native with Expo  I will cut out the environment setup and add a link to one of the many video tutorials you can find on YouTube here . The video linked is the one I followed to get my environment up and running, so it worked on my machine at home. I know bad developer joke.  The whole purpose of this blog is to go over some basic techniques and methods that can be used when developing a React-Native application using expo. Mastering these techniques will give you a great advantage in developing a more complex application. I followed some basic to do list tutorials to get me started and learn react native with expo. Any command line entries I have changed the font and made them bold so we don't confuse them with the normal text around them.  After the environment is set up and you have created a folder to store the new application in. Navigate to that folder and run the command prompt by selecting the file path at the top this...  Highlight all of it and type c...
Read more

Buttons & Alerts in React-Native

-
Image
Implementing Buttons in React-Native The button component in React-Native is like all other components and can be auto imported, by starting to type the <Button> you should see an auto import drop-down, just be careful when using this as it can sometimes auto import from the react-native web or other libraries. In these examples I am importing form "react-native". With buttons the self-closing syntax can be used because there is nothing added between them. Give the button a title ( title="Tap Button" )  or your choice of words and handle the onPress event by passing a function. I'll use the console.log for these examples ( onPress={() => console.log("Button Tapped")}> ) Each platform displays the button according to its native components.  Button Code with console.log Console logging the message Alerts with React-Native For the alert example we can use the button clicked code and change the console.log function to an alert function, it is t...
Read more