magrinj Github contribution chart
magrinj Github Stats
magrinj Most Used Languages

Activity

30 Sep 2022

Magrinj

[v4] | [v2] BottomSheet not working properly with BottomSheet scrollable component

Bug

When I put BottomSheet scrollable component inside a BottomSheet the scroll doesn't work at all on the first snapPoint.

https://user-images.githubusercontent.com/3551795/176205976-82178377-0c4e-4a58-8286-c58dc5cad606.mov

Environment info

| Library | Version | | ------------------------------- | ------- | | @gorhom/bottom-sheet | 4.3.2 | | react-native | 0.68.2 | | react-native-reanimated | 2.8.0 | | react-native-gesture-handler | 2.2.1 |

Steps To Reproduce

Just by using the example repo, all the scrollable are not working on the first snapPoint. I saw that using FlatList from react-native-gesture-handler si recommended on Android. Using it seems to fix the issue, but I want to use the BottomSheetFlatList to get a proper behaviour, and when user drag on firstSnap point he can drag to the next snapPoint without being blocked.

Reproducible sample code

Example repository.

Forked On 30 Sep 2022 at 02:17:41

Magrinj

@pixelsomatic Don't know if you're on the last release of this library, it seems to be fixed now for me since 4.4.4 🎉

Commented On 30 Sep 2022 at 02:17:41

Magrinj

started

Started On 29 Sep 2022 at 02:14:05

Magrinj

fix(bottom-sheet-modal): behind native modal view

Fix issue #832

Motivation

Using react-navigation or native Modal component with BottomSheetModal component will show them behind the native views. As suggested in react-native-portal library, we should wrap the content inside FullWindowOverlay to get the view above all the native views. https://github.com/gorhom/react-native-portal#react-native-screens-integration

Forked On 12 Sep 2022 at 01:51:54

Magrinj

@gorhom I understand that point, as suggested by @bitcrumb we can create a custom prop called wrapperComponent or containerComponent. We can also put all the hooks of the component BottomSheetModalComponent in a custom exported hook. So user can recreate this component from scratch, in the way they want it. Let me know your preference, I'll definitely update my PR !

Commented On 12 Sep 2022 at 01:51:54

Magrinj

[v4] BottomSheetModal in react navigation modal

Bug

The sheet is placed behind the @react-navigation/native modal.

Environment info

| Library | Version | | ------------------------------- | ------- | | @gorhom/bottom-sheet | 4.1.5 | | react-native | 0.67.2 | | react-native-reanimated | 2.3.1 | | react-native-gesture-handler | 2.2.0 |

Steps To Reproduce

  1. Create a NativeStack
  2. Place the BottomSheetModalProvider like this:
<NavigationContainer>
  <BottomSheetModalProvider>
    <StackNavigator />
  </BottomSheetModalProvider>
</NavigationContainer> 
  1. Use the <BottomSheetModal> in a screen with presentation: "modal".

Describe what you expected to happen:

The sheet is placed behind the modal. I expect the sheet to be in front of the modal that hosts the sheet. I've also tried wrapping the modal-component with the provider, but then I get 'BottomSheetModalInternalContext' cannot be null!.

Reproducible sample code

The snack template throws an error: Cannot convert undefined or null to object

Forked On 02 Sep 2022 at 09:34:13

Magrinj

I made a PR #1086 to fix this issue, hope it will be merged soon :)

Commented On 02 Sep 2022 at 09:34:13

Magrinj

fix(bottom-sheet-modal): behind native modal view

Created On 02 Sep 2022 at 09:33:28
Create Branch
Magrinj In JMagrin/react-native-bottom-sheet Create Branchfix/bottom-sheet-modal

Magrinj

A performant interactive bottom sheet with fully configurable options 🚀

On 02 Sep 2022 at 09:29:35

Magrinj

A performant interactive bottom sheet with fully configurable options 🚀

Forked On 02 Sep 2022 at 09:19:30

Magrinj

[v4] | [v2] BottomSheet not working properly with BottomSheet scrollable component

Bug

When I put BottomSheet scrollable component inside a BottomSheet the scroll doesn't work at all on the first snapPoint.

https://user-images.githubusercontent.com/3551795/176205976-82178377-0c4e-4a58-8286-c58dc5cad606.mov

Environment info

| Library | Version | | ------------------------------- | ------- | | @gorhom/bottom-sheet | 4.3.2 | | react-native | 0.68.2 | | react-native-reanimated | 2.8.0 | | react-native-gesture-handler | 2.2.1 |

Steps To Reproduce

Just by using the example repo, all the scrollable are not working on the first snapPoint. I saw that using FlatList from react-native-gesture-handler si recommended on Android. Using it seems to fix the issue, but I want to use the BottomSheetFlatList to get a proper behaviour, and when user drag on firstSnap point he can drag to the next snapPoint without being blocked.

Reproducible sample code

Example repository.

Forked On 02 Sep 2022 at 09:13:44

Magrinj

