chore: add tabview examples to main example app

.eslintrc.json

@@ -16,7 +16,8 @@
       "@react-navigation/material-top-tabs",
       "@react-navigation/material-bottom-tabs",
       "@react-navigation/elements",
-      "@react-navigation/devtools"
+      "@react-navigation/devtools",
+      "react-native-tab-view"
     ]
   },
   "env": {

example/package.json

@@ -64,7 +64,7 @@
     "jest-dev-server": "^5.0.3",
     "jimp": "^0.16.1",
     "mock-require": "^3.0.3",
-    "mock-require-assets": "^0.0.1",
+    "mock-require-assets": "^0.0.3",
     "node-fetch": "^2.6.1",
     "nodemon": "^2.0.6",
     "npm-run-all": "^4.1.5",

example/src/Screens/LinkComponent.tsx

@@ -8,11 +8,11 @@ import {
   createStackNavigator,
   StackScreenProps,
 } from '@react-navigation/stack';
-import type { LinkComponentDemoParamList } from 'example/src/screens';
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { Button } from 'react-native-paper';
 
+import type { LinkComponentDemoParamList } from '../screens';
 import Albums from '../Shared/Albums';
 import Article from '../Shared/Article';
 

example/src/Screens/MaterialTopTabs.tsx

@@ -15,6 +15,8 @@ type MaterialTopTabParams = {
 
 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
+const ChatScreen = () => <Chat bottom />;
+
 export default function MaterialTopTabsScreen({
   navigation,
 }: StackScreenProps<ParamListBase>) {
@@ -28,7 +30,7 @@ export default function MaterialTopTabsScreen({
     <MaterialTopTabs.Navigator>
       <MaterialTopTabs.Screen
         name="Chat"
-        component={Chat}
+        component={ChatScreen}
         options={{ title: 'Chat' }}
       />
       <MaterialTopTabs.Screen

example/src/Screens/NotFound.tsx

@@ -1,9 +1,10 @@
 import type { StackScreenProps } from '@react-navigation/stack';
-import type { RootStackParamList } from 'example/src/screens';
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
 
+import type { RootStackParamList } from '../screens';
+
 const NotFoundScreen = ({
   route,
   navigation,

example/src/Screens/TabView.tsx

@@ -0,0 +1,89 @@
+import type { ParamListBase } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackScreenProps,
+} from '@react-navigation/stack';
+import * as React from 'react';
+import { ScrollView } from 'react-native';
+import { List } from 'react-native-paper';
+
+import AutoWidthTabBar from './TabView/AutoWidthTabBar';
+import Coverflow from './TabView/Coverflow';
+import CustomIndicator from './TabView/CustomIndicator';
+import CustomTabBar from './TabView/CustomTabBar';
+import ScrollableTabBar from './TabView/ScrollableTabBar';
+import TabBarIcon from './TabView/TabBarIcon';
+
+const EXAMPLE_SCREENS = {
+  ScrollableTabBar,
+  AutoWidthTabBar,
+  TabBarIcon,
+  CustomIndicator,
+  CustomTabBar,
+  Coverflow,
+} as const;
+
+const EXAMPLE_SCREEN_NAMES = Object.keys(
+  EXAMPLE_SCREENS
+) as (keyof typeof EXAMPLE_SCREENS)[];
+
+export type TabViewStackParams = {
+  [Key in keyof typeof EXAMPLE_SCREENS]: undefined;
+} & {
+  ExampleList: undefined;
+};
+
+const TabViewStack = createStackNavigator<TabViewStackParams>();
+
+const ExampleListScreen = ({
+  navigation,
+}: StackScreenProps<TabViewStackParams, 'ExampleList'>) => {
+  return (
+    <ScrollView>
+      {EXAMPLE_SCREEN_NAMES.map((name) => (
+        <List.Item
+          key={name}
+          testID={name}
+          title={EXAMPLE_SCREENS[name].options.title}
+          onPress={() => {
+            navigation.navigate(name);
+          }}
+        />
+      ))}
+    </ScrollView>
+  );
+};
+
+export default function TabViewStackScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <TabViewStack.Navigator
+      screenOptions={{ headerMode: 'screen', cardStyle: { flex: 1 } }}
+    >
+      <TabViewStack.Screen
+        name="ExampleList"
+        component={ExampleListScreen}
+        options={{
+          title: 'TabView Examples',
+        }}
+      />
+      {EXAMPLE_SCREEN_NAMES.map((name) => {
+        return (
+          <TabViewStack.Screen
+            key={name}
+            name={name}
+            component={EXAMPLE_SCREENS[name]}
+            options={EXAMPLE_SCREENS[name].options}
+          />
+        );
+      })}
+    </TabViewStack.Navigator>
+  );
+}

packages/react-native-tab-view/example/src/AutoWidthTabBarExample.tsx → example/src/Screens/TabView/AutoWidthTabBar.tsx

@@ -1,23 +1,33 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import {
-  TabView,
-  TabBar,
-  SceneMap,
   NavigationState,
+  SceneMap,
   SceneRendererProps,
+  TabBar,
+  TabView,
 } from 'react-native-tab-view';
-import Article from './Shared/Article';
-import Albums from './Shared/Albums';
-import Chat from './Shared/Chat';
-import Contacts from './Shared/Contacts';
+
+import Albums from '../../Shared/Albums';
+import Article from '../../Shared/Article';
+import Chat from '../../Shared/Chat';
+import Contacts from '../../Shared/Contacts';
 
 type State = NavigationState<{
   key: string;
   title: string;
 }>;
 
-const AutoWidthTabBarExample = () => {
+const renderScene = SceneMap({
+  albums: () => <Albums />,
+  contacts: () => <Contacts />,
+  article: () => <Article />,
+  chat: () => <Chat bottom />,
+  long: () => <Article />,
+  medium: () => <Article />,
+});
+
+const AutoWidthTabBar = () => {
   const [index, onIndexChange] = React.useState(1);
   const [routes] = React.useState([
     { key: 'article', title: 'Article' },
@@ -41,15 +51,6 @@ const AutoWidthTabBarExample = () => {
     />
   );
 
-  const renderScene = SceneMap({
-    albums: Albums,
-    contacts: Contacts,
-    article: Article,
-    chat: Chat,
-    long: Article,
-    medium: Article,
-  });
-
   return (
     <TabView
       navigationState={{
@@ -63,11 +64,16 @@ const AutoWidthTabBarExample = () => {
   );
 };
 
-AutoWidthTabBarExample.title = 'Scrollable tab bar (auto width)';
-AutoWidthTabBarExample.backgroundColor = '#3f51b5';
-AutoWidthTabBarExample.appbarElevation = 0;
+AutoWidthTabBar.options = {
+  title: 'Scrollable tab bar (auto width)',
+  headerShadowVisible: false,
+  headerTintColor: '#fff',
+  headerStyle: {
+    backgroundColor: '#3f51b5',
+  },
+};
 
-export default AutoWidthTabBarExample;
+export default AutoWidthTabBar;
 
 const styles = StyleSheet.create({
   tabbar: {

packages/react-native-tab-view/example/src/CoverflowExample.tsx → example/src/Screens/TabView/Coverflow.tsx

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import {
   Animated,
-  View,
   Image,
-  Text,
-  StyleSheet,
   ImageRequireSource,
+  StyleSheet,
+  Text,
+  View,
 } from 'react-native';
-import { TabView, SceneRendererProps } from 'react-native-tab-view';
+import { SceneRendererProps, TabView } from 'react-native-tab-view';
 
 type Route = {
   key: string;
@@ -22,14 +22,14 @@ type Props = SceneRendererProps & {
 };
 
 const ALBUMS: { [key: string]: ImageRequireSource } = {
-  'Abbey Road': require('../assets/album-art-1.jpg'),
-  'Bat Out of Hell': require('../assets/album-art-2.jpg'),
-  'Homogenic': require('../assets/album-art-3.jpg'),
-  'Number of the Beast': require('../assets/album-art-4.jpg'),
-  "It's Blitz": require('../assets/album-art-5.jpg'),
-  'The Man-Machine': require('../assets/album-art-6.jpg'),
-  'The Score': require('../assets/album-art-7.jpg'),
-  'Lost Horizons': require('../assets/album-art-8.jpg'),
+  'Abbey Road': require('../../../assets/album-art-01.jpg'),
+  'Bat Out of Hell': require('../../../assets/album-art-02.jpg'),
+  'Homogenic': require('../../../assets/album-art-03.jpg'),
+  'Number of the Beast': require('../../../assets/album-art-04.jpg'),
+  "It's Blitz": require('../../../assets/album-art-05.jpg'),
+  'The Man-Machine': require('../../../assets/album-art-06.jpg'),
+  'The Score': require('../../../assets/album-art-07.jpg'),
+  'Lost Horizons': require('../../../assets/album-art-08.jpg'),
 };
 
 const Scene = ({ route, position, layout, index, length }: Props) => {
@@ -87,7 +87,7 @@ const Scene = ({ route, position, layout, index, length }: Props) => {
   );
 };
 
-export default function CoverflowExample() {
+export default function Coverflow() {
   const [index, onIndexChange] = React.useState(2);
   const [routes] = React.useState(Object.keys(ALBUMS).map((key) => ({ key })));
 
@@ -113,9 +113,14 @@ export default function CoverflowExample() {
   );
 }
 
-CoverflowExample.title = 'Coverflow';
-CoverflowExample.backgroundColor = '#000';
-CoverflowExample.appbarElevation = 0;
+Coverflow.options = {
+  title: 'Coverflow',
+  headerShadowVisible: false,
+  headerTintColor: '#fff',
+  headerStyle: {
+    backgroundColor: '#000',
+  },
+};
 
 const styles = StyleSheet.create({
   container: {

packages/react-native-tab-view/example/src/CustomIndicatorExample.tsx → example/src/Screens/TabView/CustomIndicator.tsx

@@ -1,16 +1,18 @@
-import * as React from 'react';
-import { Animated, View, Text, StyleSheet, I18nManager } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import * as React from 'react';
+import { Animated, I18nManager, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
-  TabView,
-  TabBar,
-  SceneMap,
   NavigationState,
+  SceneMap,
   SceneRendererProps,
+  TabBar,
+  TabView,
 } from 'react-native-tab-view';
-import Albums from './Shared/Albums';
-import Article from './Shared/Article';
-import Contacts from './Shared/Contacts';
+
+import Albums from '../../Shared/Albums';
+import Article from '../../Shared/Article';
+import Contacts from '../../Shared/Contacts';
 
 type Route = {
   key: string;
@@ -19,7 +21,14 @@ type Route = {
 
 type State = NavigationState<Route>;
 
-const CustomIndicatorExample = () => {
+const renderScene = SceneMap({
+  article: () => <Article />,
+  contacts: () => <Contacts />,
+  albums: () => <Albums />,
+});
+
+const CustomIndicator = () => {
+  const insets = useSafeAreaInsets();
   const [index, onIndexChange] = React.useState(0);
   const [routes] = React.useState<Route[]>([
     {
@@ -103,21 +112,17 @@ const CustomIndicatorExample = () => {
   const renderTabBar = (
     props: SceneRendererProps & { navigationState: State }
   ) => (
-    <TabBar
-      {...props}
-      renderIcon={renderIcon}
-      renderBadge={renderBadge}
-      renderIndicator={renderIndicator}
-      style={styles.tabbar}
-    />
+    <View style={[styles.tabbar, { paddingBottom: insets.bottom }]}>
+      <TabBar
+        {...props}
+        renderIcon={renderIcon}
+        renderBadge={renderBadge}
+        renderIndicator={renderIndicator}
+        style={styles.tabbar}
+      />
+    </View>
   );
 
-  const renderScene = SceneMap({
-    article: Article,
-    contacts: Contacts,
-    albums: Albums,
-  });
-
   return (
     <TabView
       navigationState={{
@@ -132,11 +137,16 @@ const CustomIndicatorExample = () => {
   );
 };
 
-CustomIndicatorExample.title = 'Custom indicator';
-CustomIndicatorExample.backgroundColor = '#263238';
-CustomIndicatorExample.appbarElevation = 4;
+CustomIndicator.options = {
+  title: 'Custom indicator',
+  headerShadowVisible: false,
+  headerTintColor: '#fff',
+  headerStyle: {
+    backgroundColor: '#263238',
+  },
+};
 
-export default CustomIndicatorExample;
+export default CustomIndicator;
 
 const styles = StyleSheet.create({
   tabbar: {