react-navigation-example-utils

Slider component for react-native using reanimated

Usage no npm install needed!

<script type="module">
  import reactNavigationExampleUtils from 'https://cdn.skypack.dev/react-navigation-example-utils';
</script>

README

semantic-release

Install

yarn add react-navigation-example-utils

Usage

createExampleStack

import { createExampleStack } from 'react-navigation-example-utils'

const Examples = {
  Example1Screen, // React Component
  Example2Screen,
  Example3Screen,
}

const homeTabRouteSectionMap = {
  Examples,
}

const HomeStack = createExampleStack({
  routeSectionMap: homeTabRouteSectionMap,
  navScreenTitle: 'Examples',
  navScreenRouteKey: 'HomeNavScreen',
  tabBarLabel: 'Home',
  tabBarIconName: Platform.OS === 'ios' ? 'ios-videocam' : 'md-videocam',
  tabScreenOptions: {
    tabBarIcon: ({ focused }) => (
      <TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
            ? `ios-information-circle${focused ? '' : '-outline'}`
            : 'md-information-circle'
        }
      />
    ),
  },
})

const AppNavigator = createAppContainer(HomeStack)

// # if you need BottomTabNavigator
// const MainTabNavigator = createBottomTabNavigator(
//   { HomeStack },
//   { initialRouteName: 'HomeStack' },
// )

// # if you need SwitchNavigator
// const AppNavigator = createAppContainer(
//   createSwitchNavigator({
//     Main: MainTabNavigator,
//   }),
// )

routeToSection

Used inside createExampleStack

createNavScreen

Used inside createExampleStack

Components

Status

If anyone interested in adding new indicators, I appreciate the PR 🙌

Why I created this library