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
Javascript Articles
Page 179 of 534
How 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 MoreHow to create a canvas using FabricJS?
In this article, we are going to create a canvas using FabricJS but before that let us understand what a canvas is. For drawing graphics on a webpage, we have a web API called Canvas API. This API is good for drawing basic shapes but adding interaction to it or drawing complex shapes becomes very difficult. Thus FabricJS comes into the picture which is a library built on top of the Canvas API. To use FabricJS, the first thing that needs to be done is to create a FabricJS Canvas. Syntax new fabric.Canvas(element: HTMLElement|String, options: Object) ...
Read MoreHow to create a canvas with a background color using FabricJS?
In this article, we are going to create a canvas with a given background color using FabricJS. The default background color provided by the FabricJS API is white and it can be customized using the backgroundColor option. Syntax new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object) Parameters element − This parameter is the element itself which can be derived using document.getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element. ...
Read MoreHow to create a canvas with background image using FabricJS?
In this article, we are going to create a canvas with a background image using FabricJS. There are two ways available in FabricJS, using which we can change the background image of the canvas. First method is by using the Canvas class itself and passing backgroundImage in the second parameter of the class. Second method is to use the setBackgroundImage method. Let's see into each of them with an example. ...
Read MoreHow to create a canvas with a class using FabricJS?
In this article, we will see how to create a canvas with a class on it using the containerClass property. In order to have access over the native HTML canvas element, we can add a wrapper class over it. This class allows us to have control over the element to add interactivity or styling as per requirement. Syntax new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object) Parameters element − This parameter is the element itself which can be derived using document.getElementById() or the ...
Read MoreHow to disable selection of objects via dragging in a canvas using FabricJS?
In this article, we are going to illustrate how you can disable the selection of objects via dragging in FabricJS. In a FabricJS canvas, we can basically click anywhere and select an area and any object in that area will get selected. In this article, we will see how to disallow this behavior. Syntax new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object) Parameters element − This parameter is the element itself which can be derived using document.getElementById() or the id of the element ...
Read More