I simply import Modal from react-native and run simple test.
I found out that if I reload with <Modal visible={true}> it just crash my app. It wont reload until I re-open it, it works perfectly fine when reload with visible={false}
import React , {Component} from 'React';
import {View,Modal,Text} from 'react-native';
export default class Test extends Component{
render(){
return(
<View>
<Modal visible={true} >
<Text>Before Reload</Text>
<Text>when reload only Before reload show up ,no-error or any information</Text>
</Modal>
</View>
)
}
}
!Update. Found out it's a feature. gonna leave it here in case beginner facing the same problem
Why do you want you modal to be opened by default in a class.
Only make the modal open when you need that i.e on button press etc. If it's open by default try rendering a class instead of a modal
import React , {Component} from 'React';
import {View,Modal,Text} from 'react-native';
export default class Test extends Component{
render(){
return(
<View>
<Modal visible={this.state.modalVisibile} > //This is boolean value and update it's value on a button press.
<Text>Before Reload</Text>
<Text>when reload only Before reload show up ,no-error or any information</Text>
</Modal>
</View>
)
}
}
Also, if the modal is opened by default it will cause many issues
Related
First of all this is my first question ever so i apologies if it wastes anyones time.
Currently i've been trying to see if i can use tailwind with reactNative for one of my school projects.
I've run into a problem postsetup (i assume postsetup).
The following code when exported to the web using expo start web displays indigo text and a black background in at the top of the browser.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black">
<Text className="text-indigo-500">Open up App.js to start working on
your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
Now when i do the following:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black items-center">
<Text className="text-indigo-500">Open up App.js to start
working on your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
I've now added items-center to the view, and suddenly it doesn't display the background-color or align the text at the center. Why is this?
React components by default do not support tailwind. However, NativeWind makes it possible to use tailwind in react native
I want to create a pop-up in react-native using Modal. Modal should be a created in such a way that it can be reused. Please let me know how to do this as I am new to react-native.
First you will need one state to control when the modal will show.
const [show, setShow] = useState(false)
And then when the condition was achieved, you will set this state to true and show the modal, I will let one example.
<TouchableOpacity
onPress={setShow(true)} />
//some icon
</TouchableOpacity>
Now you will use show to control your modal, but first let's create the modal component. You will create one js file and create the modal component inside it.
import React from 'react'
import {Modal, View, Text} from 'react-native'
const Modal = ({message, buttonMessage, show, setshow}) => {
return (
<Modal
animationType='slide'
transparent={true}
visible={show}
backgroundColor='white'
>
//What you want to show inside the modal, Views, Text, whatever, you will construct one 'screen' here
<View>
<Text>{message}</Text> //Showing the message
<Button
title={buttonMessage}
onPress={setShow(false)} //To not show the modal for example
/>
</View>
</Modal>
)}
export default Modal
Modal component are receiving at the start message and buttonMessage, so you can pass what you want to the component receive and then use it inside your code, and now when you invoke Modal you will pass message and buttonMessage as props to it use, you will see how. Note that Modal are being exported at the end, so now you can use import it in any screen that you want show it.
Let's suppose that you have one screen and will invoke the Modal component that you create.
import React, {useState} from 'react';
import { View, Text} from 'react-native';
import Modal from 'patch' //Note, patch will be where is the modal file that you create
const ContentCompenent = () => {
const [show, setShow] = useState(false)
return (
<View>
// Your screen content
// Your screen content
//Now you will invoke the Modal
<Modal message={'your message or your variable with the message'} buttomMessage={your message or your variable with the message} show={show} setShow={setShow} />
</View>
//When you setShow here to true, the modal will appears, and as you are passing setShow as prop to Modal, when you setShow(false) in the modal it will disappears.
I know there is a question here in stackoverflow react native modal always visible but didn't solve my problem.
My code:
import * as React from 'react'
import {Text, View, Modal} from 'react-native'
export default function App() {
return (
<Modal animationType="slide" visible={false}>
<Text>Hello World :)</Text>
</Modal>
)
}
the problem is I hardcoded visible to false but again it is visible. How can this be fixed?
I have created an example here for you with react-native modal and using you code,
https://snack.expo.io/#waheed25/modalexample
You are rendering only modal
if it still not works for you add your code in the same snack.
So, i was trying to do a fade animation using react-native-animated API but unfortunately it does'nt gets animated when i try to render it on my android device. It just dont animate anything and screen is also blank but after sometime(say 30-40 secs) the text shows up with no animation. If i don't apply Animated.View than text shows up immediately or you can say normal rendering of content. Can anyone find what i am doing wrong with this code or what else should i add to make this work.
react-native-animatable version : 1.3.3
import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import { Card, } from 'react-native-elements';
import * as Animatable from 'react-native-animatable';
function History() {
return(
<View>
<Text style = {{margin:10}}>
Started in 2010, Eatsy quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.
</Text>
</View>
);
}
class Test extends Component{
render()
{
return(
<ScrollView>
<Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
<Card title ='Our History'>
<History />
</Card>
</Animatable.View>
</ScrollView>
);
}
};
export default Test;
Ok so now I got to know the solution after browsing internet for hours, you just have to add useNativeDriver='true' inside <Animatable.View> just like this:
<Animatable.View animation="fadeInUp" useNativeDriver='true' duration={2000} delay={1000}>
i'm working on my first react native app that uses the Navigator and i have encountered an issue. Anytime i press on the <TouchableOpacity /> to make the push to the navigator, the app freezes and can't be press again.
here's my code
```
import React, { Component } from 'react';
import {AppRegistry, Navigator, Text, TouchableOpacity} from 'react-native';
import App from './src/App';
import SinglePost from './src/components/SinglePost';
class AppNavigator extends Component{
renderScene(route, navigator){
var navProps = {navigator};
switch (route.id) {
case "postsList":
console.log(route)
return (
<TouchableOpacity onPress={() => navigator.push({id:'yes'})}>
<Text>Hey</Text>
</TouchableOpacity>
)
case "singlePost":
return <SinglePost title="Post"/>
case "yes":
console.log("yes route ",route)
return <Text>Yes</Text>
default:
return <Text>Yes</Text>
}
}
render(){
return (
<Navigator
initialRoute={{id: "postsList"}}
renderScene={this.renderScene}
/>
)
}
}
AppRegistry.registerComponent('SocialMe', () => AppNavigator);
```
When I click the yes, it just freezes, any explanation for this and how can I resolve this? Thanks
Found the problem. I noticed that this only happens when I'm debugging Js remotely. If I disable it, then all works fine