vemarav / react-native-avatar-crop

Highly customisable <Crop /> component for React Native < 💅 >
https://www.npmjs.com/package/react-native-avatar-crop
MIT License
54 stars 14 forks source link

Cannot crop when screen using createNativeStackNavigator from '@react-navigation/native-stack' #17

Closed taitran2512 closed 1 year ago

taitran2512 commented 2 years ago

Image cannot crop, zoom when that screen in app using createNativeStackNavigator from '@react-navigation/native-stack'

this is my dependencies

"@react-navigation/native": "^6.0.8", "@react-navigation/native-stack": "^6.5.0", "react-native-avatar-crop": "^1.3.5", "react-native-gesture-handler": "2.2.0", "react-native-image-size": "^1.1.3", "@react-native-community/image-editor": "vemarav/react-native-image-editor", "@react-native-masked-view/masked-view": "^0.2.6",

victorglomer commented 2 years ago

same problem here with android. cannot zoom or move the crop mask.

remobaer commented 1 year ago

any updates on this?

vemarav commented 1 year ago

Will look into this tomorrow 😞

taitran2512 commented 1 year ago

All my app are using createNativeStackNavigator(), but only screen using avatar-crop I used and it work

function CropImageScreen({ route }: any) {
    const Stack = createStackNavigator()
    return (
        <Stack.Navigator screenOptions={screenOptionsStack}>
            <Stack.Screen
                name={SCREENNAME.CROP_IMAGE}
                component={() => <CropImage image={route.params?.image} />}
                options={TransitionPresets.ModalSlideFromBottomIOS}
                initialParams={route.params}
            />
        </Stack.Navigator>
    )
}
const ArrScreen=[
        .............
    {
        name: SCREENNAME.CROP_IMAGE,
        component: CropImageScreen,
        initialParams: undefined,
        options: undefined,
    },
]
const App=()=>{
       const NativeStack = createNativeStackNavigator()
       return (
                <NativeStack.Navigator screenOptions={screenOptionsNativeStack}>
                {ArrScreen.map((item, index) => (
                    <NativeStack.Screen
                        key={String(index)}
                        name={item.name}
                        component={item.component}
                        initialParams={item.initialParams}
                        options={item.options}
                    />
                ))}
            </NativeStack .Navigator>
      )
}
vemarav commented 1 year ago

@taitran2512 feel free to reopen this if https://github.com/vemarav/react-native-avatar-crop/issues/17#issuecomment-1206357441 solution didn't work