Hey guys ! I also have the same kind of problem. I think it's a concurrency problem between the scroll event and the gesture event. In fact I achieved to make the gesture event work by starting my gesture horizontally and then move it vertically without lifting my finger. Not acceptable for the user of course but it might be a clue !

I'm not really familiar with react-native-gesture-handler but shouldn't the ScrollView from BottomSheetScrollView be imported from react-native-gesture-handler instead ? 🤷🏻

expo: ^46.0.0 @gorhom/bottom-sheet: ^4.4.3 react-native-gesture-handler: ~2.5.0 react-native: 0.69.3 react-native-reanimated: ~2.9.1

I've just try patching the library with your suggestion and it doesn't fix the issue, but thanks for pointing that it works when you start the gesture horizontally, it's a good start !

Commented On 02 Sep 2022 at 09:13:44

Magrinj

[v4] | [v2] BottomSheet not working properly with BottomSheet scrollable component

Bug

When I put BottomSheet scrollable component inside a BottomSheet the scroll doesn't work at all on the first snapPoint.

https://user-images.githubusercontent.com/3551795/176205976-82178377-0c4e-4a58-8286-c58dc5cad606.mov

Environment info

| Library | Version | | ------------------------------- | ------- | | @gorhom/bottom-sheet | 4.3.2 | | react-native | 0.68.2 | | react-native-reanimated | 2.8.0 | | react-native-gesture-handler | 2.2.1 |

Steps To Reproduce

Just by using the example repo, all the scrollable are not working on the first snapPoint. I saw that using FlatList from react-native-gesture-handler si recommended on Android. Using it seems to fix the issue, but I want to use the BottomSheetFlatList to get a proper behaviour, and when user drag on firstSnap point he can drag to the next snapPoint without being blocked.

Reproducible sample code

Example repository.

Forked On 26 Aug 2022 at 07:08:21

Magrinj

@AnandKuhar1100 FlatList from react-native-gesture-handler could be a temporary solution, but it's not the correct behavior as the normal behavior with BottomSheetFlatList is that the scroll is intercepted to drag the BottomSheet until you're at your last snap-point.

Commented On 26 Aug 2022 at 07:08:21

Magrinj

started

Started On 02 Aug 2022 at 09:57:36

Magrinj

started

Started On 02 Aug 2022 at 09:57:32

Magrinj

Fully customizable collapsible views

Forked On 28 Jul 2022 at 11:55:18

Magrinj

started

Started On 27 Jul 2022 at 02:55:21
Create Branch
Magrinj In magrinj/react-native Create Branchsnyk-fix-d67e191576bec505071f4d4faf595986

Magrinj

A framework for building native apps with React.

On 16 Jul 2022 at 07:50:02

Magrinj

fix: package.json & yarn.lock to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:

  • https://snyk.io/vuln/SNYK-JS-NWSAPI-2841516

Pushed On 16 Jul 2022 at 07:50:02

Magrinj

Having Animated.View with entering breaks FlatList

Description

This is a follow up on : https://github.com/software-mansion/react-native-reanimated/issues/2703 and https://github.com/software-mansion/react-native-reanimated/issues/2704

I have narrowed down the issue to elimination of the Animated.FlatList and using a regular Flatlist instead.

When removing the items, the touch event of some of them gets disabled.

Expected behavior

They still should be touched.

Actual behavior & steps to reproduce

Snack or minimal code example

Checkout this simple example, by pressing each of the rectangles they get removed, but at some point it stops and you can not remove all of the items. (for me always the first item is the last that stays forever and I can't touch it anymore)

import * as SplashScreen from "expo-splash-screen";
import React, {useEffect, useState} from "react";
import {FlatList, Pressable, SafeAreaView, Text} from "react-native";
import Animated, {FadeIn} from "react-native-reanimated";

const App = () => {
    useEffect(() => {
        SplashScreen.hideAsync();
    }, []);

    const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
    return (
        <SafeAreaView style={{flex: 1, width: "100%"}}>
            <FlatList
                data={items}
                keyExtractor={(item) => {
                    return `${item}`;
                }}
                renderItem={({item}) => {
                    return (
                        <Pressable
                            onPress={() => {
                                console.log(`pressed ${item}`);
                                const newItems = [...items];
                                newItems.shift();
                                setItems(newItems);
                            }}
                        >
                            <Animated.View
                                entering={FadeIn}
                                style={{
                                    backgroundColor: "gray",
                                    width: 100,
                                    height: 50,
                                    marginVertical: 10,
                                    alignItems: "center",
                                    justifyContent: "center",
                                }}
                            >
                                <Text>{item}</Text>
                            </Animated.View>
                        </Pressable>
                    );
                }}
            />
        </SafeAreaView>
    );
};

export default App; 

Package versions

| name | version | | ------------------------------------ | ------- | | react-native | 0.64.3 | | react-native-reanimated | ~2.3.1 | | NodeJS | v14.17.2 | | Xcode | x | | Java | x | | Gradle | x | | expo | SDK 44 |

Affected platforms

  • [ x] Android
  • [ ] iOS
  • [ ] Web

Forked On 15 Jul 2022 at 03:43:19

Magrinj

Same issue for me, feel like I was crazy. I've multiple FlatList on multiple screens, when I'm using entering or exiting on an animation it break everything for just one list... Removing entering and exiting from the Animated.View fix everything.

Commented On 15 Jul 2022 at 03:43:19
Issue Comment

Magrinj

forward in onError link doesn't send any requests

Hi! We try to refetch network errors but looks like forward doesn't work and doesn't emit new request.

const promiseToObservable = (promise: Promise<any>) => {
  return new Observable((subscriber: any) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      (err) => subscriber.error(err)
    );
  });
};

