From 683f3b574c21ad2a3b53d99dbc2be9cabfe1c1b1 Mon Sep 17 00:00:00 2001
From: meenu <makkarmini007@gmail.com>
Date: Sat, 18 Sep 2021 16:47:54 +0530
Subject: [PATCH] usetoken, tab view, formik example changes

---
 docs/buildingTabView.md      | 81 ++++++++++++++++---------------
 docs/nativebase-formik-ui.md | 93 +++++++++++++++++++++---------------
 docs/useToken.md             | 19 +++++---
 3 files changed, 110 insertions(+), 83 deletions(-)

diff --git a/docs/buildingTabView.md b/docs/buildingTabView.md
index e8b473e59..9835a1ea8 100644
--- a/docs/buildingTabView.md
+++ b/docs/buildingTabView.md
@@ -12,22 +12,26 @@ Here is an example to show how easily and quickly we can use [react-native-tab-v
 ```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12
 
 import * as React from 'react';
-import { View, StyleSheet, Dimensions, StatusBar,TouchableOpacity,Animated, Pressable} from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  StatusBar,
+  TouchableOpacity,
+  Animated,
+  Pressable,
+} from 'react-native';
 import { TabView, SceneMap } from 'react-native-tab-view';
-import {NativeBaseProvider,Box, Text} from 'native-base';
+import { NativeBaseProvider, Box, Text, Center } from 'native-base';
 import Constants from 'expo-constants';
 
-const FirstRoute = () => (
-  <Box flex="1" bg="pink.400" />
-);
+const FirstRoute = () => <Center flex="1">This is Tab 1</Center>;
 
-const SecondRoute = () => (
-  <Box flex="1" bg="violet.400"  />
-);
+const SecondRoute = () => <Center flex="1">This is Tab 2</Center>;
 
-const ThirdRoute = () => (
-  <Box flex="1" bg="red.400"  />
-);
+const ThirdRoute = () => <Center flex="1">This is Tab 3</Center>;
+
+const FourthRoute = () => <Center flex="1">This is Tab 4 </Center>;
 
 const initialLayout = { width: Dimensions.get('window').width };
 
@@ -35,18 +39,16 @@ const renderScene = SceneMap({
   first: FirstRoute,
   second: SecondRoute,
   third: ThirdRoute,
+  fourth: FourthRoute,
 });
 
 export default function TabViewExample() {
-
-
-
-
   const [index, setIndex] = React.useState(0);
   const [routes] = React.useState([
-    { key: 'first', title: 'First' },
-    { key: 'second', title: 'Second' },
-    { key: 'third', title: 'Third' },
+    { key: 'first', title: 'Tab 1' },
+    { key: 'second', title: 'Tab 2' },
+    { key: 'third', title: 'Tab 3' },
+    { key: 'fourth', title: 'Tab 4' },
   ]);
 
   const renderTabBar = (props) => {
@@ -60,23 +62,25 @@ export default function TabViewExample() {
               inputIndex === i ? 1 : 0.5
             ),
           });
+          const color = index === i ? '#1f2937' : '#a1a1aa';
+          const borderColor = index === i ? 'cyan.500' : 'coolGray.200';
 
           return (
             <Box
+              borderBottomWidth="3"
+              borderColor={borderColor}
               flex="1"
-              alignItems='center'
-              p="2"
-              cursor="pointer"
-             >
-            <Pressable
-
-              onPress={() => {
-                console.log(i);
-                setIndex(i);}}>
-               <Animated.Text style={{ opacity }}>{route.title}</Animated.Text>
-            </Pressable>
+              alignItems="center"
+              p="3"
+              cursor="pointer">
+              <Pressable
+                onPress={() => {
+                  console.log(i);
+                  setIndex(i);
+                }}>
+                <Animated.Text style={{ color }}>{route.title}</Animated.Text>
+              </Pressable>
             </Box>
-
           );
         })}
       </Box>
@@ -85,17 +89,18 @@ export default function TabViewExample() {
 
   return (
     <NativeBaseProvider>
-    <TabView
-      navigationState={{ index, routes }}
-      renderScene={renderScene}
-      renderTabBar={renderTabBar}
-      onIndexChange={setIndex}
-      initialLayout={initialLayout}
-      style={{marginTop: StatusBar.currentHeight}}
-    />
+      <TabView
+        navigationState={{ index, routes }}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={initialLayout}
+        style={{ marginTop: StatusBar.currentHeight }}
+      />
     </NativeBaseProvider>
   );
 }
 
 
+
 ```
diff --git a/docs/nativebase-formik-ui.md b/docs/nativebase-formik-ui.md
index 28e5dee4a..e3039574d 100644
--- a/docs/nativebase-formik-ui.md
+++ b/docs/nativebase-formik-ui.md
@@ -13,20 +13,24 @@ import {
   Input,
   Button,
   FormControl,
+  Center,
+  Heading,
   NativeBaseProvider,
+  Box,
+  Text,
 } from 'native-base';
 import React from 'react';
 import { Formik } from 'formik';
 
 const validate = (values) => {
-   const errors = {};
+  const errors = {};
 
-   if (!values.firstName) {
-     errors.firstName = 'Required';
-   }
+  if (!values.password) {
+    errors.password = 'Required';
+  }
 
-   return errors;
- };
+  return errors;
+};
 
 function FormikExample() {
   const onSubmit = (data) => {
@@ -34,40 +38,48 @@ function FormikExample() {
   };
 
   return (
- <Formik initialValues={{ firstName: '', lastName: '' }} onSubmit={onSubmit} validate={validate}>
+    <Formik
+      initialValues={{ password: '', confirmPassword: '' }}
+      onSubmit={onSubmit}
+      validate={validate}>
       {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
-        <VStack width="80%" space="4">
-          <FormControl isRequired isInvalid={'firstName' in errors}>
-            <FormControl.Label>First Name</FormControl.Label>
-            {console.log("errors" , errors)}
-            <Input
-              onBlur={handleBlur('firstName')}
-              placeholder="John"
-              onChangeText={handleChange('firstName')}
-              value={values.firstName}
-            />
-            <FormControl.ErrorMessage>
-              {errors.firstName}
-            </FormControl.ErrorMessage>
-          </FormControl>
+        <Box>
+          <Heading mb="2">Create new password</Heading>
+          <Text mb="5">
+            Your new password must be different from previous used passwords and
+            must be of at least 8 characters.
+          </Text>
+          <VStack space="5">
+            <VStack space="3">
+              <FormControl isRequired isInvalid={'password' in errors}>
+                {console.log('errors', errors)}
+                <Input
+                  type="password"
+                  onBlur={handleBlur('password')}
+                  placeholder="Password"
+                  onChangeText={handleChange('password')}
+                  value={values.password}
+                />
+                <FormControl.ErrorMessage>
+                  {errors.password}
+                </FormControl.ErrorMessage>
+              </FormControl>
 
-          <FormControl isInvalid={'lastName' in errors}>
-            <FormControl.Label>Last Name</FormControl.Label>
-            <Input
-              onBlur={handleBlur('lastName')}
-              placeholder="Doe"
-              onChangeText={handleChange('lastName')}
-              value={values.lastName}
-            />
-            <FormControl.ErrorMessage>
-              {errors.lastName}
-            </FormControl.ErrorMessage>
-          </FormControl>
-
-          <Button onPress={handleSubmit} colorScheme="pink">
-            Submit
-          </Button>
-        </VStack>
+              <FormControl isInvalid={'confirmPassword' in errors}>
+                <Input
+                  onBlur={handleBlur('confirmPassword')}
+                  placeholder="Confirm Password"
+                  onChangeText={handleChange('confirmPassword')}
+                  value={values.confirmPassword}
+                />
+                <FormControl.ErrorMessage>
+                  {errors.confirmPassword}
+                </FormControl.ErrorMessage>
+              </FormControl>
+            </VStack>
+            <Button onPress={handleSubmit}>Update Password</Button>
+          </VStack>
+        </Box>
       )}
     </Formik>
   );
@@ -76,8 +88,11 @@ function FormikExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <FormikExample />
+      <Center flex="1" px="3">
+        <FormikExample />
+      </Center>
     </NativeBaseProvider>
   );
 }
