Add inverted prop in SectionListExample

Summary:
This PR adds an option to pass`inverted` prop to SectionListExample in RNTester. FlatListExample already has this option but it's not available in SectionListExample.

Run RNTester app on device or simulator and select SectionListExample. Depending on switching `inverted` option, you can see either inverted list or not.

[GENERAL][ENHANCEMENT][RNTeater] - Add inverted prop to SectionListExample
Closes facebook#18370

Differential Revision: D7317168

Pulled By: hramos

fbshipit-source-id: c6c212c705e686281f23954775cc3465cce3c8df

RNTester/js/SectionListExample.js

@@ -76,6 +76,7 @@ class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
     filterText: '',
     logViewable: false,
     virtualized: true,
+    inverted: false,
   };
 
   _scrollPos = new Animated.Value(0);
@@ -125,6 +126,7 @@ class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
             {renderSmallSwitchOption(this, 'virtualized')}
             {renderSmallSwitchOption(this, 'logViewable')}
             {renderSmallSwitchOption(this, 'debug')}
+            {renderSmallSwitchOption(this, 'inverted')}
             <Spindicator value={this._scrollPos} />
           </View>
           <View style={styles.scrollToRow}>
@@ -146,6 +148,7 @@ class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
             <CustomSeparatorComponent {...info} text="ITEM SEPARATOR" />
           }
           debug={this.state.debug}
+          inverted={this.state.inverted}
           enableVirtualization={this.state.virtualized}
           onRefresh={() => Alert.alert('onRefresh: nothing to refresh :P')}
           onScroll={this._scrollSinkY}
@@ -232,6 +235,8 @@ const styles = StyleSheet.create({
   },
   optionSection: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
   },
   searchRow: {
     paddingHorizontal: 10,