The Style has its 2 unique radius property which is used to make only both top sides corners rounded. This type of functionality we have seen in many applications and one of the most popular social chatting platform Hike in India uses this. So in this tutorial we would going to create a react native […]
There are two basic types of sorting methods mostly used in react native to sort ListView and FlatList array data into Ascending and Descending order, Using these methods developer can sort integer item array. In Ascending order the array items will be arranged as increment order, first the smallest item will be set and then its bigger […]
ActivityIndicator in react native similar as ProgressBar in android is used to show a round Loading Indicator while loading JSON from background. ActivityIndicator can be modified in size and color, now developers can modify the style of ActivityIndicator and change its size and color. So in this tutorial we would going to create react native app to Change […]
Splash Screen is a View containing Images and Text that shows when the app starts first time, it will automatically hide after few seconds(3-5) from the screen and only shows when the application starts next time. Splash screen is mostly used to show a message from app developer and also shows the progress bar while […]
Sticky header is a type of fixed view shows just above the FlatList in react native. Sticky header will visible all the time even when user is scrolling the FlatList, It is mostly used to show a Title or heading regarding to FlatList data. So in this tutorial we would going to Show Add Fixed Sticky Header on […]
The ListView component in React Native has 2 different functions known as scrollToEnd({}) and scrollTo({}Index_Position), The scrollToEnd({}) function will automatically scroll down at the bottom of ListView at the last index value and scrollTo({}Index_Position) function will give us the functionality to scroll to any given specific ListView item index value. We are using the scrollTo({}Index_Position) function to scroll at the top […]
GridView is used to display items or data into 2-Dimensional grid style view, GridView will automatically arrange data into Grid format. In react native we can create GridView using FlatList using numColumns={} prop. This prop would convert the normal FlatList into GridView. So in this tutorial we would going to create JSON Parsing GridView in iOS Android application […]
Rating Bar component is used to give rating or review to a user specific product in star formats. We have seen Star Rating Bar on many applications and even the Google Play Stores uses the Rating bar technique to accept opinions from users in star from. There are 5 Stars presents in Rating bar and […]
There are by default two types of variables in react native, Local Variable and Global Variable. Local variables is used within defined scope and Global variables can be use at any place within any activity and can be changeable from any where. You can read about Local Variables from Here. React Native did support Global Scope […]
QR Code also known as Quick Response Code is a trademark for two-dimensional barcode. QR Code is machine(Camera) readable block enabled code for encoding numeric value and alphabetic value. The QR Code stores information within a block of images and can store multiple type of information, They are very quick responsible and can be readable […]
In our previous tutorial we have learn about running react native apps on real device using Data Cable, This tutorial is the next part of that tutorial. In this tutorial we would going to Run Test React Native apps in Real Android device using WiFi Network Connection in Windows without any use of data cable. The […]
The JavaScript’s sort() function is used to sort the String array into alphabetically order. Sorting is a very important procedure for dynamic and static android iOS applications because using the sorting technique we can arrange the dis-arranged array data into systematic order. So in this tutorial we would going to Sort String Array into Alphabetical Order in […]
IF-Else is a type of conditional statement which executes a part of code based on condition. The condition can be anything with different type of operators. So in this tutorial we would going to create a react native application with IF-Else & Nested IF-Else conditional statement for both android and iOS applications. So let’s get started […]
Padding is used to set space around text component’s content inside defined border or block. By default we can set padding using Style’s padding property, but in this tutorial we would going to set Padding dynamically on text component on button click in both Android and iOS devices in react native application. Contents in this project set […]
The justifyContent in a component’s styles determines the alignment of Children View along with Primary Axis(Default Flex-direction). If your primary axis is flex-direction is column then the justifyContent will set all the children in Vertical format. You can learn more about Flex-direction from my this tutorial. So in this tutorial we would going to make a react native […]
The Collapsible Animated Text View is one of the most famous View among react native developers because of its smooth animation effect. The Collapsible View is a View holder used to show Text, Image or any component inside it. When app developer(User) clicks on Expandable button then it will smoothly shows below View with slide down animation […]
The alignItems is used with component’s style to determine the Alignment of children along with Secondary axis. If we use flexDirection: ‘row’ in our Root view then the primary AXIS is row and it will automatically converts the children to secondary axis Column and if we use flexDirection: ‘column’ then it will change the all sub-views to Row […]
flexDirection style is used to set Primary Axis of layout. It would automatically determines and set all the children of Root view(On which you have applied the flexDirection) in Horizontally(Row Format) and Vertically(Column Format). The default value of flexDirection is column. If we do not apply the flexDirection on our view then it will automatically sets the children into […]
The Date() function has many sub-functions which is used to retrieve current timing Hours, minutes and seconds. Getting existing time in react native android iOS app from real device is very useful for server applications, where developer needs to obtain system time on login applications or chatting applications so it can show the time of sent […]
Passing data from one activity to another is very important in react native. The React Navigation library gives us a method named as this.props.navigation.navigate(Your_Activity_Name, Value_You_Want_To_Send). So in this tutorial we would going to Show JSON ListView click item value on another Activity Screen in iOS Android react native application. We would retrieve the JSON ListView FlatList […]
The Container View is the main view which would hold all the components in react native application. This View has Flex :1 which would automatically allows it to cover the complete device screen area. It is like the entire body of application like we did see in HTML body tag. We can set its background […]
The Image component has its own inbuilt method known as Image.getSize(). This method is used to find Online remote server image dimensions in pixels. This function is mostly used in Image Wallpaper downloading applications where the app developer shows image real size inside the application and user knows the actual image size. So in this tutorial […]
React Native supports multiple type of Border style formats and one of them is set border to one side of a Root View or Child View. So in this tutorial we would going to show Add Border to only Bottom side of View in iOS Android react native application example tutorial using borderBottomWidth and borderBottomColor style attributes. […]
The Linking library is used in react native for deep linking process. Using the Linking library we can open or navigate to any website URL from our Android-iOS app to device default web browser. So in this tutorial we would going to open website URL in default browser on button click in iOS Android application Example […]
