Uncaught TypeError: _a2.setNativeProps is not a function

motto76 commented 11 months ago

Hello, after my project with vite and 'react-native-actions-sheet' can finally be compiled (there were several settings in the vite.config.ts required) there is now a new problem.

When trying to display the component, the following error occurs (we use react-native-actions-sheet @0.8.21, Storybook 7.4.6 for react-vite) : grafik

grafik

The Component looks like this (and is only one part of my app):

import { useRef } from 'react'
import { Text, View } from 'react-native'
import ActionSheet, { ActionSheetRef, SheetProps } from 'react-native-actions-sheet'

export const AktionsbereichMobil = ({ sheetId, payload }: SheetProps<{ inhalt: string }>) => {
  console.log(payload?.inhalt)
  console.log(sheetId)

  const actionSheetRef = useRef<ActionSheetRef>(null)

  return (
    <ActionSheet
      id={sheetId}
      ref={actionSheetRef}
      containerStyle={{
        borderTopLeftRadius: 25,
        borderTopRightRadius: 25
      }}
      indicatorStyle={{
        width: 100
      }}
      gestureEnabled={true}
    >
      <View>
        <Text>{payload?.inhalt}</Text>
      </View>
    </ActionSheet>
  )
}

export default AktionsbereichMobil

Sheets.tsx

import { registerSheet } from 'react-native-actions-sheet'
import { AktionsbereichMobil } from '../GUI-Komponenten/Aktionsbereich/Aktionsbereich/AktionsbereichMobil.tsx'

registerSheet('aktionsBereichMobil', AktionsbereichMobil)

export { }

Try to show: SheetManager.show('aktionsBereichMobil', { payload: { inhalt: 'TestString' } })

console.log from component:

'TestString' => OK
'aktionsBereichMobil' => OK

Does anyone know what the problem is here?

motto76 commented 11 months ago

Hello,

I am a bit confused.

I didn't find any definition of the function: 'setNativeProps' in the whole code ?!

youdini commented 10 months ago

Hello, I have the same Error I am currently developing a mobile app, in mobile it is totally fine but when i test it in my browser, whenever I open the actionsheet it always show this error

This is the code:

import { StyleSheet } from "react-native";
import { View } from "react-native-ui-lib";
import React from "react";
import { SheetManager } from "react-native-actions-sheet";

import { colors } from "../../constants/theme";
import DrawerButton from "./drawerButton";
import { statusbar } from "../../constants/device";

const DrawerContent = () => {
  return (
    <View flex-1 centerH backgroundColor={colors.dark} style={styles.container}>
      <DrawerButton
        label={"Setting"}
        icon={"gear"}
        onPress={() => SheetManager.show("settingSheet")}
      />
      <DrawerButton
        label={"About Us"}
        icon={"heart"}
        onPress={() => SheetManager.show("aboutSheet")}
      />
      <DrawerButton
        label={"Help"}
        icon={"question"}
        onPress={() => SheetManager.show("helpSheet")}
      />
      <DrawerButton
        label={"Sign Out"}
        icon={"undo"}
        iconSize={27}
        style={styles.signout}
        onPress={() => SheetManager.show("signoutSheet")}
      />
    </View>
  );
};

export default DrawerContent;

const styles = StyleSheet.create({
  container: {
    marginTop: statusbar,
  },
  signout: {
    position: "absolute",
    bottom: 20,
  },
});

I currently using this version: "react-native-actions-sheet": "^0.9.0-alpha.24",

can anyone know how to fix this?