Category: react Native

React Native – Switch ”; Previous Next In this chapter, we will explain the Switch component in a couple of steps. Step 1: Create File We will use the HomeContainer component for logic, but we need to create the presentational component. Let us now create a new file: SwitchExample.js. Step 2: Logic We are passing value from the state and functions for toggling switch items to SwitchExample component. Toggle functions will be used for updating the state. App.js import React, { Component } from ”react” import { View } from ”react-native” import SwitchExample from ”./switch_example.js” export default class HomeContainer extends Component { constructor() { super(); this.state = { switch1Value: false, } } toggleSwitch1 = (value) => { this.setState({switch1Value: value}) console.log(”Switch 1 is: ” + value) } render() { return ( <View> <SwitchExample toggleSwitch1 = {this.toggleSwitch1} switch1Value = {this.state.switch1Value}/> </View> ); } } Step 3: Presentation Switch component takes two props. The onValueChange prop will trigger our toggle functions after a user presses the switch. The value prop is bound to the state of the HomeContainer component. switch_example.js import React, { Component } from ”react” import { View, Switch, StyleSheet } from ”react-native” export default SwitchExample = (props) => { return ( <View style = {styles.container}> <Switch onValueChange = {props.toggleSwitch1} value = {props.switch1Value}/> </View> ) } const styles = StyleSheet.create ({ container: { flex: 1, alignItems: ”center”, marginTop: 100 } }) If we press the switch, the state will be updated. You can check values in the console. Output Print Page Previous Next Advertisements ”;

React Native – Useful Resources ”; Previous Next The following resources contain additional information on React Native. Please use them to get more in-depth knowledge on this. Useful Links on React Native React Native − Website Reference for React Native Useful Books on React Native To enlist your site on this page, please drop an email to [email protected] Print Page Previous Next Advertisements ”;

