● In web, browsers will automatically become scrollable for content with heights taller than the window
● In mobile, we need to do that manually. We can do that using the following Components from React Native
○ ScrollView
○ ListView (deprecated)
○ FlatList, SectionList
● The most basic scrolling view
● I renders all of its children before appearing
● To render an array of data, we can use .map()
○ Components in an array need a unique key prop
REF 👉🏿 https://facebook.github.io/react-native/docs/scrollview.html
● A performant scrolling view for rendering data
● “Virtualized:” only renders what’s needed at a time
○ Only the visible rows are rendered in first cycle
○ Rows are recycled, and rows that leave visibility may be unmounted
● Pass an array of data and a renderItem function as props
● Only updates if props are changed
○ Immutability is important
REF 👉🏿 https://facebook.github.io/react-native/docs/flatlist.html
● Like FlatList with additional support for sections
● Instead of data prop, define sections
○ Each section has its own data array
○ Each section can override the renderItem function with their own custom renderer
● Pass a renderSectionHeader function for section headers
REF 👉🏿 https://facebook.github.io/react-native/docs/sectionlist.html
● Controlled vs uncontrolled components
○ Where is the source of truth for the value of an input?
● React recommends always using controlled components
● Pass value and onChangeText props
REF 👉🏿 https://facebook.github.io/react-native/docs/textinput.html
This simple phone book App has been hosted in my Expo snacks
⚙️ Project page: https://snack.expo.dev/@qbentil/lecture-5---contacts