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

Expose modal position from useModalize hook. #446

Open
acalvino4 opened this issue Aug 18, 2022 · 0 comments
Open

Expose modal position from useModalize hook. #446

acalvino4 opened this issue Aug 18, 2022 · 0 comments

Comments

@acalvino4
Copy link

Is your feature request related to a problem? Please describe.
Some of my Modalize children have display logic that depends on the modal's position. In typical react fashion, I manage the position state at the parent level - however, this leaves me imperatively updating it onPositionChange and onClosed. I image this is not a terribly uncommon desire, and some may even wish to access the position from outside the modal as well as in it's children.

const ModalWrapper = () => {
    const [position, setPosition] = useState<'initial' | 'top'>('initial');

    return (
      <Modalize
        onPositionChange={newPosition => setPosition(newPosition)}
        onClosed={() => setPosition('initial')}
        customRenderer={
          <Animated.View>
              <FlatList
                style={position === 'top' ? tw`hidden` : tw`w-screen`} // <-- logic depends on modal position
                renderItem={({item}) => (...)}
              />
              <FlatList
                style={position === 'initial' ? tw`hidden` : tw`w-[96vw] mx-auto`} // <-- logic depends on modal position
                renderItem={({item}) => (...)}
              />
          </Animated.View>
        }
      />
    );
  },
);

Describe the solution you'd like
The ideal solution would be, as the title suggests, to expose position from the useModalize hook, allowing me to drop my imperative state management:

    const {ref, position} = useModalize();
    // manual useState usage removed here

    return (
      <Modalize
        ref={ref}
        // manual state updating removed here
        customRenderer={
          <Animated.View>
              <FlatList
                style={position === 'top' ? tw`hidden` : tw`w-screen`}
                renderItem={({item}) => (...)}
              />
              <FlatList
                style={position === 'initial' ? tw`hidden` : tw`w-[96vw] mx-auto`}
                renderItem={({item}) => (...)}
              />
          </Animated.View>
        }
      />
    );

Describe alternatives you've considered
The alternative is to continue using my custom state management of the modal position

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

1 participant