docs(components): refactor examples with js code and framework icon components

Author: artyorsh

docs/src/articles/guides/create-screen.md

@@ -15,7 +15,7 @@ We suppose that you have a separate component per screen, let's open your `some-
 ## Create a Component
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { Layout, Text, Button } from 'react-native-ui-kitten';
 
 export const HomeScreen = () => (
@@ -35,7 +35,7 @@ The example above will render a simple screen with a welcome text and a button.
 Now let's add some styles to fit the full available space on the device screen.
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Button, Layout, Text } from 'react-native-ui-kitten';
 
@@ -47,13 +47,8 @@ export const HomeScreen = () => (
 );
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  text: {
-    marginVertical: 16,
-  },
+  container: { flex: 1, alignItems: 'center' },
+  text: { marginVertical: 16 },
 });
 
 ```
@@ -65,15 +60,13 @@ const styles = StyleSheet.create({
 Let's now set this screen as `ApplicationProvider` children to quickly review changes
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { mapping, light as lightTheme } from '@eva-design/eva';
 import { ApplicationProvider } from 'react-native-ui-kitten';
 import { HomeScreen } from './path-to/some-screen.component' // <-- Import a screen we've created
 
 const App = () => (
-  <ApplicationProvider
-    mapping={mapping}
-    theme={lightTheme}>
+  <ApplicationProvider mapping={mapping} theme={lightTheme}>
     <HomeScreen/>
   </ApplicationProvider>
 );

docs/src/articles/guides/install-existing.md

@@ -20,14 +20,17 @@ In your **App.js**:
 ```js
 import React from 'react';
 import { mapping, light as lightTheme } from '@eva-design/eva';
-import { ApplicationProvider } from 'react-native-ui-kitten';
-import { RootComponent } from '../path-to/root.component'; // <-- Import your application entry point
+import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten';
+
+const ApplicationContent = () => (
+  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    <Text>Welcome to UI Kitten</Text>
+  </Layout>
+); 
 
 const App = () => (
-  <ApplicationProvider
-    mapping={mapping}
-    theme={lightTheme}>
-    <RootComponent />
+  <ApplicationProvider mapping={mapping} theme={lightTheme}>
+    <ApplicationContent />
   </ApplicationProvider>
 );
 

docs/src/articles/guides/setup-icons-module.md

@@ -26,18 +26,24 @@ npm i @ui-kitten/eva-icons
 ## Configure Icon Registry
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { mapping, light as lightTheme } from '@eva-design/eva';
 import { EvaIconsPack } from '@ui-kitten/eva-icons';
-import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten';
+import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten';
+
+const ApplicationContent = () => (
+  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    <Text>Welcome to UI Kitten</Text>
+  </Layout>
+); 
 
 const App = () => (
-  <ApplicationProvider
-    mapping={mapping}
-    theme={lightTheme}>
-    <IconRegistry icons={EvaIconsPack}/>
-    <Layout style={{flex: 1}}/>
-  </ApplicationProvider>
+  <React.Fragment>
+    <IconRegistry icons={EvaIconsPack} />
+    <ApplicationProvider mapping={mapping} theme={lightTheme}>
+      <ApplicationContent />
+    </ApplicationProvider>
+  <React.Fragment />
 );
 
 export default App;
