Mobile Development Articles

Page 24 of 156

What is the equivalent of Java static methods in Kotlin?

Soumak De
Soumak De
Updated on 27-Oct-2021 501 Views

In Java, "static" keyword is used for efficient memory management. Once a variable or method is declared as static, then the JVM will allocate memory for these variable only once. Usually static variables are used to declare common properties of a class, for example, "Name of the institution". In the following example, we will see how to use the static keyword.Example of Static in using JavaIn order to demonstrate how static works in Java, we will access our online Java compiler and we will create a Test class. Inside Test, we will try to create a static variable along with ...

Read More

How to iterate over a Hashmap in Kotlin?

Soumak De
Soumak De
Updated on 27-Oct-2021 3K+ Views

A Map is a collection where data is stored as a key-value pair and the corresponding key has to be unique. A HashMap is a collection class based upon MutableMap interface and it does that by implementing MutableMap interface of HashTable. Kotlin provides four types of constructor to define and manipulate HashMap.HashMap() – It is the default constructor which helps us create an empty HashMap.HashMap(initialCapacity: Int, loadFactor: Float = 0f) – It helps us create a HashMap using initial capacity; if it is not provided, then it will be ignored and it will act as default HashMap().HashMap(initialCapacity: Int) – It ...

Read More

How to display Material Chip View in React Native?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 944 Views

To display chips in the UI, we are going to make use of React Native Paper Material Design.Install react native paper as shown below −npm install --save-dev react-native-paperThe chip component looks as follows on the UI −The basic chip component is as follows −Chip NameThe basic properties of chip are as follows −PropsDescriptionmodeThe values for mode are flat and outlined. With flat mode you will not get a border and with outlined the border for the chip will be displayed.iconThe icon to be given to the chip.selectedThe values are true/false. If true the chip will be selected.selectedColorColor to be given ...

Read More

How to show a checkbox in reactnative?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 3K+ Views

Checkboxes is a common component that we often use on the UI. We do have some cool ways of showing checkboxes in reactnative.The core react-native package does not have checkbox support and you need to install a package to work with it.Following package has to be installed to display checkbox −npm install --save-dev react-native-paperThe basic checkbox component is as follows −Let us now see some important properties on checkbox −PropsDescriptionstatusThe value that can be given to status are checked, unchecked and indeterminate.disabledThe value is boolean.It can be used to enable/disable the checkbox.onPressThe function that will be called when the checkbox ...

Read More

How to display date and time picker in ReactNative?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 9K+ Views

To display date and time picker in your app you have to install a package as shown below −npm install @react-native-community/datetimepicker --saveOnce you are done installing, let us now proceed on how to display a Datepicker first.Example: DateTimePicker in ReactNativeImport the datetimepicker component first as shown below −import DateTimePicker from '@react-native-community/datetimepicker';A basic DateTimePicker component looks as follows −Here are some of the important properties of DateTimePicker.PropsDescriptionmodeDefines the type of picker you want. The options are date, time, datetime and countdown.From above options datetime and countdown are available only on iOS.displayThe values for Android are default, spinner, calendar and clock. For ...

Read More

Explain ReactNative SwitchSelector Component

Shilpa S
Shilpa S
Updated on 01-Jul-2021 443 Views

SwitchSelector component is similar to a radio toggle button. It allows you to select with more than 2 values.To work with SwitchSelector you have to install the package as shown below −npm i react-native-switch-selector --save-devThe basic SwitchSelector looks as follows − console.log(`value selected is : ${value}`)} />Here are some important properties of SwitchSelector −PropsDescriptionoptionsAn array with label, value and imageicon id required.initialThe initial item from the array that will be selected.valueThe switch value that will be available with onPress eventonPressThe event with callback function that will get called when the Switch is changed.fontSizeThe fontSize to be considered for the label.selectedColorThe ...

Read More

How to handle the error “Text strings must be rendered within a <Text> component” in ReactNative?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 7K+ Views

While developing your app you can come across the error as stated above. Here is the code that gives the error −Exampleimport React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component {    render() {       return (                                       );    } } const styles = StyleSheet.create({    container: {       paddingTop: 50,       paddingLeft: 50,    },    stretch: {       width: ...

Read More

How to handle errors while working with Navigation in ReactNative?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 1K+ Views

Problem: How to handle the error “A navigator can only contain 'Screen' components as its direct children” while working with Navigation in ReactNative?SolutionWhile working on your app you may come across issues like stated above. Here will understand why such error comes up and what can be done to avoid it.Here is the code that gives us the error −ExampleApp.jsimport * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { Button, View, Alert, Text } from 'react-native'; const Stack = createStackNavigator(); const HomePage = ({ navigation }) => {    return ...

Read More

How to handle navigation from one page to another in react native?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 4K+ Views

While working on the app, we would like to switch from one screen to another and that is handled by react navigation.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-handlerOnce you are done with the above installation let us now proceed with the next setup of navigation in react native.In your app project create a folder called pages/ . Create 2 js files HomePage.js and AboutPage.js.pages/HomePage.jsimport * as React from 'react'; import { Button, View, Alert, Text } from 'react-native'; const HomeScreen = ({ navigation }) ...

Read More

Explain VirtualizedList component usage in ReactNative?

Shilpa S
Shilpa S
Updated on 01-Jul-2021 3K+ Views

The VirtualizedList component is best when your list is massively big in size.VirtualizedList helps in better performance and memory usage.As user scrolls, the data is shown to the user.The basic component of VirtualizedList is as follows &minuns;Important VirtualizedList PropertiesPropsDescriptionrenderItemThe items from the data will be rendered inside the VirtualizedList.dataThe data to be displayed.getItemFunction that will fetch the individual item from the data.getItemCountGets the count of the data items.initialNumToRenderNo of times to be rendered at the start.keyExtractorThe unique key to be considered for each item for the specified index.Here is a working example of VirtualizedList.Example: Display of data using VirtualizedListTo work ...

Read More
Showing 231–240 of 1,551 articles
« Prev 1 22 23 24 25 26 156 Next »
Advertisements