The Beginners Guide to React-Native Fundamental Concepts Part 3

In our third video on React Native: The Beginners Guide to React-Native Fundamental Concepts Part 3, continues our discussion of fundamental components. Previously, we covered mobile design, layout, and text components. Now we are going to cover some new components, such as buttons, images, and background images.

Just in case you missed the last video you can find it here or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.

React-Native Fundamental Concepts Part 3 focuses on:

Image
Image Background
Button

For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo

Image

An Image React component is useful when you want to display different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. However, if you are dealing with network and data images, you will need to manually specify the dimensions of your image. Otherwise, they may not render correctly in the application.

ImageBackground

Another common feature is ImageBackground. Of course if you are familiar with developing web applications then this one will remind you of a similar web element, background-image. Just like its web counter part, you can use the ImageBackground component to display an image to the background layer of your mobile app. It also has the same props as Image, and you can add whatever children to it you would like to layer on top of it. Unfortunately, you might not want to use ImageBackground in all cases, as the implementation is basic. For instance all you can really do is customize some width and height style attributes. If you need a more complex background image I would recommend using the Image component.

Button

Most of us are accustom to what a button is, ever heard the saying “Push the Button”. In the case of mobile development the basic button component is what we use for displaying buttons and it should render nicely on any platform. It also, Supports a minimal level of customization. So, if this button doesn’t look right for your app, you can build your own button using TouchableOpacity or TouchableWithoutFeedback.

TouchableOpacity

TouchableOpacity is a wrapper for making views respond properly to touches. On press down, the opacity of the wrapping view is decreased, dimming it. Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

React-Native Fundamental Concepts Part 3

Additional Resources

React is an open-source, front end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. React can be useful as a base in the development of single-page or mobile applications.
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome V8 engine and executes JavaScript code outside a web browser.
Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. In addition it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
Android software development is the process by which applications are created for devices running the Android operating system.
Xcode is Apple’s integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS.

This series comes from our mentoring/mastermind classes. These classes are virtual meetings that focus on how to improve our technical skills and build our businesses. After all the goals of each member vary. However, this diversity makes for great discussions and a ton of educational value every time we meet. We hope you enjoy viewing this series as much as we enjoy creating it. As always, this may not be all new to you, but we hope it helps you be a better developer.