Category: react Native

React Native – Overview ”; Previous Next For better understanding of React Native concepts, we will borrow a few lines from the official documentation − React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don”t build a mobile web app, an HTML5 app, or a hybrid app; you build a real mobile app that”s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. React Native Features Following are the features of React Native − React − This is a Framework for building web and mobile apps using JavaScript. Native − You can use native components controlled by JavaScript. Platforms − React Native supports IOS and Android platform. React Native Advantages Follow are the advantages of React Native − JavaScript − You can use the existing JavaScript knowledge to build native mobile apps. Code sharing − You can share most of your code on different platforms. Community − The community around React and React Native is large, and you will be able to find any answer you need. React Native Limitations Following are the limitations of React Native − Native Components − If you want to create native functionality which is not created yet, you will need to write some platform specific code. Print Page Previous Next Advertisements ”;

React Native – View ”; Previous Next View is the most common element in React Native. You can consider it as an equivalent of the div element used in web development. Use Cases Let us now see a few common use cases. When you need to wrap your elements inside the container, you can use View as a container element. When you want to nest more elements inside the parent element, both parent and child can be View. It can have as many children as you want. When you want to style different elements, you can place them inside View since it supports style property, flexbox etc. View also supports synthetic touch events, which can be useful for different purposes. We already used View in our previous chapters and we will use it in almost all subsequent chapters as well. The View can be assumed as a default element in React Native. In example given below, we will nest two Views and a text. App.js import React, { Component } from ”react” import { View, Text } from ”react-native” const App = () => { return ( <View> <View> <Text>This is my text</Text> </View> </View> ) } export default App Output Print Page Previous Next Advertisements ”;

