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.
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'm using React Native Paper library and I have a Modal and Dialog, I want to dialog to appear in front of the modal... is there a way to do this?
If there's no way I would have to code the structure of a dialog on my own using a Modal and I'd rather not do that...
Thanks
I had same problem and I solved it by using both react-native-paper and react-native's Modal.
react-native: 0.63.2
react-native-paper: 2.16.0
import {Modal as RNModal} from 'react-native';
import {Modal, Portal} from 'react-native-paper';
return (
<Portal>
<Modal>
<View>
...content for the view
</View>
<RNModal visible={props.visible} transparent={true}>
<Dialog visible={props.visible} onDismiss={props.onDismiss}>
...content for dialog
</Dialog>
<RNModal>
</Modal>
</Portal>
);
RNModal causes the inner dialog to always be on top.
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
I would like to open a link "in-app" without leaving a React Native app. The idea would be to open a webview on top of the application when clicking the link like Gmail or Messenger do.
Is there a way to do this in React Native?
Yes. You can create a new screen, with a rendered WebView inside.
You may refer to this link: https://docs.expo.io/versions/latest/react-native/webview/#__next
In your router, (if you're using react-navigation) you can just use "modal" for your navigation's mode.
this is very simple
import React, {Component} from 'react';
import {WebView} from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
I am using Firebase Server on Node together with RN. I wanted to use GetStream.io in my app. The backend works fine, but an example from GetStream.io documentation for frontend doesn't work, I just get this error.
I tried to insert attribute though it doesn't exist in GetStream.io example. I still receive this error.
This is how my code looks like:
import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import { StreamApp } from 'react-native-activity-feed';
import { Text, View } from "react-native";
const newsFeed = () => {
return (
<View>
<SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
<StreamApp
apiKey="myapikey"
appId="myappid"
token="mytoken"
/>
</SafeAreaView>
</View>
);
};
export default newsFeed;
https://getstream.io/react-native-activity-feed/tutorial/ link to official guide from GetStream.io
Based on the error message, it seems like your newsFeed component is rendered inside a Text element.
Here's the link to the check in RN that raise this error -> https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.js#L44
Eg. this JSX code would trigger the same error:
<Text>
< newsFeed />
</Text>
Assuming this is the case (or a variation of it) you can fix this problem very easily by wrapping your component in a <View> and remove <Text> when not necessary.
So what I found out.
The problem was because of this line:
import SafeAreaView from 'react-native-safe-area-view';
What you should do is following:
import { SafeAreaView } from "react-native";