Posts

Showing posts with the label Android

React Native - Modal - Mobile Application Development

Image
In this section,  we will show you how to utilize the modal component in React Native. Our starting screen will look like this − If we click the button, the modal will open - The React Native Modal is a type of View component which is utilized to present the content above an enclosing view. To utilize the Modal component in our application, we require to import Modal from the react-native library. Implementation Follow the below link to set up your local environment. React Native - Environment Setup After executing the commands mentioned in this link, a folder with a specified name is created with the following structure. Next, we are going to edit the App.js file and write the below code. import React from 'react' ; import { TouchableOpacity, StyleSheet, Text, View, Button, Modal } from 'react-native' ; export default class App extends React.Component { state = { isVisible: false , } render() { return ( <View style={styles.con

React Native - State and Props - Mobile Application development

Image
In this article,  we will talk about State  and Props State React components has a built-in state object. The state is mutable. This designates that the state can be updated in the future. The state is generally initialized in the constructor and then call setState when we want to change it. In this example, we engender a Text component with state data. The content of the Text component will be updated by clicking a button. The event onPress calls the setState, and it updates the state "knfState" text. First, You must set up your local development environment. Follow the below link to set up your local environment.   https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. In this example, we engender a Text component with state data. The content of the Text component will be updated by clicking a button. The event on

React Native - Generate QR Code - Mobile Application development

Image
Congratulations! You are standing in the right place! In this article,  we are making a TextInput to get the value for QR Code and after clicking on “Generate QR Code” it will engender the QR Code. QR Code withal kenned as Quick Response Code is a trademark for the two-dimensional barcode. QR Code is a machine-readable block enabled code for encoding numeric value and alphabetic value. The QR Code stores information within a block of images and can store multiple types of information, They are very expeditious responsible and can be readable expeditiously and decoded. Screenshot Implementation: First, You must set up your local development environment. Follow the below link to set up your local environment.   https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. Install react-native-svg and react-native-qrcode-svg package, whic

React Native - WebView - Mobile Application development

Image
Congratulations! You are standing in the right place! In this article,  we will learn how to utilize WebView. It is utilized when you want to render a web page to your mobile app inline. React Native WebView is a modern, well-fortified, and cross-platform WebView for React Native. It is intended to be a supersession for the built-in WebView Implementation: First, You must set up your local development environment. Follow the below link to set up your local environment.   https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. Install  react -native-webview npm i  react-native-webview Next, we are going to edit the  App.js  file and write the below code. Import  WebView,  StyleSheet , View component in our project. import React from 'react' ; import { StyleSheet, View, } from 'react-native' ; import { W