Created
February 9, 2020 15:48
-
-
Save ikismail/c14318c1d80fbe4e14fd32d54c792927 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Layout, | |
TopNavigation, | |
Button, | |
Modal, | |
Text, | |
} from '@ui-kitten/components'; | |
import React from 'react'; | |
import {SafeAreaView, StyleSheet} from 'react-native'; | |
const DemoModal = ({navigation}) => { | |
const [visible, setVisible] = React.useState(false); | |
const toggleModal = () => { | |
setVisible(!visible); | |
}; | |
return ( | |
<SafeAreaView style={{flex: 1, margin: 5}}> | |
<TopNavigation title="UI Kitten Modal Demo" alignment="center" /> | |
<Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> | |
<Button onPress={toggleModal}>DemoModal View</Button> | |
<Modal | |
backdropStyle={styles.backdrop} | |
onBackdropPress={toggleModal} | |
visible={visible}> | |
<Layout level="3" style={styles.modalContainer}> | |
<Text>Hi! This is modal.</Text> | |
</Layout> | |
</Modal> | |
</Layout> | |
</SafeAreaView> | |
); | |
}; | |
const styles = StyleSheet.create({ | |
backdrop: { | |
backgroundColor: 'rgba(0, 0, 0, 0.5)', | |
}, | |
modalContainer: { | |
justifyContent: 'center', | |
alignItems: 'center', | |
width: 256, | |
padding: 16, | |
}, | |
}); | |
export default DemoModal; |
No Mehmet Salih, I can't able to find the solution for this issue. Instead of using UI Kittens Modal, I Implement React Native Alert for my use case. Link Here. If you find solution for this issue, please don't forget to mention it here. this will help others to fix the problem.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi ikismail ,
I have same problem with ui kitten modal component.Did you solve this modal problem? I search on the web i could not any solution.i used last version "@eva-design/eva": "^2.0.0-alpha.1", "@ui-kitten/components": "^5.0.0-alpha.1", "@ui-kitten/eva-icons": "^5.0.0-alpha.1",