Feature Request

Can you, please, add a new method for navigating to a certain page (NOT only the next/previous page.)

Why it is needed

It is useful when there are 2 scenarios, which the user can select from.

Possible implementation

Code sample

Feature Request

Allow page width and styles to be adjusted instead of just centering the content.

Why it is needed

This is will allow using this package for more complex content such as survey forms.

Bug

Environment info

Reproducible sample code

@gorhom : I am using the following boilerplate

This code I am using inside a containers, this is an example of container:

import React, { useState, useEffect, useMemo } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { View, StyleSheet } from 'react-native'
import { Text, Button } from 'react-native-paper'
import { Common, Fonts, Gutters, Layout } from '@/Theme'
import { useTranslation } from 'react-i18next'
import Settings from '@/Store/Settings/Init'

import PaperOnboarding from "@gorhom/paper-onboarding";
import { useSafeArea } from 'react-native-safe-area-context';

const data = [
  {
    title: 'Hotels',
    description: 'All hotels and hostels are sorted by hospitality rating',
    backgroundColor: '#698FB8',
  },
  {
    title: 'Banks',
    description: 'We carefully verify all banks before add them into the app',
    backgroundColor: '#6CB2B8',
  },
  {
    title: 'Stores',
    description: 'All local stores are categorized for your convenience',
    backgroundColor: '#9D8FBF',
  },
];

const IndexInstallationContainer = (props) => {
  const { t } = useTranslation()
  const dispatch = useDispatch()
  const settings = useSelector((state) => state.settings)

  const changeTheme = () => {
    dispatch(Settings.action({ colorScheme: settings.item.colorScheme === 'dark' ? 'ligth' : 'dark' }))
  }

  const handleOnClosePress = () => props.navigation.navigate("Login");

  const safeInsets = useSafeArea();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  return (
    <PaperOnboarding
      data={data}
      safeInsets={{
          top: insets.top,
          bottom: insets.bottom,
          left: insets.left,
          right: insets.right,
      }}
      onCloseButtonPress={handleOnClosePress}
    />
  )
}

export default IndexInstallationContainer

I attempted to use an image component as the image, but it didnt seem to work. Does it specifically need to be a react-native-svg?

this library is awesome but not working because reanimated library is depracted

Bug

TypeError - proc is not a function (it is undefined)
&
TypeError: Cannot read property 'usePanGestureHandler' of undefined

Hello,

Firstly, thanks a lot to @gorhom for this library!

With that, just curious if it's still being maintained?

After upgrading to RN 0.72 or 0.73 we're unable to use this library anymore. I tried applying a few patches and updated the package with different versions of react-native, react-native-reanimated, and react-native-redash and even tried importing from react-native-redash/lib/module/v1 for the redash imports but had no luck with the different versions and attempts. It seems it may be a compatibility issue at the framework level per https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility.

Why it is needed

Prevents upgrading to RN 0.72 or using Reanimated v3 for users of this library.

I got Invariant Violation: Tried to register two views with the same name RNSVGRect when using this package. I think this is because I already have rn-svg installed while this package also installed rn-svg with different version.

here's my package relevant tree

+-- @gorhom/[email protected]
| +-- [email protected]
| | +-- [email protected] deduped
| | +-- [email protected] deduped
| | +-- [email protected] deduped
| | `-- [email protected] deduped
| `-- [email protected]
|   +-- [email protected] deduped
|   `-- [email protected] deduped
+-- UNMET PEER DEPENDENCY [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected] deduped
| | | `-- [email protected]
| | `-- [email protected]
| |   `-- [email protected] deduped
| `-- [email protected]
|   +-- [email protected]
|   `-- [email protected] deduped

for reference software-mansion/react-native-svg#591

Feature Request

Hi @gorhom , it would be possible to add the following feature to the module.

Why it is needed

it would be very interesting to be able to add the following effect to the dots paging.

P.s.
I tried on expo your example seems to work if you want you could add it to your documentation.
Link: https://snack.expo.io/mN6SnIy6M

Feature Request

