Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event handlers do not work with custom buttons #255

Open
bamoha opened this issue Dec 3, 2021 · 4 comments
Open

Event handlers do not work with custom buttons #255

bamoha opened this issue Dec 3, 2021 · 4 comments

Comments

@bamoha
Copy link

bamoha commented Dec 3, 2021

This is a nice project, but whenever I place a custom render button for skip, next and done, the event to skip or go to the next slide stops working.

const renderTexts = (val) => {
        return (
            <Button variant="unstyled" color="amber.500">{val}</Button>
        )
    }

<AppIntroSlider
      data={slides}
      renderItem={RenderItem}
      onSkip={onSkip}
      onDone={onSkip}
      renderSkipButton={() => renderTexts('Skip')}
      renderDoneButton={() => renderTexts('Done')}
      renderNextButton={() => renderTexts('Next')}
      showSkipButton={true}
      dotStyle={{ backgroundColor: customTheme["color-black"] }}
  />
@AhmedRyad22
Copy link

the same issue in here

@himangshuswadesh
Copy link

himangshuswadesh commented Mar 13, 2023

@bamoha Use View component instead of Button, and style the View component accordingly

 const renderTexts = (val) => {
        return (
            <View>{val}</View>
        )
    }

<AppIntroSlider
      data={slides}
      renderItem={RenderItem}
      onSkip={() => console.log("on Skip")}
      onDone={() => console.log("on Done")}
      renderSkipButton={() => renderTexts('Skip')}
      renderDoneButton={() => renderTexts('Done')}
      renderNextButton={() => renderTexts('Next')}
      showSkipButton={true}
      dotStyle={{ backgroundColor: customTheme["color-black"] }}
  />

@Faiz42
Copy link

Faiz42 commented Nov 14, 2023

@bamoha Use View component instead of Button, and style the View component accordingly

 const renderTexts = (val) => {
        return (
            <View>{val}</View>
        )
    }

<AppIntroSlider
      data={slides}
      renderItem={RenderItem}
      onSkip={() => console.log("on Skip")}
      onDone={() => console.log("on Done")}
      renderSkipButton={() => renderTexts('Skip')}
      renderDoneButton={() => renderTexts('Done')}
      renderNextButton={() => renderTexts('Next')}
      showSkipButton={true}
      dotStyle={{ backgroundColor: customTheme["color-black"] }}
  />

I think you forgot the Text element as we can't render text directly inside View

@MaanLad
Copy link

MaanLad commented Aug 16, 2024

Does the solution function correctly? And if not, which other libraries have you utilized in place of react-native-app-intro-slider?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants