Learning React Native

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...

 Images Local storage images with React-Native I will run these code examples in the App.js file, this is an easier way to practice code and see what any alterations do. The return method displays the commands added to it. Safe Area View is an iOS specific command that creates enough padding to avoid the speaker and front facing camera on an Apple phone. You might have noticed media streaming content that does not use the safe area view and cuts of a section of the image or video you might be viewing on the phone. It's only a small section but can become really annoying. React-Native Style Sheet The style sheet is needed before adding any images, this allows us to control the image dimensions. The Style sheet API is imported from react-native, this then allows us to create a style sheet container. Best practice is to have a separate style component that gets called into the functional component but for the sake of these examples I will create it at the bottom of the page (Which is ...

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 Tou...