Post Link : React Native Picker Spinner DropDown Menu List Example - Android

In this tutorial, we are going to discuss how to create simple picker spinner dropdown menu list in react native application. Picker Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

[img]https://4.bp..com/-puNk3kY_CaQ/W8yOhWzPiOI/AAAAAAAACDU/VlQ9bzG3x6c_7Vfm8ENo2c3uQh1jvhd0ACLcBGAs/s640/picker.png[/img]

Post Link : React Native Show Border Around Image Component Android

This post explains how to add rectangular border around the image component in react native application. This is pretty simple, you need to use borderWidth and borderColor properties of css stylesheet design.

Set Border In React Native component :
Using below CSS properties you can set border width and color in react native component.
borderWidth : This will set border width.
borderColor : This will set border color.

React Native Show Border Around Image Component Android

[img]https://1.bp..com/-o5ysfJQJgqE/W8lky1Q8RfI/AAAAAAAACCY/9vv1QMBmlAML-6Llavna2hujgYNZqyVqgCLcBGAs/s640/bor.png[/img]

Read More...

Post Link : React Native Vertical ScrollView Example Android

This tutorial explains how to create simple vertical ScrollView in react native application. The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).

[img]https://1.bp..com/-wfBPaOry_No/W6j31Pmx6NI/AAAAAAAAB7o/2ud0L-1a73gqla4YdUkjwePIuNbYKX0lgCLcBGAs/s640/ver.png[/img]

React Native Vertical ScrollView Example Android

Post Link : Create Custom Snackbar Component Example In React Native- Android

This tutorial explains how to create simple Snackbar component in react native application. Snackbars are just like Toast messages except they provide action to interact with. Snackbar will be displayed at the bottom of the screen and can be swiped off in order to dismiss them.

[img]https://2.bp..com/-93jY0dxBGR4/W8NnVz92VSI/AAAAAAAACBc/q77WAtv-Xb0LGsSOBxGRrU1d1QXyYVT6ACLcBGAs/s640/snack.png[/img]

Post Link : Create Dropdown Menu In React Native

This tutorial explains how to create simple dropdown menu in react native application. The dropdown menu is most common and integral part of every mobile application, that helps user to move or navigate between different windows/screens of mobile application by selecting the option from the dropdown menu list. This dropdown menu works perfectly in Android and IOS device without any issues.

Create Dropdown Menu In React Native

[img]https://1.bp..com/-sjWQyIJ8iN8/W7OM69QBIhI/AAAAAAAAB_w/3oiOEXhREysoz5TIDzw0oUNEjzcJOyNoQCLcBGAs/s640/drop.png[/img]

Post Link : React Native Simple SectionList Component Example Android

This tutorials explains how to use simple SectionList Component layout design in react native supplication and apply set onPress event on SectionList to get value from selected section list item. SectionList is a component that extends the FlatList functionality even more. As the name suggests, it lets you render your list component with section headers. SectionList Component provides a performant interface for rendering sectioned lists, supporting the most handy features.

[img]https://4.bp..com/-PeHYPhP5tPI/W7rQTM6KHdI/AAAAAAAACBI/WMEQUy9wfbsD4f0Y8w7z-popwl8HfLh3ACLcBGAs/s640/sec.png[/img]

Post Link : React Native open website URL in default browser Android Example

This tutorial explains how to open website URL in default browser of android or ios application using react native. The Linking API in react native application is used for deep linking process. Linking gives you a general interface to interact with both incoming and outgoing app links. Using Linking API we can open or navigate to any website URL from our Android or iOS application to device default web browser.

[img]https://2.bp..com/-ujdIIC3RmIU/W7oEnM5WIqI/AAAAAAAACAo/yj9XHeCU650WhbxmejTqXYCAbgh5WauqQCLcBGAs/s640/url.png[/img]

React Native open website URL in default browser Android Example

Post Link : React Native Simple Custom GridView Layout Example Android

This tutorial explains how to create simple custom grid view in react native application. Grid View that displays items in a two-dimensional, scrollable grid layout. The grid items are automatically inserted to the layout using a renderItem props. The GridView is fully responsive and scrollable component layout. Officially there are no specific GridView Component available in react native application, but we can create Grid layout using FlatList Component by specifying numColumns props (example : numColumns={2}) in FlatList Component. This props allows us to create multiple columns in each row in responsive order.