React Native – State ”; Previous Next The data inside React Components is managed by state and props. In this chapter, we will talk about state. Difference between State and Props The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated. Using State This is our root component. We are just importing Home which will be used in most of the chapters. App.js import React from ”react”; import { StyleSheet, Text, View } from ”react-native”; export default class App extends React.Component { state = { myState: ”Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.” } render() { return ( <View> <Text> {this.state.myState} </Text> </View> ); } } We can see in emulator text from the state as in the following screenshot. Updating State Since state is mutable, we can update it by creating the deleteState function and call it using the onPress = {this.deleteText} event. Home.js import React, { Component } from ”react” import { Text, View } from ”react-native” class Home extends Component { state = { myState: ”Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.” } updateState = () ⇒ this.setState({ myState: ”The state is updated” }) render() { return ( <View> <Text onPress = {this.updateState}> {this.state.myState} </Text> </View> ); } } export default Home; NOTES − In all chapters, we will use the class syntax for stateful (container) components and function syntax for stateless (presentational) components. We will learn more about components in the next chapter. We will also learn how to use the arrow function syntax for updateState. You should keep in mind that this syntax uses the lexical scope, and this keyword will be bound to the environment object (Class). This will sometimes lead to unexpected behavior. The other way to define methods is to use the EC5 functions but in that case we will need to bind this manually in the constructor. Consider the following example to understand this. class Home extends Component { constructor() { super() this.updateState = this.updateState.bind(this) } updateState() { // } render() { // } } Print Page Previous Next Advertisements ”;

React Native – Picker ”; Previous Next In this chapter, we will create simple Picker with two available options. Step 1: Create File Here, the App.js folder will be used as a presentational component. App.js import React from ”react” import PickerExample from ”./PickerExample.js” const App = () => { return ( <PickerExample /> ) } export default App Step 2: Logic this.state.user is used for picker control. The updateUser function will be triggered when a user is picked. PickerExample.js import React, { Component } from ”react”; import { View, Text, Picker, StyleSheet } from ”react-native” class PickerExample extends Component { state = {user: ””} updateUser = (user) => { this.setState({ user: user }) } render() { return ( <View> <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}> <Picker.Item label = “Steve” value = “steve” /> <Picker.Item label = “Ellen” value = “ellen” /> <Picker.Item label = “Maria” value = “maria” /> </Picker> <Text style = {styles.text}>{this.state.user}</Text> </View> ) } } export default PickerExample const styles = StyleSheet.create({ text: { fontSize: 30, alignSelf: ”center”, color: ”red” } }) Output If you click on the name it prompts you all three options as − And you can pick one of them and the output will be like. Print Page Previous Next Advertisements ”;

React Native – Debugging ”; Previous Next React native offers a couple of methods that help in debugging your code. In App Developer Menu You can open the developer menu on the IOS simulator by pressing command + D. On Android emulator, you need to press command + M. Reload − Used for reloading simulator. You can use shortcut command + R Debug JS Remotely − Used for activating debugging inside browser developer console. Enable Live Reload − Used for enabling live reloading whenever your code is saved. The debugger will open at localhost:8081/debugger-ui. Start Systrace − Used for starting Android marker based profiling tool. Show Inspector − Used for opening inspector where you can find info about your components. You can use shortcut command + I Show Perf Monitor − Perf monitor is used for keeping track of the performance of your app. Print Page Previous Next Advertisements ”;

React Native – Running IOS ”; Previous Next If you want to test your app in the IOS simulator, all you need is to open the root folder of your app in terminal and run − react-native run-ios The above command will start the simulator and run the app. We can also specify the device we want to use. react-native run-ios –simulator “iPhone 5s After you open the app in simulator, you can press command + D on IOS to open the developers menu. You can check more about this in our debugging chapter. You can also reload the IOS simulator by pressing command &plus; R. Print Page Previous Next Advertisements ”;

React Native – Props ”; Previous Next In our last chapter, we showed you how to use mutable state. In this chapter, we will show you how to combine the state and the props. Presentational components should get all data by passing props. Only container components should have state. Container Component We will now understand what a container component is and also how it works. Theory Now we will update our container component. This component will handle the state and pass the props to the presentational component. Container component is only used for handling state. All functionality related to view(styling etc.) will be handled in the presentational component. Example If we want to use example from the last chapter we need to remove the Text element from the render function since this element is used for presenting text to the users. This should be inside the presentational component. Let us review the code in the example given below. We will import the PresentationalComponent and pass it to the render function. After we import the PresentationalComponent and pass it to the render function, we need to pass the props. We will pass the props by adding myText = {this.state.myText} and deleteText = {this.deleteText} to <PresentationalComponent>. Now, we will be able to access this inside the presentational component. App.js import React from ”react”; import { StyleSheet, Text, View } from ”react-native”; import PresentationalComponent from ”./PresentationalComponent” export default class App extends React.Component { state = { myState: ”Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.” } updateState = () => { this.setState({ myState: ”The state is updated” }) } render() { return ( <View> <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/> </View> ); } } Presentational Component We will now understand what a presentational component is and also how it works. Theory Presentational components should be used only for presenting view to the users. These components do not have state. They receive all data and functions as props. The best practice is to use as much presentational components as possible. Example As we mentioned in our previous chapter, we are using the EC6 function syntax for presentational components. Our component will receive props, return view elements, present text using {props.myText} and call the {props.deleteText} function when a user clicks on the text. PresentationalComponent.js import React, { Component } from ”react” import { Text, View } from ”react-native” const PresentationalComponent = (props) => { return ( <View> <Text onPress = {props.updateState}> {props.myState} </Text> </View> ) } export default PresentationalComponent Now, we have the same functionality as in our State chapter. The only difference is that we refactored our code to the container and the presentational component. You can run the app and see the text as in the following screenshot. If you click on text, it will be removed from the screen. Print Page Previous Next Advertisements ”;

React Native – App ”; Previous Next If you open the default app you can observe that the app.js file looks like import React from ”react”; import { StyleSheet, Text, View } from ”react-native”; export default class App extends React.Component { render() { return ( <View style = {styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ”#fff”, alignItems: ”center”, justifyContent: ”center”, }, }); Output Hello world To display a simple message saying “Welcome to Tutorialspoint” remove the CSS part and insert the message to be printed wrapped by the <text></text> tags inside <view></view> as shown below. import React from ”react”; import { StyleSheet, Text, View } from ”react-native”; export default class App extends React.Component { render() { return ( <View> <Text>Welcome to Tutorialspoint</Text> </View> ); } } Print Page Previous Next Advertisements ”;

React Native – ActivityIndicator ”; Previous Next In this chapter we will show you how to use the activity indicator in React Native. Step 1: App App component will be used to import and show our ActivityIndicator. App.js import React from ”react” import ActivityIndicatorExample from ”./activity_indicator_example.js” const Home = () => { return ( <ActivityIndicatorExample /> ) } export default Home Step 2: ActivityIndicatorExample Animating property is a Boolean which is used for showing the activity indicator. The latter closes six seconds after the component is mounted. This is done using the closeActivityIndicator() function. activity_indicator_example.js import React, { Component } from ”react”; import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from ”react-native”; class ActivityIndicatorExample extends Component { state = { animating: true } closeActivityIndicator = () => setTimeout(() => this.setState({ animating: false }), 60000) componentDidMount = () => this.closeActivityIndicator() render() { const animating = this.state.animating return ( <View style = {styles.container}> <ActivityIndicator animating = {animating} color = ”#bc2b78” size = “large” style = {styles.activityIndicator}/> </View> ) } } export default ActivityIndicatorExample const styles = StyleSheet.create ({ container: { flex: 1, justifyContent: ”center”, alignItems: ”center”, marginTop: 70 }, activityIndicator: { flex: 1, justifyContent: ”center”, alignItems: ”center”, height: 80 } }) When we run the app, we will see the loader on screen. It will disappear after six seconds. Print Page Previous Next Advertisements ”;

React Native Tutorial PDF Version Quick Guide Resources Job Search Discussion React Native is a JavaScript framework for building native mobile apps. It uses the React framework and offers large amount of inbuilt components and APIs. Audience This tutorial is designed for JavaScript and React developers who aspire to learn mobile building skills. By following this course, you will expand your React and JavaScript knowledge, learn some concepts of functional programming, and prepare to enter the mobile world. Since JavaScript world is moving forward, we will keep up with it and use EC6 syntax in this tutorial. Prerequisites To be able to follow this tutorial, you should be familiar with React and have solid JavaScript knowledge. Even if you do not have previous experience with React, you should be able to follow it. In this tutorial, we will explain some fundamental React concepts. Print Page Previous Next Advertisements ”;