In this chapter, we will show you how to use Geolocation. Step 1: App.js Step 2: Geolocation We will start by setting up the initial state for that will hold the initial and the last position. Now, we need to get current position of the device when a component is mounted using the navigator.geolocation.getCurrentPosition. We will stringify the response so we can update the state. navigator.geolocation.watchPosition is used for tracking the users’ position. We also clear the watchers in this step. AsyncStorageExample.js

In this chapter, we will understand how to create custom Alert component. Step 1: App.js Step 2: alert_example.js We will create a button for triggering the showAlert function. Output When you click the button, you will see the following −

In this chapter, we will talk about Text component in React Native. This component can be nested and it can inherit properties from parent to child. This can be useful in many ways. We will show you example of capitalizing the first letter, styling words or parts of the text, etc. Step 1: Create File The file we are going to create is text_example.js Step 2: App.js In this step, we will just create a simple container. App.js Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career. Step 3: Text In this step, we will use the inheritance pattern. styles.text will be applied to all Text components. You can also notice how we set other styling properties to some parts of the text. It is important to know that all child elements have parent styles passed to them. text_example.js You will receive the following output −

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 Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career. 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 If we press the switch, the state will be updated. You can check values in the console. Output

In this chapter, we will show you how to control the status bar appearance in React Native. The Status bar is easy to use and all you need to do is set properties to change it. The hidden property can be used to hide the status bar. In our example it is set to false. This is default value. The barStyle can have three values – dark-content, light-content and default. This component has several other properties that can be used. Some of them are Android or IOS specific. You can check it in official documentation. App.js If we run the app, the status bar will be visible and content will have dark color. Output

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 Step 2: Logic this.state.user is used for picker control. The updateUser function will be triggered when a user is picked. PickerExample.js 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.

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 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 When we run the app, we will see the loader on screen. It will disappear after six seconds.

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 modal_example.js Our starting screen will look like this − If we click the button, the modal will open.

In this chapter, we will learn how to use WebView. It is used when you want to render web page to your mobile app inline. Using WebView The HomeContainer will be a container component. App.js Let us create a new file called WebViewExample.js inside the src/components/home folder. web_view_example.js The above program will generate the following output.

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. 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 Output