jeremybarbet/react-native-modalize

Unable to use @react-native-segmented-control in Modalize

mrcwbr opened this issue · 2 comments

Describe the bug
I added the @react-native-segmented-control with the following code into my project:

import {Modalize} from 'react-native-modalize';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

// ...
const modalRef = useRef<Modalize>(null);
const [withoutModal, setWithoutModal] = useState(0);
const [inModal, setInModal] = useState(0);

return (
    <>
      <SafeAreaView>
        <Text>Without Modal</Text>
        <SegmentedControl values={['A', 'B', 'C']}
                          selectedIndex={withoutModal}
                          onChange={event => setWithoutModal(event.nativeEvent.selectedSegmentIndex)} />
        <Button title="open modal" onPress={() => modalRef.current?.open()} />
      </SafeAreaView>

      <Modalize ref={modalRef} childrenStyle={{padding: 16}}>
        <Text>In Modal</Text>
        <SegmentedControl values={['1', '2', '3']}
                          selectedIndex={inModal}
                          onChange={event => setInModal(event.nativeEvent.selectedSegmentIndex)} />
      </Modalize>
    </>
);

The ABC Segmented Control outside of the Modalize component works like expected. The 123 Segmented Control does not emit an onChange event and therefore it always moves back to index = 0

Reproduce
Simulator-Screen-Recording-iPhone-13-2022-03-03-at-19 20 52

Dependencies:

  • "@react-native-segmented-control/segmented-control": "^2.4.0",
  • "react-native-modalize": "^2.0.13",
  • "react-native": "0.66.4",
  • "react-native-gesture-handler": "^1.10.3",

Sorry, friend, your issue does not properly use one of this repo's available issue templates.
(log)

Facing the same issue. Touch events of the segmented control are not handled properly when rendered within a Modalize view.