Scrolling in RN - peophins-plasmas/pawsome-app GitHub Wiki

Make sure all elements are wrapped in a ScrollView OR FlatList OR SectionList (don't mix and match--they use the same logic and therefore bug out when mixed together). You CAN nest a ScrollView within a SafeAreaView.

Try to keep sections as close to the top level as possible--nest Views in each other only as needed. Sections of views should be nested together with each view at equivalent level. This ensures the sections are at the same flex level, and within each section, the parts are at the same flex level, for spacing. Changing levels will create weird spacing bugs.

Make sure each View has a style, or it will not render properly. Default to style={styles.container} if there's no definite style. If there is a style, make sure it has flex 1 (or greater) or it may default to flex 0 and not display. Do not manually set height for containers or views, except when you very, very specifically want a certain height, as this will mess with spacing otherwise. Better to use padding/margin and accept the default spacing.

One note is that buttons or other selectable text close to the bottom of the screen may not work properly, and components at the bottom of the page may be hidden behind bottom navigation or other components, or just under the bottom edge of the screen. To create proper scrolling and/or allow proper functioning of bottom components, add an empty View with style={height: 100} before the closing scrollview tag. Height may be increased as needed for bottom components or other interfering features.