gorhom / react-native-paper-onboarding

Paper Onboarding is a material design UI slider for `React Native`.
MIT License
839 stars 47 forks source link

requireNativeComponent: "RNSVGCircle" was not found in the UIManager #29

Open Angelk90 opened 3 years ago

Angelk90 commented 3 years ago

Bug

Schermata 2020-11-18 alle 17 11 23

Environment info

Library Version
@gorhom/paper-onboarding ^1.0.0
react-native 0.63.3
react-native-reanimated ^1.13.0
react-native-gesture-handler ^1.8.0
react-native-svg ^12.1.0

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
agam16 commented 3 years ago

@Angelk90 did you resolve this?

juanda2222 commented 1 month ago

@Angelk90 Im also experiencing this issue