• Home
  • Archive by category "React Native"

React Native StackNavigator example

Simple React Native StackNavigator Tutorial – navigating between screens

Mobile applications often use more than one screen to properly present data. How can we create more than one screen? That’s what StackNavigator is for.

To use navigation between screens, you must install a library called react-navigation in your project folder. You can do it by entering the following commands:

Read More React Native StackNavigator example

React Native persist data. Saving and reading data from AsyncStorage


In previous post: React Native editable list I showed, how to edit data of single element on list. The edited data was saved to the component state, which allowed it to be displayed on the screen. However, when you close the application, the data resets and are not saved. How to change that? AsyncStorage will help.

Read More React Native persist data. Saving and reading data from AsyncStorage

How to pass data from child component to parent component in React Native?


How to update parent state from child component in React Native ?

Passing data from child component to parent component is easy. When we place child component in parent’s content we must use function (sets in parent component and invoked in child component), which sets data in the parent’s component state, when action is made in child’s component, e.g. by clicking the button. The diagram is as follows:

Read More How to pass data from child component to parent component in React Native?

ScrollView performance improved – react native scrollview infinite scroll


Jak wiemy z dokumentacji React Native, ScrollView renderuje wszystkie swoje dzieci na raz, co przy du┼╝ej ich ilo┼Ťci mo┼╝e powodowa─ç problemy z wydajno┼Ťci─ů. Istnieje jednak spos├│b, by roz┼éo┼╝y─ç renderowanie du┼╝ej ilo┼Ťci danych w czasie tak, aby u┼╝ytkownik nie odczu┼é tych problem├│w. Mo┼╝emy wy┼Ťwietli─ç przyk┼éadowo 20 element├│w przy pierwszym wczytaniu danych i dodawa─ç kolejno nowe elementy w miar─Ö przewijania listy. Tak stworzymy “nieko┼äcz─ůce si─Ö” przewijanie, tzw. “infnite scroll”.

As we know from React Native documentation, ScrollView renders all of its children at once, which can cause performance problems with a large number of them. However, there is a way to spread in time rendering of large number of data, so that the user does not feel these problems. For example, we can display 20 items at the first time when load data and add new items one by one while scrolling the list. That’s how we’ll create “endless” scrolling, so-called “infnite scroll”.

Read More ScrollView performance improved – react native scrollview infinite scroll