I have created a function that returns WebView
const WebviewComponent = () => (
<webview id="test" src="https://www.google.com" style={{ height: "700px", width:"800px", autoSize:"on", minWidth:"576", minHeight:"432" }} />
)
and I called this function in app.js. When I try to launch the application the src url is not loading.
WebView source type is not a string. You should check WebView documentation or see the usage below to understand how it works.
Usage
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
class MyWebComponent extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
In your case, It will be
const WebviewComponent = () => (
<WebView
style={{ flex: 1 }}
source={{ uri: 'https://www.google.com' }} />
)
Related
import { SafeAreaView, ScrollView, StyleSheet, View, Text } from 'react-native';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Container, Content, List, ListItem } from 'native-base';
import Video from 'react-native-video';
function VideoListScreen({ navigation }) {
return (
<Container>
<Content>
<List>
<ListItem onPress={()=> navigation.navigate('Video Player', {
external: true,
videoURL: 'https://www.w3schools.com/html/mov_bbb.mp4'
})}>
<Text>External video source</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
function VideoPlayerScreen({ route, navigation }) {
const {external, videoURL } = route.params;
return (
<Container>
<Video
source={{uri: videoURL}} // Can be a URL or a local file.
style={styles.backgroundVideo}
/>
</Container>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name ='Video List' component={VideoListScreen} />
<Stack.Screen name ='Video Player' component={VideoPlayerScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
I want to play video when the user taps on the item in the list, but right now im getting an error -> Component Exception, undefined is not an object (evaluating 'RTCVideoInsance.Constants'),
this is the video player library im using https://github.com/react-native-video/react-native-video.
Thanks for the help
Running pod install in cd ios after yarn install
source : https://github.com/react-native-video/react-native-video/issues/1502
if you already install pod then try to clean xcode project and then build again.
This will help if developing with expo
1). expo install expo-av
2). Your App.js should be look like this.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Video } from 'expo-av';
export default class App extends React.Component {
render(){
return (
< View style={styles.container} >
< Text >Open up App.js to start working on your app!< / Text >
< Video
source={{ uri: 'https://www.yourdomain.com/uploads/video_file.mp4' }}
shouldPlay
useNativeControls
style={{ width: "100%", height: "50%" }}
/>
</ View >
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
3). Then expo start
Before I begin, I'd like to say that there were other questions that were answered that had a similar problem but none of those solutions worked for me. I just started using React Native Expo today and I'm finding the navigation part a little difficult. Take a look at the code:
App.js
import React, { Component } from 'react';
import HomePage from './HomePage'
import DetailsPage from './DetailsPage'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="HomePage" component={HomePage} />
<Stack.Screen name="DetailsPage" component={DetailsPage} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I've got 2 .js files that represent 2 pages of my app, here's the code for those files:
HomePage.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';
export default function HomePage() {
// Create a temporary list to populate the table view
const [orders, setOrders] = useState([
{ company: 'Airbnb', date: '20/02/2020', author: 'Mohammed Ajmal', itemOrdered: 'Sack Craft paper', id: '1' },
{ company: 'Apple', date: '15/01/2020', author: 'Ilma Ajmal', itemOrdered: 'Multiwall paper sacks', id: '2' },
{ company: 'Google', date: '30/12/2019', author: 'Rifka Ajmal', itemOrdered: 'Rigid paper sacks', id: '3' },
{ company: 'Facebook', date: '29/06/2020', author: 'Fahim Khalideen', itemOrdered: 'Paper bags', id: '4' },
])
return (
<View style={styles.container}>
<SafeAreaView>
{/* Create the table view */}
<FlatList
style = {styles.tableView}
data = {orders}
keyExtractor = {(item) => item.id}
renderItem = {({ item }) => (
<TouchableOpacity style = {styles.tableViewItem} onPress = {() => {
navigation.navigate('DetailsPage')
}}>
<Text style = {styles.companyName}>{ item.company }</Text>
<Text style = {styles.date}>{ item.date } | { item.author }</Text>
<Text style = {styles.itemOrdered}>{ item.itemOrdered }</Text>
</TouchableOpacity>
)}
/>
</SafeAreaView>
</View>
);
}
// Stylesheet
DetailsPage.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function DetailsPage() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
What I'm trying to create is a table view, when clicked, it should take the user to the Details page, but I'm getting an error saying
Can't find variable: navigation
I tried almost everything I could find in Stack Overflow but nothing helped me, maybe because the code in those answers were different and I couldn't understand how to make it work for mine.
You are not having a parameter for the navigation change the
line
export default function HomePage() {
to
export default function HomePage({navigation}) {
And it will work.
Or you could make use of the withNavigation when using a class component.
import { withNavigation } from 'react-navigation';
class DetailsPage extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
}
export default withNavigation(DetailsPage);
When following the Algolia docs (https://www.algolia.com/doc/api-reference/widgets/react/) to setup a simple search of the Alogila index with the following code
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Text, View, StyleSheet, Button, TextInput} from 'react-native';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Index, SearchBox, Hits } from 'react-instantsearch-dom';
const searchClient = algoliasearch(
'**********', //app ID
'************************' //app key
);
class MyApp extends Component {
constructor(props){
super(props);
}
render(){
return (
<View style={{
flex: 1,
alignItems: "center",
flexDirection: "column",
paddingTop: 20
}}>
<InstantSearch
searchClient={searchClient}
indexName="dev_INVENTORY">
<SearchBox/>
</InstantSearch>
</View>
)}
};
const styles = StyleSheet.create({});
export default MyApp;
I get the error 'Invariant Violation: View config not found for name input. Make sure to start component names with a capital letter.
This error is located at in input (created by Searchbox)....'
When I remove the SearchBox code the app functions fine but as soon as I add it i come across the error, but clearly all the elements are capitalized correctly (unless i've made a ridiculous silly oversight!?)
I wondered if the error was related to this persons issue;
Using Algolia react-instantsearch with react-native but i dont think it is.
If anyone has any suggestions just so I can get started with searching Algolia that would be ace as I'm a bit stuck!
The issue is that you're trying to use some widgets from react-instantsearch-dom which are not compatible with React Native.
For React Native you'll need to use the connectors instead of the widgets: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/#using-connectors-instead-of-widgets
In your case it should give you something like:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TextInput } from 'react-native';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, connectSearchBox } from 'react-instantsearch-native';
const searchClient = algoliasearch(
'**********', // app ID
'************************' // app key
);
class SearchBox extends Component {
render() {
return (
<View>
<TextInput
onChangeText={text => this.props.refine(text)}
value={this.props.currentRefinement}
placeholder={'Search a product...'}
clearButtonMode={'always'}
spellCheck={false}
autoCorrect={false}
autoCapitalize={'none'}
/>
</View>
);
}
}
SearchBox.propTypes = {
refine: PropTypes.func.isRequired,
currentRefinement: PropTypes.string,
};
const ConnectedSearchBox = connectSearchBox(SearchBox);
class MyApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View
style={{
flex: 1,
alignItems: 'center',
flexDirection: 'column',
paddingTop: 20,
}}
>
<InstantSearch searchClient={searchClient} indexName="dev_INVENTORY">
<ConnectedSearchBox />
</InstantSearch>
</View>
);
}
}
const styles = StyleSheet.create({});
export default MyApp;
I have a website written with React (https://new.sacatucita.com/).
On my website, I have a search bar using react-select (https://github.com/JedWatson/react-select).
I want to make an application showing my website with React Native, so I have this code:
import React from "react";
import { WebView } from "react-native-webview";
export default function App() {
return (
<WebView
originWhitelist={["*"]}
source={{ uri: "https://new.sacatucita.com/" }}
/>
);
}
The problem is that when I open my application and click on the search bar, the keyboard and results do not show. It appears that the click has no effect. I need to first click elsewhere (like on the title text for example), and then the search bah will work.
I already tried to select the webview with the ref:
ref={ref => {
const e = ref && ref.webViewRef && ref.webViewRef.current;
e && e.focus();
}}
And to click injecting HTML:
const js = `
const e = document.getElementsByTagName("h1")[0];
e.click();
`;
export default function App() {
return (
<WebView
originWhitelist={["*"]}
source={{ uri: url }}
injectedJavaScript={js}
/>
);
}
I found out that the problem is only present on android devices.
Is there a solution?
When you do this, the keyboard will come out normally.
I made a link so you could test it yourself.
import React, {Component} from 'react';
import {WebView} from 'react-native';
class App extends Component {
render() {
return (
<WebView
source={{uri: 'https://new.sacatucita.com/'}}
style={{marginTop: 20}}
/>
);
}
}
export default App;
I am currently learning React Native.
I just a built a very simple app to test out the Button component.
When I click on the button component the console log is printed as expected.
But after printing out the console log it pops out the following error.
**undefined is not an object (evaluating '_this2.btnPress().bind')**
I am not sure what is wrong ?
Can anyone let me know what I am doing wrong ?
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class App extends React.Component {
btnPress() {
console.log("Fn Button pressed");
}
render() {
return (
<View style={styles.container}>
<Button title="this is a test"
onPress={()=> this.btnPress().bind(this)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You are invoking the function instead of passing a reference through bind.
loose the ().
And you should not wrap it with an arrow function as bind is already returning a new function instance
onPress={this.btnPress.bind(this)} />
By the way, this will return and create a function instance on each render, you should do it once in the constructor (which runs only once):
export default class App extends React.Component {
constructor(props){
super(props);
this.btnPress = this.btnPress.bind(this);
}
btnPress() {
console.log("Fn Button pressed");
}
render() {
return (
<View style={styles.container}>
<Button title="this is a test"
onPress={this.btnPress} />
</View>
);
}
}
Or use an arrow function which uses a lexical context for this:
export default class App extends React.Component {
btnPress = () => {
console.log("Fn Button pressed");
}
render() {
return (
<View style={styles.container}>
<Button title="this is a test"
onPress={this.btnPress} />
</View>
);
}
}