I have several modals in jsx
<View>
<Modal id="first" visible>
<View>
<Text>123</Text>
<Button onPress={() => this.setState({ secondVisible: true })}>Open Modal</Button>
</View>
</Modal>
<Modal id="second" visible={this.state.secondVisible}>
<View>
<Text>123</Text>
</View>
</Modal>
</View>
I open #first than inside it i press button and do #second visible.
Is it possible to give some zIndex to #second so it can be always on top.
Modal in Modal i cant do because its sharable so can be opened from several places
Related
I Had this code with sticky component on the header, how can i move this to the bottom, like footer button on instagram (when you open the app, it already stick in the bottom) ? here's my code
function MyApp() {
return (
<ScrollView
stickyHeaderIndices={[0]}
showsVerticalScrollIndicator={false}>
<View>
<MyStickyFooter/>
</View>
<View>
<Text> Hello world </Text>
<Text> 3000 long lorem word </Text>
</View>
</ScrollView>)}
const MyStickyFooter = () => {
return (
<View style={{}}>
<Button> I am a sticky footer </Button>
</View>
)};
You should move out the MyStickyFooter component from your ScrollView.
You should have something like this:
<View style={....}>
<ScrollView>
... components
</ScrollView>
<MyStickyFooter/>
</View>
I'm creating an application where I'm using a MaterialBottomTabBar and in the Home Screen I've a button which are supposed to open up a <Modal>.
After investigating this for quite some time I found out that I cannot present the modal when using the tabbar. I've tried to put the modal in all my tabbar-screens (without any success). And then moved the modal over to another screen which are not included in the tab-bar and the modal worked perfectly fine.
export default function Home({ route, navigation }){
const [modal, setModal] = useState(false)
return(
<View style={styles.container}>
<Modal visible={modal} transparent={true}>
<View style={{height: "100%", width: "80%", backgroundColor: "blue"}}>
<Text>TIFMNASIFAMNFISAMFIAOFMSAOFMAFOPSAMF</Text>
</View>
</Modal>
<TouchableOpacity style={styles.addNewButton} onPress={() => setModal(true)}>
<Text style={styles.addNewButtonText}>+</Text>
</TouchableOpacity>
</View>
)
}
As you can see i'm using the React Native Hooks useState(false) and refers to it inside the Modal. But whenever I tap the <TouchableOpacity> the modal is not being presented.
NOTE!
The modal is being presented if I replace the
<Modal visible={modal} transparent={true}>
to
<Modal visible={true} transparent={true}>
But would be runned instantly, which is not an option in my case.
Do you have any idea how I can run this modal inside the screen?
My code:
{this.state.News.slice(0, this.state.currentShow).map((item) => {
return (
<View>
<View>
<View>
<Text>{item.Title}</Text>
<Text>{item.Content}</Text>
</View>
<View>
<Image source={{uri: item.Image}} />
</View>
</View>
<View>
<Text>{item.creationTime}</Text>
<Button onPress={this.gotoNews(item.Id.toString())}>
<Text>Load More</Text>
</Button>
</View>
</View>
)
})}
Whenever this page is run, Everything is right But why the button onPress runs when the react native screen is loaded!!
Try to change your button handler call from a function call to a function
you can use ES6 arrow functions to do this :
<Button onPress={()=>this.gotoNews(item.Id.toString())}>
<Text>Load More</Text>
</Button>
enter code hereI want to show a toast when my modal is visible in my react native project.
I use react-native-modal.
I have a button in modal when i press it should show up a toast
I don't want to put my toast tag inside the modal tag
what should i do???
render(){
return(
<>
<Modal visible={this.state.visible}>
<Toast
ref="toast"
style={{backgroundColor:'red'}}
position='bottom'
positionValue={100}
fadeInDuration={1000}
fadeOutDuration={1000}
opacity={0.8}
textStyle={{color:'blue'}}
/>
<SafeAreaView style={{flex:1}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={()=>this.refs.toast.show('hello world!')} style={{height:200,width:100,justifyContent:'center',alignItems:'center',backgroundColor:'blue'}}>
<Text>Modal Button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Modal>
<SafeAreaView style={{flex:1}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={()=>{this.setState({visible:true})}} style={{height:100,width:100,justifyContent:'center',alignItems:'center',backgroundColor:'red'}}>
<Text>button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</>
)
}
Actually i wanna be my toast out of my Modal tag but it show in top of screen when modal is visible
react native modal is a native view, so impossible to be covered by a js component.
We have a FilterComponent which renders a Modal, but on iPhone X it's Header is in the Statusbar.
I tried to render it with SafeAreaView but seems like this is not working:
return (
<SafeAreaView>
<Modal
{ ...defaultModalProps }
onRequestClose={ close }
style={ styles.container }
visible={ visible }
>
<ModalNavbar close={ close }>
Filter
</ModalNavbar>
<View style={ styles.content }>
...
</View>
</Modal>
</SafeAreaView>
);
When FilterModal is openend on iPhoneX it still is in the Statusbar and you cant click on anything.
Any idea how to solve this?
thanks.
Put SafeAreaView inside the Modal component
return (
<Modal
{...defaultModalProps}
onRequestClose={close}
style={styles.container}
visible={visible}
>
<SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
<ModalNavbar close={close}>Filter</ModalNavbar>
<View style={styles.content}>...</View>
</SafeAreaView>
</Modal>
);
if you use react-native-safe-area-context and you have a problem with modal then
<Modal>
<SafeAreaProvider>
<SafeAreaView>
// your modal content
</SafeAreaView>
</SafeAreaProvider>
</Modal>
A Modal fill the entire screen, so you need to provide extra spacing inside the Modal. Margin / Padding will not effect on Modal if applied on parent of Modal.
<Modal {...}>
<TouchableWithoutFeedback onPress={closeModal}>
<SafeAreaView {...}>
{...}
</SafeAreaView>
</TouchableWithoutFeedback>
</Modal>