Posts

Showing posts from January, 2021

React Native - FlatList - Mobile App Development

Image
Felicitations! You are standing in the right place!  In this example, we provide hardcoded elements to the data prop. Each element in the data props is rendered as a Text component. Our screen will look like this − 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. Import  StyleSheet, FlatList, Text, View, and Alert  component in our project. import React from 'react' ; import { StyleSheet, FlatList, Text, View, Alert } from 'react-native' ; Engender constructor in our main class. Using this.state   we are defining the FlatList items array with key constructor(props) { super(props); this .state = { ListItems: [ { key: 'Javacsript' },

React Native - Switch - Mobile Application Development

Image
Felicitations! You are standing in the right place! In this example , we initially set the Switch value to false and exhibit a Text with 'No'. When the value of Switch change to true by calling onValueChange the Text component is reset to 'Yes'. Our screen will look like this − 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. Import StyleSheet, Switch, View, and Text  component in our project. import React from 'react' ; import {StyleSheet, Switch, View, Text } from 'react-native' ; Declare State The state is generally initialized in the constructor and then call setState when we want to change it. state = { married: false }; Engender a Root

React Native - SectionList - Mobile Application Development

Image
Felicitations! You are standing in the right place! Today , we engender a SectionList with title and data. The section prop is utilized to engender the list of title and data values. The renderSectionHeader exhibits the header section of the list view. Our screen will look like this − 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. Import SectionList, StyleSheet, Text, and View component in our project. import React from 'react' ; import { SectionList, StyleSheet, Text, View } from 'react-native' ; Engender a Root View in render’s return block. render() { return ( <View style={styles.container}> <SectionList se

React Native - Floating Action Button - Mobile Application Development

Image
Felicitations! You are standing in the right place! Today, we will show you how to  Add a Floating Action Button to Mobile App. Our starting screen will look like this − If we click the button, the alert will open - 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. Import StyleSheet, View, Image, TouchableOpacity, and Alert component in our project. import React from 'react' ; import { StyleSheet, View, Image, TouchableOpacity, Alert } from 'react-native' ; Create a function named as MyFunction(). We would call this function on the Floating Action Button onPress event. MyFunction = () => { Alert.alert( "Wow! Floating Button Clicked" ); } Engender a Root View in re

React Native - Modal - Mobile Application Development

Image
Felicitations! You are standing in the right place! Today, 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 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. 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 &#