Knowledge Factory

Flexbox is a layout technique that is utilized to structure the layout of our application in a responsive manner. Flexbox provides three main properties to achieve the desired layout. These properties are flexDirection, justifyContent, and alignItems. f lexDirection (column, row) : Used to align its elements vertically or horizontally. justifyContent (center, flex-start, flex-end, space-around, space-between):  Used to distribute the elements inside the container. alignItems (center, flex-start, flex-end, stretched): Used to distribute the element inside the container along the secondary axis. Our demo app screen will look like this − flexDirection(row) Implementation First, You must set up your local development environment. Follow the below link to set up your local environment. React Native - Environment Setup - Create a new project After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. Edit the    App.js  file

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' },

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

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

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