React Native: play video error Component Exception - reactjs

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

Related

webview element is not loading in reactjs application?

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' }} />
)

React Navigation does not work with React Native Web

I am trying to implement react navigation in web. I am using react-native-web to build web apps.
Here is my code:
import React from 'react'
import {
View,
StyleSheet,
Dimensions
} from 'react-native'
import { createSwitchNavigator } from "#react-navigation/core"
import { createBrowserApp, Link } from "#react-navigation/web"
import { ApplicationProvider, Text, Button, Icon, Layout, Spinner } from '#ui-kitten/components'
import * as eva from '#eva-design/eva'
class App extends React.Component{
static navigationOptions = {
title: "Home"
}
static path = ""
render(){
return(
<ApplicationProvider {...eva} theme={eva.light}>
<Layout style={styles.container}>
<Text style={{textAlign: 'center'}}>Home Screen</Text>
<Link routeName="Chat">Go to Chat</Link>
</Layout>
</ApplicationProvider>
)
}
}
class Chat extends React.Component{
static navigationOptions = {
title: "Chat"
}
static path = "chat"
render(){
return(
<ApplicationProvider {...eva} theme={eva.light}>
<Layout style={styles.container}>
<Text style={{textAlign: 'center'}}>Chat Screen</Text>
</Layout>
</ApplicationProvider>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap',
height: Dimensions.get('window').height
}
});
const MyNavigator = createSwitchNavigator({
Home: App,
Chat: Chat
})
const BWeb = createBrowserApp(MyNavigator)
export default BWeb
When I try to run it, it shows this error in browser:
TypeError: (0 , _core.withNavigation) is not a function
Here is a screenshot
It builds successfully. But the error appears in browser. I have the latest libraries installed.
"react-native": "^0.63.3",
"react-native-web": "^0.13.16",
"#react-navigation/core": "^5.12.4",
"#react-navigation/web": "^1.0.0-alpha.9"
I am using yarn to install libraaries.
I am newbie in building web apps with react.
Please help me to get through this
You shouldn't use #react-navigation/core and #react-navigation/web for web integration.
You can follow the web support documentation for web integration: https://reactnavigation.org/docs/web-support

How to use React Navigation Drawer with Next.js?

I'd like to use the React Navigation v5 (Drawer navigation) with Next.js but I have a question about their integration.
In short: React Navigation (Drawer navigation) based on the React Navigation Screens component.
It conditionally renders the correct Screen.
The problem is: Next.js has it's own routing system based on the Folder structure. eg. each file in /pages folder automatically generates an appropriate route so I can't add these files as a React Navigation Screen (at least I'm not sure it's possible at all)
How to make these tools to work together and save the Next.js SSR feature?
Example of the React Navigation Drawer:
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Thanks for any help!
You should use file based routing system from Nextjs on web and do your own navigation on mobile using React Navigation.
Below is my approach,
// this is how your directory might look like
- pages/
- index.tsx // this is your entry point for web
- about.tsx
App.tsx // this is your entry point for native
// pages/index.tsx
import React from 'react';
import { Text, View } from 'react-native';
const Home: React.FC = () => (
<View>
<Text>Welcome to Expo + Next.js 👋</Text>
</View>
);
export default Home;
// pages/about.tsx
import React from 'react';
import { Text, View } from 'react-native';
const About: React.FC = () => (
<View>
<Text>This is about page!</Text>
</View>
);
export default About;
Define your navigator for native app in App.tsx, it will only work on mobile so it doesn't have to be the same as what you have in pages/ folder. (actually if you only want your app run in browser, you don't need it at all.
Nextjs will handle all the route things, SSR etc... just like a normal Nextjs app when you run it in a browser.
// App.tsx
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import Home from '../pages/index';
import About from '../pages/about';
const Drawer = createDrawerNavigator();
const App: React.FC = () => (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="About" component={About} />
</Drawer.Navigator>
</NavigationContainer>
);
export default App;
The important thing is how should you change routes when you have your navigation on native app but an automatically routing system on web?
There is a package to solve this expo-next-react-navigation, check the documentation for details! Make sure you're using the correct version of this package, if you're using React Navigation 5, you should install expo-next-react-navigation#1.1.6 at this moment.
And here is an example, it should work on both platforms,
import React from 'react';
import { FlatList, Text } from 'react-native';
import { Link } from 'expo-next-react-navigation';
const links = [
{ key: 'home', route: '' },
{ key: 'about', route: 'about' },
];
const Links: React.FC = () => (
<FlatList
data={links}
renderItem={({ item }) => (
<Link routeName={item.route}>
{item.key}
</Link>
)}
/>
);
export default Links;

Can’t find variable navigation in react native expo

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);

How to navigate other screen by declaring another class inside of the first class using react navigation

I'm currently new here on this react native, I got confuse regarding switching my screen to another screen, I don't know why my import second screen not working when i click the onpress function declared to my first screen.,
import SecondScreen from './Screens/SecondScreen';
export default class FirstScreen extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Header searchBar rounded>
<Left>
<Button transparent>
<Icon name='menu'/>
</Button>
</Left>
<Body>
<Title>Pay Bills</Title>
</Body>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
<StatusBar backgroundColor='#6633ff' barStyle='light-content' />
<Text>How much would you like to pay?</Text>
<View style={{flex:1}}>
<Image onPress={()=> this.props.navigation.navigate('SecondScreen')} source={require('./Assets/example.png')}
style={{flex:1,width:null,height:null,resizeMode:'cover'}}
/>
</View>
</View>
);
}
}
As you can see I use the onpress function to navigate second screen.
onPress={()=> this.props.navigation.navigate('SecondScreen')}
My app.js file
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions} from 'react-native';
import {createDrawerNavigator, DrawerItems} from 'react-navigation';
//screens
import LoginScreen from './Screens/LoginScreen';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<AppDrawerNavigator/>
);
}
}
const AppDrawerNavigator = createDrawerNavigator({
Login:LoginScreen,
});
How to move my first screen to the second screen using react navigation.
thanks.
pass the route of second screen also in react navigation
then you can navigate to second screen
You need to make some change in app.js. add createDrawerNavigator inside createStackNavigator. Add those screen into stacknavigator in which you do not want to add into drawer. In createDrawerNavigator add those screens in which you want to show in drawer.
Please check following code
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions
} from "react-native";
import { createStackNavigator,createDrawerNavigator DrawerItems } from "react-navigation";
//screens
import LoginScreen from "./Screens/LoginScreen";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu"
});
type Props = {};
export default class App extends Component<Props> {
render() {
return( <StackNav />);
}
}
const StackNav = createStackNavigator(
{
Drawer: {
screen:AppDrawerNavigator ,
navigationOptions: {
headerMode: "none",
header: null
}
},
First: {
screen: First,
navigationOptions: {
headerMode: "none",
header: null
}
},
Second: {
screen: Second,
navigationOptions: {
headerMode: "none",
header: null
}
}
},
{
initialRouteName: "Drawer"
}
);
const AppDrawerNavigator = createDrawerNavigator({
Login: { screen: LoginScreen },
})

Resources