Found 29 Articles for React Native

The increase in the popularity of IOs and Android apps nowadays there are lots of companies building apps and want them to develop in a faster way. A fully native app is getting very expensive as it requires separate teams to work on iOS and Android. ReactNative is a good solution to this as the app developed in react native can be run on ios and android.React Native is an open source mobile development framework that app developers prefer, to build an app that is cost effective and also saves time.React Native was a Facebook's hackathon project that was meant ... Read More

An interface that helps to render the lists in sections. Some of the important features of SectionList are −Header/Footer support to the ListHeader/Footer support to the sectionScroll LoadingPull to refreshFully cross-platformThe basic SectionList component looks as follows −To work with SectionList import the component as shown below −import { SectionList } from "react-native";Here is a list of important properties available on a SectionList −PropsDescriptionrenderItemIs the default function that renders the item in the section. It returns a react element.The render function will be passed to sectionlist like an object with following keys −'item'(object) - the item object'index' (number) - Index ... Read More

FlatList is a container that can be used to load the list items. It offers header and footer support, multiple column support, comes with vertical/horizontal scrolling, lazy loading etc.Here are some important features of FlatList −Comes with scroll loadingAble to adjust the scroll by using ScrolltoIndex supportComes with header and footer supportMultiple column supportCross platformConfigurable viewability callbacksThe Basic structure of FlatList is as follows − item.id} />FlatList is implemented from the VirtualizedList component that takes care of displaying a limited number of items that will fit in the current view port of your mobile screen. The rest of the data ... Read More

The ScrollView is a scrolling container that can accommodate multiple components and views. It is one of the core components in reactnative and using it you can scroll both vertically and horizontally.ScrollView will map to its native equivalent based on the platform it is running. So on android the view will map to , on iOS it will be and on the web environment.Example 1: Scrolling vertical using ScrollViewIn this example the ScrollView has a View along with a Text component and it is wrapped inside a View.To work with ScrollView import the component first −import { Text, ... Read More

Styling your app can be done as follows −Using Stylesheet componentUsing Inline stylesUsing Stylesheet componentReact native Stylesheet component comes very handy and neat when you want to apply styling to your app. To work with Stylesheet component first import it as shown below −import { StyleSheet } from 'react-native';You can create the style using Stylesheet component as follows −const styles = StyleSheet.create({    container: {       flex: 1,       marginTop: StatusBar.currentHeight || 0,    },    item: {       margin: 10,       padding: 20,       marginVertical: 8,       ... Read More

Props are properties that help to modify the react component. The component created can be used with different parameters using props concept. With props you can pass the information from one component to another and at the same time re-use the component as per your requirement.You will be familiar with props if you are well versed with ReactJS, the same concepts follow in React Native.Let us take a look at an example that explains what props are.Example 1: Props inside React Native Built-in ComponentsConsider the Image component −The style and source are properties i.e props for the image component. The ... Read More

State is the place where the data comes from. We should always try to make our state as simple as possible and minimize the number of stateful components. If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them.Example 1Button title changing to ON/OFF when the user presses the button.The state is initialized inside the constructor as shown below −constructor(props) {    super(props);    this.state = { isToggle: true }; }The isToggle is the boolean value given to the state. The title of ... Read More

The most important core components in react native are as follows −React Native componentAndroid Native ViewIOS Native ViewWeb BrowserDescriptionView - When the app is seen in Android device the component will be changed to when the app is seen in IOS device the component will be changed to When seen in a web browser the component will be changed to tagIt is the core container that supports flexbox layout. It also manages touch handling.Text - When the app is seen in Android device the component will be changed to when the app is seen in ... Read More

React Native is an open source JavaScript Mobile framework from Facebook specially designed to build native mobile apps for iOS and Android. React Native is based on ReactJS JavaScript library that helps to build the user interface for mobile platforms.React Native can be directly used inside an existing IOS or android app or you can build a native app right from scratch. At present React Native is used with some popular apps like Facebook mobile app, Instagram, Pinterest, Skype, etc.Some important features of React Native that makes it a very popular mobile development app today are −Cross Platform Support − ... Read More