Add new functions that could be passed in PageContentProps to trigger the next or previous screen and to close the onboarding entirely. My understanding is people could then use these in their own custom content components.

Why it is needed

We've noticed a fair few people installing our app and then uninstalling from the onboarding screen. We wonder whether some of these people either:

a) Don't realise they need to swipe to progress to the next screen; or
b) Swipe to the final screen but don't notice/see the "Close" button in the top right

Possible implementation

I've had a stab at implementing this myself (in the hope of submitting a PR) but I'm not at all familiar with animations or gestures and I've ended up very confused. I'm afraid I don't have any useful suggestions right now!

Code sample

As above - sorry!

If anyone could point me in the right direction as to how this might be implemented I'd be happy to give it a go :)

PS. Great job with this project! 👍

Bug

After installing the library, this error appears when starting the app

Environment info

Steps To Reproduce

• Install the library
• Create a screen that uses it
• Compile and run the app

Reproducible sample code

import React from 'react';
import { View } from 'react-native';
import PaperOnboarding, {
  PaperOnboardingItemType,
} from '@gorhom/paper-onboarding';

export class OnboardingScreen extends React.Component<any, any> {
  render() {
    const data: PaperOnboardingItemType[] = [
      {
        title: 'Hotels',
        description: 'All hotels and hostels are sorted by hospitality rating',
        backgroundColor: '#698FB8',
      },
      {
        title: 'Banks',
        description:
          'We carefully verify all banks before add them into the app',
        backgroundColor: '#6CB2B8',
      },
      {
        title: 'Stores',
        description: 'All local stores are categorized for your convenience',
        backgroundColor: '#9D8FBF',
      },
    ];

    const Screen = () => {
      const handleOnClosePress = () => console.log('navigate to other screen');
      return (
        <PaperOnboarding data={data} onCloseButtonPress={handleOnClosePress} />
      );
    };

    return (
        <Screen />
    );
  }
}

When I use custom component for my page, touchables and other interactive components (such as Picker) inside the custom component doesn't respond to touch.

Feature Request

I ask you to add support for the react-native-gesture-handler@2. The current peerDep is "react-native-gesture-handler": "^1.10.3".

Why it is needed

[email protected] is the latest version, and already being used across the libs.

Error when installing this lib:

❯ npm install @gorhom/paper-onboarding
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: myapp1.0.0
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native-gesture-handler
npm ERR!   react-native-gesture-handler@"~2.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-gesture-handler@"^1.10.3" from @gorhom/[email protected]
npm ERR! node_modules/@gorhom/paper-onboarding
npm ERR!   @gorhom/paper-onboarding@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Feature Request

Support for react-native-reanimated v2

Why it is needed

from react-native-reanimated v2 migration docs it says that it's backward compatible with some changes like changing

import {interpolate} from 'react-native-reanimated';
// to
import {interpolateNode} from 'react-native-reanimated';

I tried renaming all the imports but it won't work, I'm currently trying to re-implement the component with the new API but it needs some learning curve to do so.

Possible implementation

Code sample

Hi is this only capable if you are using .ts? I can't seem to get it work using javascript

Bug

using
"@gorhom/paper-onboarding": "^1.1.0"
and
"react-native-svg": "12.1.0"

throws an error at app starts:
Tried to register two views with the same name RNSVGSvgView

removing react-native-svg fix the problem but i need to use both

Environment info

Expo 41
"@gorhom/paper-onboarding": "^1.1.0",
"react-native-svg": "12.1.0",

Hey,

This is really nice, I noticed a small issue that I also ran into when using reanimated, there is a hidden away configuration and an api that is not documented called addWhitelistedNativeProps so you may notice frame drops on lower end devices, this is because the cx, cy, r props are not accepted it the whitelisted configuration and are returned back to the JS thread for execution.

if you add Animated.addWhitelistedNativeProps({ cx: true, y: true, r: true }); it will ensure these animations occur on the native ui thread.

I discovered it here. software-mansion/react-native-reanimated#537

Is there a way to add custom components on the screen (for example, a button)?