Merge branch 'master' into feat/calendar-eva

akveo · Sep 27, 2019 · 112324b · 112324b
2 parents 6365218 + aa11e1c
commit 112324b
Show file tree

Hide file tree

Showing 47 changed files with 2,427 additions and 1,948 deletions.
diff --git a/docs/src/articles/guides/create-screen.md b/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>
 );

diff --git a/docs/src/articles/guides/install-existing.md b/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>
 );
 

diff --git a/docs/src/articles/guides/setup-icons-module.md b/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) => (

diff --git a/docs/src/articles/guides/setup-vector-icons.md b/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) => (

diff --git a/docs/src/structure.ts b/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',