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
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
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;
I am trying to decide on the best way to set up routing in my React Native Web project. I am using expo and followed this guide to use Next JS https://docs.expo.io/versions/latest/guides/using-nextjs/ so I have App.js like this:
import index from "./pages/index";
import alternate from "./pages/alternate";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator(
{
index,
alternate
},
{
initialRouteName: "index"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
My concern is how best to handle routing. I have my index.js page setup like this currently.
import * as React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'
export default function App ({navigation}) {
return (
<View style={styles.container}>
{/* Native route */}
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
{/* Web route */}
<Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
A universal link
</Text>
</View>
);
}
As you can see this is currently requiring separate code to render a Native vs Web route. I am wondering what is the best way to handle this sort of rendering. I looked into using React Navigation for web and wouldn't be opposed to this but it seems like I should probably stick with the Next Router.
Thanks in advance for any advice on handling conditional rendering like this.
Use reactnavigation web support for that
https://reactnavigation.org/docs/en/web-support.html
import { createSwitchNavigator } from "#react-navigation/core";
import { createBrowserApp } from "#react-navigation/web";
const MyNavigator = createSwitchNavigator(routes);
const App = createBrowserApp(MyNavigator);
// now you can render "App" normally
There is import { Platform } from 'react-native':
{Platform.OS === 'web' ? (
<Text
style={styles.link}
accessibilityRole="link"
href={`/alternate`}
>
A universal link
</Text>
) : (
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
)}
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;
Card component from shards-react isn't working
When I run react-native run-android I get an Error:
View config not found for name div.Help please thanks.
import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, Text, View, Alert, Image } from 'react-native';
import { Card } from "shards-react";
class User extends React.Component {
render() {
const { name, avatar, email} = this.props;
const userDetails = (
<View>
<Image style={styles.img} source={require('../assets/logo.jpg')} />
<Text>Name: {name} </Text>
<Text>Email: {email} </Text>
</View>
);
return (
<Card>
{userDetails}
</Card>
);
}
}
const styles = StyleSheet.create({
img:{
marginTop:250,
height:120,
width: 120,
borderRadius: 70,
}
});
User.propTypes = {
name: PropTypes.string,
avatar: PropTypes.string,
email: PropTypes.string,
isLoading: PropTypes.bool
};
export default User;
Is this library work only for web ? Not for mobile apps ?
If yes is there another one ?
shards-react by default uses <div> tag for building Cards. <div> is an invalid React Native Component. But shards-react allows passing other components to use instead of <div>. Try to pass tag prop to Card like this:
return (
<Card tag={View}>
{userDetails}
</Card>
);
If this won't help you, then this library cannot be used in react-native.