[img]https://1.bp..com/-U6DxHFlg770/W7ECe9uy4rI/AAAAAAAAB-0/Mumx0xM2APQkq4ynVni17BEo1wK1tU-NgCLcBGAs/s640/grid.png[/img]

React Native Simple Custom GridView Layout Example Android

Post Link : Image Resizing In React Native

This tutorial explains how to perform image resizing in react native application. Mobile devices come in multiple screen resolutions. When we display images it is important to ensure that the images displayed are optimized for screen resolution. The width and height style properties of Image components determine the size of what's rendered on the screen. For example, you will probably have to work with images at some point that have a larger resolution than you want displayed in your React Native application. Simply setting the width and height style properties on the Image is enough to properly scale the image. In that case you need to use resizeMode props in Image Component to resize your image.

Image Resizing In React Native

[img]https://4.bp..com/-YCjMPEbpYng/W7CJRGQ6s3I/AAAAAAAAB9Y/s1LEY2b7zY8GSKxb5ImGa6VwMoXVbJDQgCLcBGAs/s640/imager.png[/img]

read more...

Post Link : Create Dropdown Menu In React Native

This tutorial explains how to create simple dropdown menu in react native application. The dropdown menu is most common and integral part of every mobile application, that helps user to move or navigate between different windows/screens of mobile application by selecting the option from the dropdown menu list. This dropdown menu works perfectly in Android and IOS device without any issues.

Create Dropdown Menu In React Native
[img]https://1.bp..com/-sjWQyIJ8iN8/W7OM69QBIhI/AAAAAAAAB_w/3oiOEXhREysoz5TIDzw0oUNEjzcJOyNoQCLcBGAs/s640/drop.png[/img]

Read More...

Post Link : React Native Horizontal ScrollView Example Android

This tutorial explains how to create horizontal ScrollView example in react native application. As we are already discussed the ScrollView is a generic scrolling container that can host multiple components and views. In this example we are going to display 10 images in horizontal fashion in ScrollView Component and you can view the images by scrolling left to right or right to left direction, depending upon image placement or position.

[img]https://3.bp..com/-YraG54_QCs4/W69zwBy9-LI/AAAAAAAAB8k/3Tx8EqwdhycWdARmANZccHkfvZGjhV0WACLcBGAs/s640/hor.png[/img]

Post Link : React Native Vertical ScrollView Example Android

This tutorial explains how to create simple vertical ScrollView in react native application. The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).


React Native Vertical ScrollView Example Android

[img]https://1.bp..com/-wfBPaOry_No/W6j31Pmx6NI/AAAAAAAAB7o/2ud0L-1a73gqla4YdUkjwePIuNbYKX0lgCLcBGAs/s640/ver.png[/img]

Post Link : Set Background Color of Root View in React Native

This post explains how to set or change background color of RootView in React Native application using CSS stylesheet design. You can change the background of main activity/screen, by specifying backgroundColor attribute of stylesheet design in parent view layout (or RoorView) . This will make App’s starting screen look and feel better.

Set Background Color of Root View in React Native
[img]https://2.bp..com/-oqZF5l7N8qs/W6e6mHpKRTI/AAAAAAAAB6c/pEjlHtWHnzY_lQHIZcZCBMrxSrXTG-tpwCLcBGAs/s640/bckc.png[/img]

