React Native Notes
20200513
Flatlist It has a renderItem function reponsible of render reach item of the list from an array (by prop). Comparing with web React approach (iterate rendering each item inside the loop), Flatlist has a lot of internal optimizations.
renderItem function receives a element as parameter. element.item has each item of the data and element.index is just that, the index of the element inside the data prop.
Each element should have a key that must be a string, consistent between renders and unique. keyExtractor is a prop of the FlatList that is a function that receives each element of the data array, build and return the expected key.
Button & TouchableOpacity Button is simple, but is limited... it has a default styling. On the other side there is the TouchableOpacity that is very customizable.
Stack Navigator It decides what to show in scren at any time. It pass a navigation object inside the prop to components. If you call navigation.navigate with a string of the router object (defined at initialization), you will load a new component.
20200512
StyleSheet.create is useful instead of styling inline style={{ ... }} because if you make a mistake with the first, it shows an big red error instead of just a yellow warning (as with the inline style).
Getting started
Expo is used to start easy with RN. With it you don't need XCode or Android Studio.
Also we can use Ignite.
Testing
- Runs only test files related to changed files
- Supports Snapshot Testing
Detox for end-to-end testing
Push notifications
- Expo
- One Signal
- Firebase Cloud Messaging
- AWS Amplify