const errorLink = onError(({ graphQLErrors, networkError, forward, operation }) => {
  if (graphQLErrors) {
    const userErrors = graphQLErrors
      .filter(({ message }) => !SYSTEM_ERRORS.some(systemError => message.indexOf(systemError) > -1))
    userErrors.slice(0, 3).forEach(({ message }) => GlobalSnackbars.error(message));
    graphQLErrors.map(e => console.error(`[GraphQL Error] ${e.message}`, e))

    if (graphQLErrors.some(({ message }) => message.indexOf('ECONNREFUSED') > -1)) {
      return promiseToObservable(new Promise(resolve => setTimeout(resolve, 1000))).flatMap(() => {
        return forward(operation)
      });
    }
  }
}); 

Forked On 06 Jul 2022 at 09:34:52

Magrinj

@frimuchkov Yes in my case it was the issue, I've 3 links httpLink, errorLink and authLink. httpLink does basic stuff authLink is a setContext for the accessToken errorLink handle Unauthenticated error, refresh the token and set a new context before forwarding the operation. The initial order was:

ApolloLink.from([errorLink, authLink, httpLink]); // -> Not working 

The correct order is:

ApolloLink.from([authLink, errorLink, httpLink]); // -> Working 

In the wrong order, setContext of authLink is called again right after forward, so the wrong token is set again. As the same error is thrown because of the wrong token, it doesn't go again in onError to avoid endless loop, it's why I first think that forward was not working.

Commented On 06 Jul 2022 at 09:34:52
Issue Comment

Magrinj

forward in onError link doesn't send any requests

Hi! We try to refetch network errors but looks like forward doesn't work and doesn't emit new request.

const promiseToObservable = (promise: Promise<any>) => {
  return new Observable((subscriber: any) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      (err) => subscriber.error(err)
    );
  });
};

const errorLink = onError(({ graphQLErrors, networkError, forward, operation }) => {
  if (graphQLErrors) {
    const userErrors = graphQLErrors
      .filter(({ message }) => !SYSTEM_ERRORS.some(systemError => message.indexOf(systemError) > -1))
    userErrors.slice(0, 3).forEach(({ message }) => GlobalSnackbars.error(message));
    graphQLErrors.map(e => console.error(`[GraphQL Error] ${e.message}`, e))

    if (graphQLErrors.some(({ message }) => message.indexOf('ECONNREFUSED') > -1)) {
      return promiseToObservable(new Promise(resolve => setTimeout(resolve, 1000))).flatMap(() => {
        return forward(operation)
      });
    }
  }
}); 

Forked On 06 Jul 2022 at 07:51:52

Magrinj

@frimuchkov Problem solved on my side, it was just a problem of order in ApolloLink.from. I'm using onError to handle refresh token, and actually it does retry on forward, but if the same error happen it stop to avoid endless loop. My problem was that my authLink was set after my errorLink, so when an error happen the authLink is called on forward operation and the old token is used instead of the new one. Just putting the authLink before the errorLink fix everything.

Commented On 06 Jul 2022 at 07:51:52
Issue Comment

Magrinj

forward in onError link doesn't send any requests

Hi! We try to refetch network errors but looks like forward doesn't work and doesn't emit new request.

const promiseToObservable = (promise: Promise<any>) => {
  return new Observable((subscriber: any) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      (err) => subscriber.error(err)
    );
  });
};

const errorLink = onError(({ graphQLErrors, networkError, forward, operation }) => {
  if (graphQLErrors) {
    const userErrors = graphQLErrors
      .filter(({ message }) => !SYSTEM_ERRORS.some(systemError => message.indexOf(systemError) > -1))
    userErrors.slice(0, 3).forEach(({ message }) => GlobalSnackbars.error(message));
    graphQLErrors.map(e => console.error(`[GraphQL Error] ${e.message}`, e))

    if (graphQLErrors.some(({ message }) => message.indexOf('ECONNREFUSED') > -1)) {
      return promiseToObservable(new Promise(resolve => setTimeout(resolve, 1000))).flatMap(() => {
        return forward(operation)
      });
    }
  }
}); 

Forked On 05 Jul 2022 at 12:18:05

Magrinj

@frimuchkov Did you find a way to fix this ? I'm facing the same issue when trying to refresh my token in the onError link

Commented On 05 Jul 2022 at 12:18:05