Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Mobile Development Articles
Page 3 of 156
How to display dropdown in ReactNative?
React Native provides the Picker component (now deprecated) and modern alternatives for creating dropdown selections. This guide covers both approaches. Basic Picker Syntax The traditional Picker component follows this structure: Import the Picker component from React Native: import { Picker } from 'react-native' Picker Properties Property Description enabled Boolean value. If false, picker is disabled and user cannot select items. itemStyle Styling to be applied to picker items. ...
Read MoreExplain VirtualizedList component usage in ReactNative?
The VirtualizedList component is React Native's most performance-optimized component for rendering large datasets. Unlike regular lists that render all items at once, VirtualizedList only renders visible items and recycles components as users scroll, dramatically improving memory usage and scroll performance. The basic structure of VirtualizedList requires several mandatory props: Essential VirtualizedList Properties Props Description ...
Read MoreHow to handle navigation from one page to another in react native?
While working on the app, we would like to switch from one screen to another and that is handled by React Navigation library. Installation To work on navigating pages we need to install few packages as follows: npm install @react-navigation/native @react-navigation/stack npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler Once you are done with the above installation let us now proceed with the next setup of navigation in React Native. Creating Page Components In your app project create a folder called pages/. Create 2 js files HomePage.js and AboutPage.js. pages/HomePage.js import ...
Read MoreHow to handle errors while working with Navigation in ReactNative?
Problem: How to handle the error "A navigator can only contain 'Screen' components as its direct children" while working with Navigation in ReactNative? Solution While working on your app you may come across issues like stated above. Here we'll understand why such error comes up and what can be done to avoid it. Here is the code that gives us the error: Example with Error App.js import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { Button, View, Alert, Text } from 'react-native'; ...
Read MoreHow to handle the error "Text strings must be rendered within a component" in ReactNative?
The "Text strings must be rendered within a component" error in React Native occurs when text or strings are placed outside of proper text components. This error typically happens due to formatting issues, improper indentation, or invisible characters in your JSX code. Common Causes This error commonly occurs due to: Bad indentation - Improper spacing that confuses the JSX parser Trailing spaces - Invisible whitespace characters at the end of lines Copy-paste issues - Hidden characters from external sources Text outside ...
Read MoreExplain ReactNative SwitchSelector Component
SwitchSelector is a React Native component that functions like a radio toggle button, allowing users to select from multiple options (more than 2). It's particularly useful for creating segmented controls and option selectors in mobile applications. Installation To work with SwitchSelector, you need to install the package: npm i react-native-switch-selector --save-dev Basic Syntax The basic SwitchSelector structure looks as follows: console.log(`value selected is : ${value}`)} /> Properties Here are the important properties of SwitchSelector: ...
Read MoreHow to display date and time picker in ReactNative?
To display date and time picker in your React Native app, you need to install the community package as it's not included in React Native core. Installation npm install @react-native-community/datetimepicker --save Once installed, you can import and use the DateTimePicker component in your app. Import Statement import DateTimePicker from '@react-native-community/datetimepicker'; Basic Syntax Key Properties Props ...
Read MoreHow to show a checkbox in reactnative?
Checkboxes are a common component that we often use in mobile UI. React Native provides several ways of implementing checkboxes in your applications. The core React Native package does not include checkbox support, so you need to install a third-party package to work with it. Installation The following package needs to be installed to display checkboxes: npm install react-native-paper Basic Checkbox Component The basic checkbox component structure is as follows: Important Properties Let us explore the important properties available for the checkbox component: ...
Read MoreHow to display Material Chip View in React Native?
To display chips in the UI, we are going to make use of React Native Paper Material Design. Chips are compact elements that represent input, attribute, or action. Installation Install react native paper as shown below − npm install react-native-paper Basic Syntax The basic chip component structure is as follows − Chip Name Properties The basic properties of chip are as follows − ...
Read MoreDifference between Google Fi and Ting
Both Google Fi and Ting are Mobile Virtual Network Operators (MVNOs) that provide telephone calls, SMS, and mobile broadband services using existing cellular networks and WiFi. They differ primarily in pricing models − Google Fi offers fixed monthly plans, while Ting follows a pay-as-you-go approach. Google Fi Google Fi is a wireless service provider operated by Google. It offers access to multiple cellular networks and seamlessly switches between them for the best signal. In the US, Google Fi operates on T-Mobile, Sprint, and US Cellular networks. Plans start at $20 per month and include unlimited calls, messages, WiFi ...
Read More