Category: react Native

React Native – Flexbox ”; Previous Next To accommodate different screen sizes, React Native offers Flexbox support. We will use the same code that we used in our React Native – Styling chapter. We will only change the PresentationalComponent. Layout To achieve the desired layout, flexbox offers three main properties − flexDirection justifyContent and alignItems. The following table shows the possible options. Property Values Description flexDirection ”column”, ”row” Used to specify if elements will be aligned vertically or horizontally. justifyContent ”center”, ”flex-start”, ”flex-end”, ”space-around”, ”space-between” Used to determine how should elements be distributed inside the container. alignItems ”center”, ”flex-start”, ”flex-end”, ”stretched” Used to determine how should elements be distributed inside the container along the secondary axis (opposite of flexDirection) If you want to align the items vertically and centralize them, then you can use the following code. App.js import React, { Component } from ”react” import { View, StyleSheet } from ”react-native” const Home = (props) => { return ( <View style = {styles.container}> <View style = {styles.redbox} /> <View style = {styles.bluebox} /> <View style = {styles.blackbox} /> </View> ) } export default Home const styles = StyleSheet.create ({ container: { flexDirection: ”column”, justifyContent: ”center”, alignItems: ”center”, backgroundColor: ”grey”, height: 600 }, redbox: { width: 100, height: 100, backgroundColor: ”red” }, bluebox: { width: 100, height: 100, backgroundColor: ”blue” }, blackbox: { width: 100, height: 100, backgroundColor: ”black” }, }) Output If the items need to be moved to the right side and spaces need to be added between them, then we can use the following code. App.js import React, { Component } from ”react” import { View, StyleSheet } from ”react-native” const App = (props) => { return ( <View style = {styles.container}> <View style = {styles.redbox} /> <View style = {styles.bluebox} /> <View style = {styles.blackbox} /> </View> ) } export default App const styles = StyleSheet.create ({ container: { flexDirection: ”column”, justifyContent: ”space-between”, alignItems: ”flex-end”, backgroundColor: ”grey”, height: 600 }, redbox: { width: 100, height: 100, backgroundColor: ”red” }, bluebox: { width: 100, height: 100, backgroundColor: ”blue” }, blackbox: { width: 100, height: 100, backgroundColor: ”black” }, }) Print Page Previous Next Advertisements ”;

React Native – ScrollView ”; Previous Next In this chapter, we will show you how to work with the ScrollView element. We will again create ScrollViewExample.js and import it in Home. App.js import React from ”react”; import ScrollViewExample from ”./scroll_view.js”; const App = () => { return ( <ScrollViewExample /> ) }export default App Scrollview will render a list of names. We will create it in state. ScrollView.js import React, { Component } from ”react”; import { Text, Image, View, StyleSheet, ScrollView } from ”react-native”; class ScrollViewExample extends Component { state = { names: [ {”name”: ”Ben”, ”id”: 1}, {”name”: ”Susan”, ”id”: 2}, {”name”: ”Robert”, ”id”: 3}, {”name”: ”Mary”, ”id”: 4}, {”name”: ”Daniel”, ”id”: 5}, {”name”: ”Laura”, ”id”: 6}, {”name”: ”John”, ”id”: 7}, {”name”: ”Debra”, ”id”: 8}, {”name”: ”Aron”, ”id”: 9}, {”name”: ”Ann”, ”id”: 10}, {”name”: ”Steve”, ”id”: 11}, {”name”: ”Olivia”, ”id”: 12} ] } render() { return ( <View> <ScrollView> { this.state.names.map((item, index) => ( <View key = {item.id} style = {styles.item}> <Text>{item.name}</Text> </View> )) } </ScrollView> </View> ) } } export default ScrollViewExample const styles = StyleSheet.create ({ item: { flexDirection: ”row”, justifyContent: ”space-between”, alignItems: ”center”, padding: 30, margin: 2, borderColor: ”#2a4944”, borderWidth: 1, backgroundColor: ”#d2f7f1” } }) When we run the app, we will see the scrollable list of names. Print Page Previous Next Advertisements ”;

React Native – Text Input ”; Previous Next In this chapter, we will show you how to work with TextInput elements in React Native. The Home component will import and render inputs. App.js import React from ”react”; import Inputs from ”./inputs.js” const App = () => { return ( <Inputs /> ) } export default App Inputs We will define the initial state. After defining the initial state, we will create the handleEmail and the handlePassword functions. These functions are used for updating state. The login() function will just alert the current value of the state. We will also add some other properties to text inputs to disable auto capitalisation, remove the bottom border on Android devices and set a placeholder. inputs.js import React, { Component } from ”react” import { View, Text, TouchableOpacity, TextInput, StyleSheet } from ”react-native” class Inputs extends Component { state = { email: ””, password: ”” } handleEmail = (text) => { this.setState({ email: text }) } handlePassword = (text) => { this.setState({ password: text }) } login = (email, pass) => { alert(”email: ” + email + ” password: ” + pass) } render() { return ( <View style = {styles.container}> <TextInput style = {styles.input} underlineColorAndroid = “transparent” placeholder = “Email” placeholderTextColor = “#9a73ef” autoCapitalize = “none” onChangeText = {this.handleEmail}/> <TextInput style = {styles.input} underlineColorAndroid = “transparent” placeholder = “Password” placeholderTextColor = “#9a73ef” autoCapitalize = “none” onChangeText = {this.handlePassword}/> <TouchableOpacity style = {styles.submitButton} onPress = { () => this.login(this.state.email, this.state.password) }> <Text style = {styles.submitButtonText}> Submit </Text> </TouchableOpacity> </View> ) } } export default Inputs const styles = StyleSheet.create({ container: { paddingTop: 23 }, input: { margin: 15, height: 40, borderColor: ”#7a42f4”, borderWidth: 1 }, submitButton: { backgroundColor: ”#7a42f4”, padding: 10, margin: 15, height: 40, }, submitButtonText:{ color: ”white” } }) Whenever we type in one of the input fields, the state will be updated. When we click on the Submit button, text from inputs will be shown inside the dialog box. Whenever we type in one of the input fields, the state will be updated. When we click on the Submit button, text from inputs will be shown inside the dialog box. Print Page Previous Next Advertisements ”;