[url=https://www.skptricks.com/2018/09/set-background-color-of-root-view-in-react-native.html]Read More.../url]

Post Link : React Native Simple FlatList Component Android Example

This tutorial explains how to use FlatList component in react native application and apply set onPress event on FlatList to get value from selected list item. FlatList provides easy way to make an efficient scrolling list of data. FlatList - More performant compared to ListView. ListView rendering can get slow once the number of items grows larger. FlatList significantly improves memory usage and efficiency (especially for large or complex lists).

[img]https://1.bp..com/-ngOj_l6e9wI/W6ZUrIjXJ2I/AAAAAAAAB6E/t0s7PTm16sQb_Lb1d2SbLscsXL44Dd9uwCLcBGAs/s640/fl.png[/img]

Read More...

Post Link : How To Wait For Page To Load/Ready In Selenium WebDriver

In this tutorial, we are going to explain how to wait for page to load/ready in selenium webdriver. Generally selenium WebDriver handles web page loading or wait for page to load by It self. But sometime web pages are taking more time to load page, due to that driver script unable to find specified element in web page and that results in issue. So in that case selenium webdriver will throws exception message in console and stop the script execution. Here in this example we are using javascript executor to overcome page load issue and javascript executor also provides predefined function, that helps to check page load status.

How To Wait For Page To Load/Ready In Selenium WebDriver
[img]https://4.bp..com/-FNbh5HjKNhs/W6YClJQzPeI/AAAAAAAAB5g/V5ixlkCN4HUBJOu2xgDLs2eyE2CAhRLHQCLcBGAs/s400/sel.png[/img]

Read More...

Post Link : How to Encode and Decode URL Using PHP

This post explains how to encode and decode URL using php. PHP supports encoding and decoding of URL by providing some built-in functions. Encoding is required before sending URL data to query string or to a function which might dynamically work on this URL data. And then, this data will be decoded into its original form, after receiving it in target PHP page or function.

[img]https://2.bp..com/-YNCOGak1cOU/W5zsOzB1QZI/AAAAAAAAB40/VzFbSfsmeJ4zcOCtOWUbDFetKG_znT-9ACLcBGAs/s400/ss.png[/img]

Post Link : Embed YouTube Video in React Native Android Using WebView Component

In this tutorial we are going to explain how to integrate or embed Youtube videos in react native application with the help of Webview component. Youtube API has provide free facility to integrate videos in desktop and mobile based application with the help of simple embed link. Now question is how user can generate embed link for any specific Youtube video link.

[img]https://2.bp..com/-LcoVtAwsgzM/W5UTmdqcUSI/AAAAAAAAB4U/msIatFzROWoTZYQa_5NIayfYBCAUTCeIACLcBGAs/s400/we.png[/img]

Post Link : Simple Form Validation In Reactjs Example

This tutorial explains how to validate simple user registration form in reactjs. Form validation is most important part in web development, through which we can restrict invalid entries and validate user details in some extent by using valid sets of checkpoints or validation rules.
Here we are using simple user registration form and performing Client Side Validation using RegisterForm Component. Let see the React user registration form below :

[img]https://2.bp..com/-y_2762nutx4/WxzvrgXfEYI/AAAAAAAABjc/XEcspuqeLK4T893Cn2cpAXmcBrdie682ACLcBGAs/s400/1.png[/img]


Read More...

Post Link : React Native Simple ListView Component Android Example

Today we will see how to use ListView in react native android application and apply set onPress event on ListView to get value from selected list item. ListView is a core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.

[img]https://2.bp..com/-g4jEwHkfAag/W4gx5c4f4EI/AAAAAAAAB2o/woBmE9VIkwcEW_s4KSvlTIt0gVe6-SqxwCLcBGAs/s400/ss.jpg[/img]

Read More...

[url="https://www.skptricks.com/2018/08/react-native-set-textinput-type-style-password.html"]React Native Set TextInput Type Style Password Example[/url]

This tutorial explains how do you style a TextInput component in react native for password input. In react native application when you are entering any text or value in TextInput layout component, then by default entered text is visible to user. But sometime we need to encrypt the value present in TextInput layout component, so that details are not exposed to any other people/users.

[img]https://2.bp..com/-GapJmltlX8Y/W4PYzl6jBeI/AAAAAAAAB14/FusEq5n2zcw9UU6tA2Wg0UznegjmjGlegCLcBGAs/s400/pass.jpg[/img]

Just take an example of password field in basic HTML Form, where the password field value is encrypted to asterisk symbol. Similarly In this tutorial we are going to encrypt or hide the password value in TextInput layout component in react native application.

To create secure password field, you need to use secureTextEntry props inside the TextInput component. (i.e : secureTextEntry={true})


https://www.youtube.com/watch?v=v-TuW-AldlE

Post Link : https://www.skptricks.com/2018/08/method-chaining-in-java.html


The term method chaining refers to both a design and a convention. Each method returns an object, allowing the calls to be chained together in a single statement. Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained together even though line breaks are often added between methods.

It applies to classes and methods where:
multiple methods are potentially going to be called on the same object;
the methods in question need no return value.
The idea of method chaining is that if the methods need no "useful" return value, then the method can return this

Setting Border Color of TextInput Component In React Native

This tutorial explains how to change border color of TextInput Component in react native application. In this demo we have added few style-sheet design property to TextInput layout component, that helps to change border color of text input field.
Here we have specified borderWidth, borderColor property of CSS Stylesheet in TextInput Component.

<img src="https://4.bp..com/-VLMhXopVvfs/W3AfDAA0O-I/AAAAAAAABx8/0rwJummWWxYF529vNXFSDMe_kNhPTAz4QCLcBGAs/s1600/bc.jpg" />


https://www.youtube.com/watch?v=uSNwv-ZUPDc

Display Image From Android Asset Folder In React Native

Post Link : https://www.skptricks.com/2018/07/display-image-from-android-asset-folder-in-react-native.html

This tutorial explains how to get image from the android asset folder and display the image in react native application. This example covers, fetching and displaying an image from network location using Image Component of react native.
React native provides a unified media management system so developers can easily manage all the image files by placing them together into a single folder. So here is the complete step by step tutorial to display Image from Android Asset Folder in react native application.

<a href="https://www.skptricks.com/2018/07/display-image-from-android-asset-folder-in-react-native.html" > Display Image From Android Asset Folder In React Native </a>

Post Link : Working With TextInput Component In React Native

This tutorial explains how to use TextInput Component in react native application. This Component helps to inputting text into the application text area field via a keyboard and also in this example we are going to display the entered text value of TextInput Component in the Text component with the help of States and Props.
Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

[img]https://2.bp..com/-ACfY4P_1X0g/W1SsljvKUuI/AAAAAAAABuk/tiyekV5MMocNKAXIg8ESjVbuiCZcKrlyQCLcBGAs/s400/useri.jpg[/img]



https://www.youtube.com/watch?v=ZcERK3d_e54

Set Button OnPress Event In React Native

In this tutorial, We are going to explain how to set button onPress Event in react native application. A basic button component that should render nicely on any platform. Supports a minimal level of customization. In this demo we are applied onPress Event on button and calling buttonClickListener() function, when user clicks on button.

Set Button onPress Event In React Native


React Native Button onPress
Lets see the below source code that helps, you to bind an event on button, when user clicks on it.


https://www.youtube.com/watch?v=3UHVDtm1FiY

Post Link : Ajax Search Box in PHP, MySQL and JQuery.



https://www.youtube.com/watch?v=WRi_7Djl9zU

1. https://www.skptricks.com/2018/07/show-image-from-http-url-in-react-native.html
2. https://www.skptricks.com/2018/06/unable-to-load-script-from-assets.html
3. https://www.skptricks.com/2018/06/how-to-create-your-first-react-native-application.html
4. https://www.skptricks.com/2018/06/introduction-to-react-native.html
5. https://www.skptricks.com/2018/06/installing-react-native-on-windows.html

Show Image From HTTP URL In React Native

In this tutorial we will explain how to display image in react native application using HTTP URL. This example covers, fetching and displaying an image from network location using Image Component of react native.

Point To Remember while loading image in Image Component.
Note that for network and data images, you will need to manually specify the dimensions of your image!
Show Image From HTTP URL in React Native

App.js
This Component helps to display image from HTTP URL. Follow the below steps, that helps to configure Image Component in App Component.

1. Add Image Component in import block.
import {
Platform,
StyleSheet,
Text,
View,
Image
} from 'react-native';

2. Add Image tag in render’s return block.
Source attribute in Image tag, where we are specifying the image location.
Also we have added inline style to Image tag, that helps to set the image size as per the device width.
<Image
style={{width: '100%', height: 200,resizeMode : 'stretch' }}
source={{uri: 'https://4.bp..com/-krdeTqQLML8/Wyf2oV7eedI/AAAAAAAABpI/OZ759swV7L8wWtt2pwBXIgp6aPz33r01gCLcBGAs/s400/fist%2Bapp.jpg'}}
/>


https://www.youtube.com/watch?v=qArk3mRoO7c

[url="https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html"]Append Or Prepend HTML Using ReactJS[/url]


Today, In this tutorial we will see how to Append and Prepend element in react like Jquery. In react we are performing append and prepend operation by maintaining simple Array.
push() - append content in array.
unshift() - prepend content in array.
react Append or prepend to an element

Append element in react by using below function :
Appending content in array by using push function and with the help of state we are render the content in browser.
appendData() {
this.displayData.push(<div id="display-data"><pre>{this.state.postVal}</pre></div>;
this.setState({
showdata : this.displayData,
postVal : ""
});
}

Prepend element in react by using below function :
Prepending content in array by using unshift function and with the help of state we are render the content in browser.
prependData() {
this.displayData.unshift(<div id="display-data"><pre>{this.state.postVal}</pre></div>;
this.setState({
showdata : this.displayData,
postVal : ""
});
}

ReactJs Append and Prepend Element Example
Lets see the below source code, which help you to build more understanding to create append and prepend example using reactjs.

read more : https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html


https://www.youtube.com/watch?v=bHtZCeWOcr4

Installing React Native On Windows Tutorial

https://www.skptricks.com/2018/06/installing-react-native-on-windows.html

Today, we will see how to install react native for android application development on windows.Lets get started with React Native Development on Windows XP, Vista, 7, 8.1, 10 for android application development beginners step by step guide.

What is React Native?
React Native is a JavaScript framework for rendering mobile application in iOS and Android. React is a Facebook’s JavaScript library for building user interfaces which targets mobile platforms. So now developers can make mobile applications using this JavaScript library which can be shared between platforms that makes it easy to develop in both iOS and Android.

install react native on windows, install react native cli, install react native app on android, install react native without android studio, install react native command line interface


As we know, the number of smartphone users is increasing day by day. The number is increasing just because these devices fulfill the requirements easily like entertainment, shopping, security and much more. This increasing scenario inspires the developers to build more mobile applications related to mobile payment systems, social networking, etc. Mobile application development is recently a very big market and everyone is using their own Android or iOS mobile phones. But for companies who are developing Android and iOS apps together gets very high cost for their customers, because they have to develop individual applications for each platform and that makes their application cost high.

So Cross-Platform application development technology overcome this problem. React native provides Cross-platform app development technology provides the multi-platform app development by that develop the app that can run on multiple platforms with the same content and functionality. Moreover, developers should require to have vast knowledge of coding. Ultimately, this technology saves a lot more time as well as money, the main reason why it is more popular among the app developers.

Read more

Simple Form Validation In Reactjs Example

This tutorial explains how to validate simple user registration form in reactjs. Form validation is most important part in web development, through which we can restrict invalid entries and validate user details in some extent by using valid sets of checkpoints or validation rules.
Here we are using simple user registration form and performing Client Side Validation using RegisterForm Component. Let see the React user registration form below :
how to validate form in reactjs, form validation using react js, login form validation in react js
So, Here when user click on register button without entering any fields details, then it will show below error messages.(Refer the below screenshot)
how to validate form in reactjs, form validation using react js, login form validation in react js
Apart from above Form Error Message Validation, we have covered some other checkpoints or validation rules, Lets see the some more validation one by one.

Name Field : This field accept only valid user name, which include user First, Middle and Last name.
Email Field : This field accept only valid Email address of user.
Mobile Field : This field accept valid 10 digit mobile number of user.
Password Field : This field accept only accept user password details. This validation makes the user password very strong and which complies below format :
Must be at least 8 characters
At least 1 special character from @#$%&
At least 1 number, 1 lowercase, 1 uppercase letter

ReactJs Form Validation
Lets see the below source code, which help you to build more understanding to create user registration form.

Project Structure :
Lets see the project structure for user registration form :
how to validate form in reactjs, form validation using react js, login form validation in react js


RegisterForm.js
This is a RegisterForm Component, it helps to render user registration form and validate the user details by using simple java script validation. Lets see the complete source code.

Here we are storing the user fields details and error message in state.
1. fields: {} : Storing user details (i.e : Name, Mobile, Email and Password) from the user registration form.
2. errors: {} : Storing the error messages for different user fields and it helps to display error messages for different user fields by using state.

Lets discuss about the functions :
1. handleChange(e) : This function helps to store user details in state (i.e : fields: {} ).
2. validateForm() : This is a core part of form validation. It helps to validate the user details for various fields present in user registration form and display the error message for corresponding fields if any.
3. submituserRegistrationForm(e) : This function validate the user details by calling validateForm() function and clear the user form details when user form details is valid.


https://www.skptricks.com/2018/06/simple-form-validation-in-reactjs-example.html