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}}
/>
);
}
}
Related
I'm attempting to build a website using React Native Web,
and have been stuck on trying to display my website using Expo.
My expectation is that I will be able to see it when I click "Run in web browser"
(it should open a blank page with an intro text)
but it only returns back to the Expo page.
What am I doing wrong?
You can use WebView to display web pages on React Native Expo apps.
First, install react-native-webview by this command.
expo install react-native-webview
Then you could add this WebView as shown below.
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://expo.dev' }}
/>
);
}
You can also insert custom web (html) page like this:
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ html: '<h1><center>Hello world</center></h1>' }}
/>
);
}
To know more you can read this doc expo webview
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.
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 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";
How to hide status bar in Android w/ React Native?
https://facebook.github.io/react-native/docs/statusbarios.html#content
You no longer need to install a dependency to hide the status bar in react-native. The following should work for both Android and iOS.
To hide the StatusBar you can use the component straight from react-native. It is listed in the documentation here.
You can use it in two different ways. One as a component, and the other imperatively. For both you import it from react-native.
import { StatusBar } from 'react-native';
Component
In side your render:
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} /> // <- you could set this from a value in state
...
</View>
);
}
Imperatively
This allows you to hide it via a function call.
componentDidMount () {
// doesn't have to be in the componentDidMount it could be in some other function call.
StatusBar.isHidden(true);
}
<StatusBar backgroundColor={'transparent'} translucent={true} />
:D
You can try react-native-android-statusbar
.
var StatusBarAndroid = require('react-native-android-statusbar');
StatusBarAndroid.hideStatusBar()