Fixes

Author: satya164

docs/drawer-navigator.md

@@ -183,7 +183,7 @@ The `progress` node can be used to do interesting animations in your `drawerCont
 
 ```js
 function CustomDrawerContent({ progress, ...rest }) {
-  const translateX = props.drawerOpenProgress.interpolate({
+  const translateX = Animated.interpolate(progress, {
     inputRange: [0, 1],
     outputRange: [-100, 0],
   });

docs/handling-safe-area.md

@@ -61,10 +61,7 @@ export default function App() {
       <Stack.Navigator initialRouteName="Home" headerMode="none">
         <Stack.Screen name="Home">
           {() => (
-            <Tab.Navigator
-              initialRouteName="Analitics"
-              tabBarComponent={() => null}
-            >
+            <Tab.Navigator initialRouteName="Analitics" tabBar={() => null}>
               <Tab.Screen name="Analitics" component={Demo} />
               <Tab.Screen name="Profile" component={Demo} />
             </Tab.Navigator>
@@ -85,8 +82,7 @@ To fix this issue you can apply safe area insets on your content. This can be ac
 <samp id="safe-area-example" />
 
 ```jsx
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import SafeAreaView from 'react-native-safe-area-view';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
 function Demo() {
   return (

docs/tab-based-navigation.md

@@ -70,9 +70,9 @@ export default function App() {
             let iconName;
 
             if (route.name === 'Home') {
-              iconName = `ios-information-circle${focused ? '' : '-outline'}`;
+              iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
             } else if (route.name === 'Settings') {
-              iconName = `ios-options`;
+              iconName = focused ? 'ios-list-box' : 'ios-list';
             }
 
             // You can return any component that you like here!

website/static/examples/next/hidden-components.js

@@ -25,7 +25,7 @@ export default function App() {
           {() => (
             <Tab.Navigator
               initialRouteName="Analitics"
-              tabBarComponent={() => null}
+              tabBar={() => null}
             >
               <Tab.Screen name="Analitics" component={Demo} />
               <Tab.Screen name="Profile" component={Demo} />

website/static/examples/next/safe-area-example.js

@@ -29,7 +29,7 @@ export default function App() {
             {() => (
               <Tab.Navigator
                 initialRouteName="Analitics"
-                tabBarComponent={() => null}
+                tabBar={() => null}
               >
                 <Tab.Screen name="Analitics" component={Demo} />
                 <Tab.Screen name="Profile" component={Demo} />

website/static/examples/next/tab-based-navigation-badges.js

@@ -64,13 +64,23 @@ export default function App() {
             if (route.name === 'Home') {
               return (
                 <HomeIconWithBadge
-                  name={`ios-information-circle${focused ? '' : '-outline'}`}
+                  name={
+                    focused
+                      ? 'ios-information-circle'
+                      : 'ios-information-circle-outline'
+                  }
                   size={size}
                   color={color}
                 />
               );
             } else if (route.name === 'Settings') {
-              return <Ionicons name="ios-options" size={size} color={color} />;
+              return (
+                <Ionicons
+                  name={focused ? 'ios-list-box' : 'ios-list'}
+                  size={size}
+                  color={color}
+                />
+              );
             }
           },
         })}

website/static/examples/next/tab-based-navigation-icons.js

@@ -33,9 +33,9 @@ export default function App() {
             let iconName;
 
             if (route.name === 'Home') {
-              iconName = `ios-information-circle${focused ? '' : '-outline'}`;
+              iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
             } else if (route.name === 'Settings') {
-              iconName = 'ios-options';
+              iconName = focused ? 'ios-list-box' : 'ios-list';
             }
 
             // You can return any component that you like here!

website/static/examples/next/use-safe-area.js

@@ -36,7 +36,7 @@ export default function App() {
             {() => (
               <Tab.Navigator
                 initialRouteName="Analitics"
-                tabBarComponent={() => null}
+                tabBar={() => null}
               >
                 <Tab.Screen name="Analitics" component={Demo} />
                 <Tab.Screen name="Profile" component={Demo} />

website/versioned_docs/version-4.x/drawer-navigator.md

@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
 
 ```js
 const CustomDrawerContentComponent = props => {
-  const translateX = props.drawerOpenProgress.interpolate({
+  const translateX = Animated.interpolate(drawerOpenProgress, {
     inputRange: [0, 1],
     outputRange: [-100, 0],
   });

website/versioned_docs/version-4.x/tab-based-navigation.md

@@ -70,12 +70,14 @@ export default createBottomTabNavigator(
         let IconComponent = Ionicons;
         let iconName;
         if (routeName === 'Home') {
-          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
+          iconName = focused
+            ? 'ios-information-circle'
+            : 'ios-information-circle-outline';
           // Sometimes we want to add badges to some icons.
           // You can check the implementation below.
           IconComponent = HomeIconWithBadge;
         } else if (routeName === 'Settings') {
-          iconName = `ios-options`;
+          iconName = focused ? 'ios-list-box' : 'ios-list';
         }
 
         // You can return any component that you like here!