Unable to use @react-native-segmented-control in Modalize
mrcwbr opened this issue · 2 comments
mrcwbr commented
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
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",
github-actions commented
Sorry, friend, your issue does not properly use one of this repo's available issue templates.
(log)
Brenndoerfer commented
Facing the same issue. Touch events of the segmented control are not handled properly when rendered within a Modalize view.