React Native applications often use two or more navigators at once. At first, I had a problem with the combination of stack navigator and drawer navigator, fortunately I combined them in way, that they work properly and now I can share this knowledge.Read More Nested StackNavigator inside DrawerNavigator – React Native
Category: React Native
Base of knowledge about React Native
How to open drawer navigator from header of stack navigator?
Passing drawer navigator to the stack navigator header is pretty easy, though it might seem difficult. It is seen by the number of questions asked on programming portals. Therefore, I will present here a shortened version of the code that will show how to achieve this effect.Read More How to open drawer navigator from header of stack navigator?
React Native DrawerNavigator example
If you have problem with understanding how Drawer navigation works, this short tutorial will help you implement DrawerNavigator into your applicationRead More React Native DrawerNavigator example
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?
React Native modal example
The Modal component has many applications. Often it is used as a “window” in which you can perform additional actions, which results can be viewed on the screen. Modal can be used e.g. as a login window, information window or window with options to choose from.Read More React Native modal example
React Native editable list – How to edit item data in a List
To edit the list, we need … a list 🙂 If you want to learn how to create a task list, see this post: Renering list in React NativeRead More React Native editable list – How to edit item data in a List
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
React Native – Rendering Lists with ScrollView and FlatList
Ok, we want to display a list of items in React Native. We can do it in several ways, but here – two will be presented – ScrollView and FlatList.Read More React Native – Rendering Lists with ScrollView and FlatList