React Native – Modal ”; Previous Next In this chapter, we will show you how to use the modal component in React Native. Let us now create a new file: ModalExample.js We will put logic inside ModalExample. We can update the initial state by running the toggleModal. After updating the initial state by running the toggleModal, we will set the visible property to our modal. This prop will be updated when the state changes. The onRequestClose is required for Android devices. App.js import React, { Component } from ”react” import WebViewExample from ”./modal_example.js” const Home = () => { return ( <WebViewExample/> ) } export default Home; modal_example.js import React, { Component } from ”react”; import { Modal, Text, TouchableHighlight, View, StyleSheet} from ”react-native” class ModalExample extends Component { state = { modalVisible: false, } toggleModal(visible) { this.setState({ modalVisible: visible }); } render() { return ( <View style = {styles.container}> <Modal animationType = {“slide”} transparent = {false} visible = {this.state.modalVisible} onRequestClose = {() => { console.log(“Modal has been closed.”) } }> <View style = {styles.modal}> <Text style = {styles.text}>Modal is open!</Text> <TouchableHighlight onPress = {() => { this.toggleModal(!this.state.modalVisible)}}> <Text style = {styles.text}>Close Modal</Text> </TouchableHighlight> </View> </Modal> <TouchableHighlight onPress = {() => {this.toggleModal(true)}}> <Text style = {styles.text}>Open Modal</Text> </TouchableHighlight> </View> ) } } export default ModalExample const styles = StyleSheet.create ({ container: { alignItems: ”center”, backgroundColor: ”#ede3f2”, padding: 100 }, modal: { flex: 1, alignItems: ”center”, backgroundColor: ”#f7021a”, padding: 100 }, text: { color: ”#3f2949”, marginTop: 10 } }) Our starting screen will look like this − If we click the button, the modal will open. Print Page Previous Next Advertisements ”;

React Native – Images ”; Previous Next In this chapter, we will understand how to work with images in React Native. Adding Image Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder. We will show images on the home screen. App.js import React from ”react”; import ImagesExample from ”./ImagesExample.js” const App = () => { return ( <ImagesExample /> ) } export default App Local image can be accessed using the following syntax. image_example.js import React, { Component } from ”react” import { Image } from ”react-native” const ImagesExample = () => ( <Image source = {require(”C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png”)} /> ) export default ImagesExample Output Screen Density React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density. The following will be the names of the image inside the img folder. [email protected] [email protected] Network Images When using network images, instead of require, we need the source property. It is recommended to define the width and the height for network images. App.js import React from ”react”; import ImagesExample from ”./image_example.js” const App = () => { return ( <ImagesExample /> ) } export default App image_example.js import React, { Component } from ”react” import { View, Image } from ”react-native” const ImagesExample = () => ( <Image source = {{uri:”https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png”}} style = {{ width: 200, height: 200 }} /> ) export default ImagesExample Output Print Page Previous Next Advertisements ”;

React Native – Alert ”; Previous Next In this chapter, we will understand how to create custom Alert component. Step 1: App.js import React from ”react” import AlertExample from ”./alert_example.js” const App = () => { return ( <AlertExample /> ) } export default App Step 2: alert_example.js We will create a button for triggering the showAlert function. import React from ”react” import { Alert, Text, TouchableOpacity, StyleSheet } from ”react-native” const AlertExample = () => { const showAlert = () =>{ Alert.alert( ”You need to…” ) } return ( <TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>Alert</Text> </TouchableOpacity> ) } export default AlertExample const styles = StyleSheet.create ({ button: { backgroundColor: ”#4ba37b”, width: 100, borderRadius: 50, alignItems: ”center”, marginTop: 100 } }) Output When you click the button, you will see the following − Print Page Previous Next Advertisements ”;

Discuss React Native ”; Previous Next 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. Print Page Previous Next Advertisements ”;

React Native – Buttons ”; Previous Next In this chapter, we will show you touchable components in react Native. We call them ”touchable” because they offer built in animations and we can use the onPress prop for handling touch event. Facebook offers the Button component, which can be used as a generic button. Consider the following example to understand the same. App.js import React, { Component } from ”react” import { Button } from ”react-native” const App = () => { const handlePress = () => false return ( <Button onPress = {handlePress} title = “Red button!” color = “red” /> ) } export default App If the default Button component does not suit your needs, you can use one of the following components instead. Touchable Opacity This element will change the opacity of an element when touched. App.js import React from ”react” import { TouchableOpacity, StyleSheet, View, Text } from ”react-native” const App = () => { return ( <View style = {styles.container}> <TouchableOpacity> <Text style = {styles.text}> Button </Text> </TouchableOpacity> </View> ) } export default App const styles = StyleSheet.create ({ container: { alignItems: ”center”, }, text: { borderWidth: 1, padding: 25, borderColor: ”black”, backgroundColor: ”red” } }) Touchable Highlight When a user presses the element, it will get darker and the underlying color will show through. App.js import React from ”react” import { View, TouchableHighlight, Text, StyleSheet } from ”react-native” const App = (props) => { return ( <View style = {styles.container}> <TouchableHighlight> <Text style = {styles.text}> Button </Text> </TouchableHighlight> </View> ) } export default App const styles = StyleSheet.create ({ container: { alignItems: ”center”, }, text: { borderWidth: 1, padding: 25, borderColor: ”black”, backgroundColor: ”red” } }) Touchable Native Feedback This will simulate ink animation when the element is pressed. App.js import React from ”react” import { View, TouchableNativeFeedback, Text, StyleSheet } from ”react-native” const Home = (props) => { return ( <View style = {styles.container}> <TouchableNativeFeedback> <Text style = {styles.text}> Button </Text> </TouchableNativeFeedback> </View> ) } export default Home const styles = StyleSheet.create ({ container: { alignItems: ”center”, }, text: { borderWidth: 1, padding: 25, borderColor: ”black”, backgroundColor: ”red” } }) Touchable Without Feedback This should be used when you want to handle the touch event without any animation Usually, this component is not used much. <TouchableWithoutFeedback> <Text> Button </Text> </TouchableWithoutFeedback> 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 ”;