+
 ```
diff --git a/docs/useToken.md b/docs/useToken.md
index 06ff1d0ff..51f5400a6 100644
--- a/docs/useToken.md
+++ b/docs/useToken.md
@@ -15,21 +15,28 @@ import { useToken } from 'native-base';
 
 ```SnackPlayer name=useToken%20Example
 import React from "react";
-import { Box, Text, useToken, NativeBaseProvider, Center } from "native-base";
+import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base";
 
 function UseTokenHookExample() {
-  const [warning1, red2] = useToken(
+  const [colorPick1, colorPick2] = useToken(
     // the key within the theme, in this case `theme.colors`
     "colors",
     // the subkey(s), resolving to `theme.colors.warning.1`
-    ["emerald.200", "red.400"]
+    ["yellow.500", "cyan.500"]
     // a single fallback or fallback array matching the length of the previous arg
   );
 
   return (
-    <Box bg={warning1}>
-      <Text color={red2}>wonderful gradients</Text>
-    </Box>
+    <VStack space={5}>
+      <HStack space={2} alignItems="center">
+        <Box bg={colorPick1} p="3"></Box>
+        <Text>{colorPick1}</Text>
+      </HStack>
+      <HStack space={2} alignItems="center">
+        <Box bg={colorPick2} p="3"></Box>
+        <Text>{colorPick2}</Text>
+      </HStack>
+    </VStack>
   );
 }
 export default function () {