feat: add pager view + use rntb tabbar

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 
 defaults: &defaults
   docker:
-    - image: circleci/node:10
+    - image: circleci/node:12
   working_directory: ~/project
 
 jobs:

README.md

@@ -29,7 +29,7 @@
 
 # Expo app
 
-Collapsible Segmented View for React Native.
+Collapsible Segmented View for React Native
 
 - [View it with Expo](https://expo.io/@pedrobern/react-native-collapsible-segmented-view-demos).
 - Checkout the [examples](https://github.com/PedroBern/react-native-collapsible-segmented-view/tree/main/example) for the source code of the Expo app.
@@ -48,7 +48,8 @@ The [react-native-tab-view](https://github.com/satya164/react-native-tab-view) e
 
 # Features
 
-- Implements [SegmentedControl](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/) and [Fixed Material Tab Bar](https://material.io/components/tabs)
+- [Material Tab Bar](https://github.com/satya164/react-native-tab-view#tabbar) for Android
+- [SegmentedControl](https://github.com/react-native-segmented-control/segmented-control#react-native-segmented-controlsegmented-control) for iOS
 - Lazy support
 - Highly customizable
 - Fully typed with [TypeScript](https://typescriptlang.org)
@@ -61,6 +62,8 @@ Open a Terminal in the project root and run:
 yarn add react-native-collapsible-segmented-view
 
 expo install @react-native-community/segmented-control
+
+yarn add react-native-tab-view react-native-pager-view
 ```
 
 # Quick Start
@@ -80,10 +83,10 @@ const Header = () => {
 
 const Example: React.FC = () => {
   return (
-    <Segmented.View header={Header}>
-      <Segmented.Segment label="A" component={SegmentA} />
-      <Segmented.Segment label="B" component={SegmentB} />
-      <Segmented.Segment label="C" component={SegmentC} />
+    <Segmented.View renderHeader={Header}>
+      <Segmented.Segment id="A" title="A" component={SegmentA} />
+      <Segmented.Segment id="B" title="B" component={SegmentB} />
+      <Segmented.Segment id="C" title="C" component={SegmentC} />
     </Segmented.View>
   )
 }
@@ -151,9 +154,9 @@ import { Segmented } from 'react-native-collapsible-segmented-view'
 const Example = () => {
    return (
      <Segmented.View hader={MyHeader}>
-       <Segmented.Segment label="A" component={ScreenA} />
-       <Segmented.Segment label="B" component={ScreenB} />
-        <Segmented.Segment label="C" component={ScreenC} />
+       <Segmented.Segment id="A" component={ScreenA} />
+       <Segmented.Segment id="B" component={ScreenB} />
+        <Segmented.Segment id="C" component={ScreenC} />
      </Tabs.Container>
    )
 }
@@ -163,16 +166,17 @@ const Example = () => {
 
 |name|type|default|
 |:----:|:----:|:----:|
-|animatedValue|`Value \| undefined`|`new Animated.Value(0)`|
+|animatedValue|`Value \| undefined`||
 |containerHeight|`number \| undefined`|`0`|
 |containerStyle|`ViewStyle \| undefined`||
-|control|`(props: ControlProps) => React.ReactElement`|`IS_IOS ? SegmentedControl : MaterialTabBar`|
 |controlHeight|`number \| undefined`|`48`|
-|disableFadeIn|`boolean \| undefined`|`false`|
-|header|`() => React.ReactElement`||
 |headerHeight|`number \| undefined`||
 |initialIndex|`number \| undefined`|`0`|
+|keyboardDismissMode|`"none" \| "on-drag" \| "auto" \| undefined`||
 |lazy|`boolean \| undefined`|`false`|
+|renderControl|`FC<ControlProps> \| ((props: ControlProps) => ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)> \| null) \| (new (props: any) => Component<...>)>) \| undefined`||
+|renderHeader|`FC<{}> \| (() => ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)> \| null) \| (new (props: any) => Component<...>)>) \| undefined`||
+|swipeEnabled|`boolean \| undefined`|`true`|
 |topStyle|`ViewStyle \| undefined`||
 
 ### Segmented.Segment
@@ -181,18 +185,23 @@ Wrap your screens with `Segmented.Segment`. Basic usage looks like this:
 
 ```tsx
 <Segmented.View ...>
-  <Segmented.Segment label="A" component={ScreenA} />
-  <Segmented.Segment label="B" component={ScreenB} />
-  <Segmented.Segment label="C" component={ScreenC} />
+  <Segmented.Segment id="A" component={ScreenA} />
+  <Segmented.Segment id="B" component={ScreenB} />
+  <Segmented.Segment id="C" component={ScreenC} />
 </Segmented.Container>
 ```
 
 #### Props
 
 |name|type|
 |:----:|:----:|
+|accessibilityLabel|`string \| undefined`|
+|accessible|`boolean \| undefined`|
 |component|`() => React.ReactElement`|
-|label|`string`|
+|icon|`string \| undefined`|
+|id|`string`|
+|testID|`string \| undefined`|
+|title|`string \| undefined`|
 
 ### Segmented.FlatList
 
@@ -236,7 +245,7 @@ import {
 
 ### MaterialTabBar
 
-Default android control.
+Default android control. Props are passed to the original [TabBar](https://github.com/satya164/react-native-tab-view#tabbar).
 
 Example usage:
 
@@ -249,22 +258,58 @@ import {
 ...
 
 <Segmented.View
-  control={(props) => <MaterialTabBar {...props} indicatorStyle='red' />}
+  control={(props) => <MaterialTabBar {...props} />}
+>
+  ...
+```
+
+Rendering icons:
+
+```tsx
+const renderIcon={({ route, focused, color }) => (
+  <Icon
+    name={route.icon}
+    color={color}
+  />
+)}
+
+
+<Segmented.View
+  control={(props) => (
+    <MaterialTabBar renderIcon={renderIcon} {...props} />
+  )}
+  ...
 >
+    <Segmented.Segment key='article' title='Article' icon='home' component={Article} />
   ...
 ```
 
 #### Props
 
-|name|type|default|
-|:----:|:----:|:----:|
-|containerStyle|`ViewStyle \| undefined`||
-|inactiveOpacity|`number \| undefined`|`0.7`|
-|indicatorStyle|`ViewStyle \| undefined`||
-|labelStyle|`TextStyle \| undefined`||
-|pressColor|`string \| undefined`|`DDDDDD`|
-|pressOpacity|`number \| undefined`|`IS_IOS ? 0.2 : 1`|
-|tabStyle|`ViewStyle \| undefined`||
+|name|type|
+|:----:|:----:|
+|activeColor|`string \| undefined`|
+|bounces|`boolean \| undefined`|
+|contentContainerStyle|`StyleProp<ViewStyle>`|
+|getAccessibilityLabel|`((scene: Scene<any>) => string \| undefined) \| undefined`|
+|getAccessible|`((scene: Scene<any>) => boolean \| undefined) \| undefined`|
+|getLabelText|`((scene: Scene<any>) => string \| undefined) \| undefined`|
+|getTestID|`((scene: Scene<any>) => string \| undefined) \| undefined`|
+|inactiveColor|`string \| undefined`|
+|indicatorContainerStyle|`StyleProp<ViewStyle>`|
+|indicatorStyle|`StyleProp<ViewStyle>`|
+|labelStyle|`StyleProp<TextStyle>`|
+|onTabLongPress|`((scene: Scene<any>) => void) \| undefined`|
+|pressColor|`string \| undefined`|
+|pressOpacity|`number \| undefined`|
+|renderBadge|`((scene: Scene<any>) => ReactNode) \| undefined`|
+|renderIcon|`((scene: Scene<any> & { focused: boolean; color: string; }) => ReactNode) \| undefined`|
+|renderIndicator|`((props: Props<any>) => ReactNode) \| undefined`|
+|renderLabel|`((scene: Scene<any> & { focused: boolean; color: string; }) => ReactNode) \| undefined`|
+|renderTabBarItem|`((props: Props<any> & { key: string; }) => ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)> \| null) \| (new (props: any) => Component<...>)>) \| undefined`|
+|scrollEnabled|`boolean \| undefined`|
+|style|`StyleProp<ViewStyle>`|
+|tabStyle|`StyleProp<ViewStyle>`|
 
 
 

documentation/README_TEMPLATE.md

@@ -29,7 +29,7 @@
 
 # Expo app
 
-Collapsible Segmented View for React Native.
+Collapsible Segmented View for React Native
 
 - [View it with Expo](https://expo.io/@pedrobern/react-native-collapsible-segmented-view-demos).
 - Checkout the [examples](https://github.com/PedroBern/react-native-collapsible-segmented-view/tree/main/example) for the source code of the Expo app.
@@ -48,7 +48,8 @@ The [react-native-tab-view](https://github.com/satya164/react-native-tab-view) e
 
 # Features
 
-- Implements [SegmentedControl](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/) and [Fixed Material Tab Bar](https://material.io/components/tabs)
+- [Material Tab Bar](https://github.com/satya164/react-native-tab-view#tabbar) for Android
+- [SegmentedControl](https://github.com/react-native-segmented-control/segmented-control#react-native-segmented-controlsegmented-control) for iOS
 - Lazy support
 - Highly customizable
 - Fully typed with [TypeScript](https://typescriptlang.org)
@@ -61,6 +62,8 @@ Open a Terminal in the project root and run:
 yarn add react-native-collapsible-segmented-view
 
 expo install @react-native-community/segmented-control
+
+yarn add react-native-tab-view react-native-pager-view
 ```
 
 # Quick Start

documentation/buildDocs.ts

@@ -21,9 +21,11 @@ const coreComponents = getComponentPaths([
   'ScrollComponents/ScrollView',
 ])
 
-const segmentedControlComponents = getComponentPaths(['SegmentedControl'])
+const segmentedControlComponents = getComponentPaths([
+  'ControlComponents/SegmentedControl',
+])
 
-const tabBarComponents = getComponentPaths(['MaterialTabBar'])
+const tabBarComponents = getComponentPaths(['ControlComponents/MaterialTabBar'])
 
 const docs = docgen.withCustomConfig(tsconfig, {
   savePropValueAsString: true,
@@ -41,11 +43,11 @@ const docs = docgen.withCustomConfig(tsconfig, {
       component.name === 'MaterialTabBar'
     ) {
       const blackList = [
-        'floatIndex',
+        'position',
+        'onTabPress',
         'index',
         'initialIndex',
-        'labels',
-        'setIndex',
+        'routes',
       ]
       if (blackList.includes(prop.name)) {
         return false

example/package.json

@@ -5,25 +5,26 @@
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
     "@react-native-community/segmented-control": "2.2.1",
-    "expo": "^40.0.1",
-    "expo-constants": "~9.3.3",
-    "expo-status-bar": "~1.0.3",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
-    "react-native-gesture-handler": "^1.9.0",
-    "react-native-reanimated": "2.0.0-rc.0",
-    "react-native-web": "~0.13.12",
+    "expo": "^43.0.0",
+    "expo-constants": "~12.1.3",
+    "expo-status-bar": "~1.1.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-pager-view": "5.4.6",
+    "react-native-tab-view": "^3.1.1",
+    "react-native-web": "0.17.1",
     "use-debounce": "^5.2.0",
     "use-deep-compare": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-native": "^0.63.46",
-    "babel-preset-expo": "8.3.0",
-    "typescript": "^4.1.3"
+    "@babel/core": "^7.12.9",
+    "@types/react": "~17.0.21",
+    "@types/react-dom": "~17.0.9",
+    "@types/react-native": "~0.64.12",
+    "babel-preset-expo": "8.5.1",
+    "typescript": "~4.3.5"
   },
   "scripts": {
     "start": "expo start",

example/src/AnimatedHeader.tsx

@@ -43,7 +43,7 @@ export const Header = () => {
 }
 
 const Example: ExampleComponentType = () => {
-  return <ExampleComponent header={Header} />
+  return <ExampleComponent renderHeader={Header} />
 }
 
 const styles = StyleSheet.create({

example/src/App.tsx

@@ -15,8 +15,8 @@ import {
 import AnimatedHeader from './AnimatedHeader'
 import Default from './Default'
 import Lazy from './Lazy'
-import NoFadeIn from './NoFadeIn'
 import QuickStartDemo from './QuickStartDemo'
+import ScrollableTabBar from './ScrollableTabBar'
 import UndefinedHeaderHeight from './UndefinedHeaderHeight'
 import { ExampleComponentType } from './types'
 
@@ -25,8 +25,8 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   QuickStartDemo,
   Lazy,
   AnimatedHeader,
-  NoFadeIn,
   UndefinedHeaderHeight,
+  ScrollableTabBar,
 ]
 
 const ExampleList: React.FC<object> = () => {

example/src/Default.tsx

@@ -9,7 +9,7 @@ const title = 'Default'
 const Header = buildHeader(title)
 
 const Example: ExampleComponentType = () => {
-  return <ExampleComponent header={Header} />
+  return <ExampleComponent renderHeader={Header} />
 }
 
 Example.title = title

example/src/Lazy.tsx

@@ -9,7 +9,7 @@ const title = 'Lazy'
 const Header = buildHeader(title)
 
 const Example: ExampleComponentType = () => {
-  return <ExampleComponent header={Header} lazy />
+  return <ExampleComponent renderHeader={Header} lazy />
 }
 
 Example.title = title

example/src/ScrollableTabBar.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+  ControlProps,
+  MaterialTabBar,
+} from 'react-native-collapsible-segmented-view'
+
+import { ExampleComponent } from './Shared/ExampleComponent'
+import { buildHeader } from './Shared/Header'
+import { ExampleComponentType } from './types'
+
+const title = 'Scrollable Tab Bar'
+
+const Header = buildHeader(title)
+
+const renderTab = (props: ControlProps) => {
+  return (
+    <MaterialTabBar scrollEnabled {...props} tabStyle={{ width: 'auto' }} />
+  )
+}
+
+const Example: ExampleComponentType = () => {
+  return <ExampleComponent renderHeader={Header} renderControl={renderTab} />
+}
+
+Example.title = title
+
+export default Example

example/src/Shared/ExampleComponent.tsx

@@ -14,9 +14,9 @@ type Props = Partial<SegmentedViewProps>
 export const ExampleComponent: React.FC<Props> = (props) => {
   return (
     <Segmented.View headerHeight={HEADER_HEIGHT} {...props}>
-      <Segmented.Segment label="Article" component={Article} />
-      <Segmented.Segment label="Albums" component={Albums} />
-      <Segmented.Segment label="Contacts" component={Contacts} />
+      <Segmented.Segment id="article" title="Article" component={Article} />
+      <Segmented.Segment id="albums" title="Albums" component={Albums} />
+      <Segmented.Segment id="contacts" title="Contacts" component={Contacts} />
     </Segmented.View>
   )
 }