@@ -48,7 +54,7 @@ export default App;
 ## Use it with UI Kitten components
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { Button, Icon } from 'react-native-ui-kitten';
 
 export const FacebookIcon = (style) => (

docs/src/articles/guides/setup-vector-icons.md

@@ -25,7 +25,7 @@ After vector-icons is installed and you have everything in place, we need to cre
 Let's create a separate file `feather-icons.js` and place there the following code.
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather'; // <-- Import Feather icons
 
@@ -54,6 +54,8 @@ function createIconsMap() {
 And providing function
 
 ```js
+import Icon from 'react-native-vector-icons/Feather'; // <-- Import Feather icons
+
 function IconProvider(name) {
   return {
     toReactElement: (props) => FeatherIcon({ name, ...props }),
@@ -81,18 +83,24 @@ function FeatherIcon({ name, style }) {
 After everything is configured, we simply need to import a feather icon map and register it with UI Kitten APIs.
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { mapping, light as lightTheme } from '@eva-design/eva';
-import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten';
+import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten';
 import { FeatherIconsPack } from './path-to/feather-icons.js'; // <-- Feather icons map
 
+const ApplicationContent = () => (
+  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    <Text>Welcome to UI Kitten</Text>
+  </Layout>
+); 
+
 const App = () => (
-  <ApplicationProvider
-    mapping={mapping}
-    theme={lightTheme}>
-    <IconRegistry icons={[FeatherIconsPack]}/>
-    <Layout style={{flex: 1}}/>
-  </ApplicationProvider>
+  <React.Fragment>
+    <IconRegistry icons={[FeatherIconsPack]} />
+    <ApplicationProvider mapping={mapping} theme={lightTheme}>
+      <ApplicationContent />
+    </ApplicationProvider>
+  </React.Fragment>
 );
 
 export default App;
@@ -103,7 +111,7 @@ export default App;
 ## Use it with UI Kitten components
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { Button, Icon } from 'react-native-ui-kitten';
 
 export const FacebookIcon = (style) => (
@@ -128,6 +136,8 @@ As a result, you should have a Button looking similar to this:
 As you might notice, UI Kitten API allows you to register **multiple** icon packages with the following instruction.
 
 ```js
+import { IconRegistry } from 'react-native-ui-kitten';
+
 <IconRegistry icons={[FeatherIconsPack]}/>
 ```
 
@@ -175,19 +185,25 @@ function MaterialIcon({ name, style }) {
 Now all we need to do is to extend our `IconRegistry`:
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { mapping, light as lightTheme } from '@eva-design/eva';
-import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten';
+import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten';
 import { FeatherIconsPack } from './path-to/feather-icons.js'; // <-- Feather icons map
 import { MaterialIconsPack } from './path-to/material-icons.js'; // <-- Material icons map
 
+const ApplicationContent = () => (
+  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    <Text>Welcome to UI Kitten</Text>
+  </Layout>
+); 
+
 const App = () => (
-  <ApplicationProvider
-    mapping={mapping}
-    theme={lightTheme}>
+  <React.Fragment>
     <IconRegistry icons={[FeatherIconsPack, MaterialIconsPack]}/>
-    <Layout style={{flex: 1}}/>
-  </ApplicationProvider>
+    <ApplicationProvider mapping={mapping} theme={lightTheme}>
+      <ApplicationContent />
+    </ApplicationProvider>
+  </React.Fragment>
 );
 
 export default App;
@@ -200,7 +216,7 @@ export default App;
 Now you're able to choose an icon library with simply changing `pack` property.
 
 ```js
-import * as React from 'react';
+import React from 'react';
 import { Button, Icon } from 'react-native-ui-kitten';
 
 export const HomeIcon = (style) => (

docs/src/structure.ts

@@ -287,6 +287,14 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Menu',
+        icon: 'menu.svg',
+        source: [
+          'Menu',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Icon',
@@ -307,10 +315,11 @@ export const structure = [
       },
       {
         type: 'tabs',
-        name: 'Top Navigation',
+        name: 'TopNavigation',
         icon: 'top-navigation.svg',
         source: [
           'TopNavigation',
+          'TopNavigationAction',
         ],
         overview: [
           {
@@ -321,7 +330,7 @@ export const structure = [
       },
       {
         type: 'tabs',
-        name: 'Bottom Navigation',
+        name: 'BottomNavigation',
         icon: 'bottom-navigation.svg',
         source: [
           'BottomNavigation',
@@ -359,11 +368,10 @@ export const structure = [
       },
       {
         type: 'tabs',
-        name: 'Tab View',
+        name: 'TabView',
         icon: 'tab.svg',
         source: [
           'TabView',
-          'TabBar',
           'Tab',
         ],
         overview: [
@@ -373,15 +381,6 @@ export const structure = [
           },
         ],
       },
-      {
-        type: 'tabs',
-        name: 'Menu',
-        icon: 'menu.svg',
-        source: [
-          'Menu',
-          'MenuItem',
-        ],
-      },
       {
         type: 'group',
         name: 'Forms',

src/framework/theme/application/applicationProvider.component.tsx

@@ -56,24 +56,24 @@ interface State {
  * ```
  * import React from 'react';
  * import { mapping, light as lightTheme } from '@eva-design/eva';
- * import { ApplicationProvider } from 'react-native-ui-kitten';
- * import { Application } from './path-to/root.component';
+ * import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten';
  *
  * export default class App extends React.Component {
  *
- *   public render(): React.ReactNode {
+ *   render() {
  *     return (
  *       <ApplicationProvider
  *         mapping={mapping}
  *         theme={lightTheme}>
- *         <Application/>
+ *         <Layout style={{ flex: 1 }}>
+ *           <Text>Welcome to UI Kitten</Text>
+ *         </Layout>
  *       </ApplicationProvider>
  *     );
  *   }
  * }
  * ```
  */
-
 export class ApplicationProvider extends React.Component<ApplicationProviderProps, State> {
 
   private schemaProcessor: SchemaProcessor = new SchemaProcessor();

src/framework/theme/modal/modal.service.tsx

@@ -23,52 +23,38 @@ import { ModalPresentingBased } from '../../ui/support/typings';
  *
  * ```
  * import React from 'react';
- * import {
- *   View,
- *   ViewProps,
- * } from 'react-native';
- * import {
- *   Button,
- *   Text,
- *   ModalService,
- * } from 'react-native-ui-kitten';
+ * import { Layout, Button, Text, ModalService } from 'react-native-ui-kitten';
  *
- * export const ModalServiceShowcase = (): React.ReactElement<ViewProps> => {
+ * export const ModalServiceShowcase = () => {
  *
- *   const modalID: string = '';
+ *   const modalID = '';
  *
  *   const showModal = () => {
- *     const component: React.ReactElement<ViewProps> = this.renderModalContentElement();
- *
- *     this.modalID = ModalService.show(component, { allowBackdrop: true, onBackdropPress: this.hideModal });
+ *     const contentElement = this.renderModalContentElement();
+ *     this.modalID = ModalService.show(contentElement, { allowBackdrop: true, onBackdropPress: this.hideModal });
  *   };
  *
  *   const hideModal = () => {
  *     ModalService.hide(this.modalID);
  *   };
  *
- *   const renderModalContentElement = (): React.ReactElement<ViewProps> => {
+ *   const renderModalContentElement = () => {
  *     return (
- *       <View>
+ *       <Layout>
  *         <Text>Hi, I'm modal!</Text>
- *       </View>
+ *       </Layout>
  *     );
  *   };
  *
  *   return (
- *     <View>
- *       <Button onPress={this.showModal}>
- *         SHOW MODAL
- *       </Button>
- *       <Button onPress={this.hideModal}>
- *         HIDE MODAL
- *       </Button>
- *     </View>
+ *     <Layout>
+ *       <Button onPress={showModal}>SHOW MODAL</Button>
+ *       <Button onPress={hideModal}>HIDE MODAL</Button>
+ *     </Layout>
  *   );
  * }
  * ```
  */
-
 class ModalServiceType {
 
   panel: ModalPresenting | null = null;