WIP, added injectable ui prop to render extra settings component in demo settings screen

Author: mendyEdri

demo/src/screens/MainScreen.js

@@ -37,10 +37,12 @@ class MainScreen extends Component {
     super(props);
 
     const data = props.navigationData || navigationData;
-
+    const extraSettingsUI = props.extraSettingsUI;
+    
     this.state = {
       currentPage: 0,
-      filteredNavigationData: data
+      filteredNavigationData: data,
+      extraSettingsUI
     };
 
     this.filterExplorerScreens = _.throttle(this.filterExplorerScreens, 300);
@@ -64,7 +66,7 @@ class MainScreen extends Component {
     if (buttonId === 'uilib.settingsButton') {
       this.pushScreen({
         name: 'unicorn.Settings',
-        passProps: {navigationData: data, playground: this.props.playground}
+        passProps: {navigationData: data, playground: this.props.playground, extraSettingsUI: this.state.extraSettingsUI}
       });
     }
   };

demo/src/screens/SettingsScreen.js

@@ -5,19 +5,21 @@ import {StyleSheet, I18nManager} from 'react-native';
 import {Colors, View, Text, Picker, Toast, Switch} from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 
-
 const none = {label: '[None]', value: ''};
 const playgroundScreen = {label: 'Playground', value: 'unicorn.PlaygroundScreen'};
 
 class SettingsScreen extends Component {
+
   constructor(props) {
     super(props);
 
     const data = props.navigationData || navigationData;
     const playground = props.playground || playgroundScreen;
-    
+    const extraSettingsUI = props.extraSettingsUI;
+
     this.state = {
       showRefreshMessage: false,
+      extraSettingsUI,
       screens: [
         none,
         playground,
@@ -60,17 +62,25 @@ class SettingsScreen extends Component {
     }, 1000);
   };
 
+  renderTitle(title, subtitle) {
+    return (
+      <View marginT-20>
+        <Text text60>{title}</Text>
+        <Text text70>
+          {subtitle}
+        </Text>
+      </View>
+    );
+  }
+
   render() {
-    const {defaultScreen, showRefreshMessage, isRTL, screens} = this.state;
+    const {defaultScreen, showRefreshMessage, isRTL, screens, extraSettingsUI} = this.state;
     const filteredScreens = _.filter(screens, screen => !_.isUndefined(screen.value));
 
     return (
       <View flex padding-25 bg-grey80>
         <View flex>
-          <Text text60>Default Screen</Text>
-          <Text text70 marginB-20>
-            Set default screen to open on app startup
-          </Text>
+          {this.renderTitle('Default Screen', 'Set default screen to open on app startup')}
           <Picker
             testID={'uilib.defaultScreenPicker'}
             placeholder="Pick default screen..."
@@ -83,6 +93,8 @@ class SettingsScreen extends Component {
             ))}
           </Picker>
 
+          {extraSettingsUI?.()}
+
           <View style={{borderWidth: 1, borderColor: Colors.dark70, marginTop: 40}}>
             <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
               <Text text80 dark20>Current layout direction</Text>