React-Native with Expo

-
React-Native logo

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...
React-Native and Expo app directory

 Highlight all of it and type cmd then hit return. This will open the command prompt from that file location. In the command prompt enter  expo init The name of your app  For example expo init demoapp  and hit return. You will be greeted with a choice of templates to use, select blank empty canvas. This might take a few minutes to build the new app, once this has been completed navigate to the new app by entering cd demoapp or your app name. Now open Vscode from this directory by entering  code .  into the command line, this will open the new project in Vscode. To make sure the environment is set up properly, I will share my list of extensions:
  • React Native Tools - Provides a development environment for React-Native projects and makes debugging code a lot quicker. 
  • React Native/React/Redux snippets for es6/es7 - This allows for the use of code snippets, making it easier to create functional components. 
  • material icon theme - This provides a nice interface to work with and is an optional extension
  • Prettier code formatter - Another optional tool, this is used to format code. So once you save a document it aligns the code into the proper format.
Having a different extension might cause errors when developing. Don't delete any you have installed, just disable them for the project.
We are now ready to start developing, in the next post we go over buttons and alerts. 

Links to documentation for more learning materials
The documentation in these links will help when learning React-Native with expo, They offer everything from APIs to fundamental concepts.



Comments

Post a Comment

Popular posts from this blog

Touchable Image Components in React-Native

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