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.
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 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
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 use react-native to create ios and android app
I create a test app with TabNavigator working good plus a sidemenu ( the button to open it should be in the top action bar ) and floatings actions buttons (the red circle labeled FAB on the picture). All this code is new defined on first tab : app.js.
Each tab have it's own js file with code and render.
My question is :
How to get this sidemenu,action bar and floating buttons on ALL tabs without coping all the render code and js functions over all the other tabs Js files.
when i click on a tab only the green part will change
my App.js
import React, { Component } from "react";
import {...} from "react-native";
import { TabNavigator } from "react-navigation";
import Imagetest from "./Photo";
import ListFlatlist from "./ListFlatlist";
... // importing the other file for the tabs
import styles from "./css/styles";
import SideMenu from "react-native-side-menu";
import Menu from "./Menu";
class App extends Component {
constructor(props) { ... }
...
render() {
const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
return (
<SideMenu
menu={menu}
isOpen={this.state.isOpen}
onChange={isOpen => this.updateMenuState(isOpen)}
>
<View style={styles.container}>
{/* my app.js content
*/}
// this is floating buttons
<ActionButton buttonColor="rgba(231,76,60,1)">
<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
<Icon name="md-create" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
</SideMenu>
);
}
}
const AppNavigator = TabNavigator(
{
H: { screen: App },
f: { screen: ListFlatlist },
Img: { screen: Imagetest },
B: { screen: Buttonpage },
S: { screen: ListSectionlist },
F: { screen: Fetchpage }
}
);
export default AppNavigator;
If a create new components for sidemenu, action bar and FAB I have to put them on all the tab render, not the cleanest way for me but i don't see other solution now.
I put an example repo together on Github. Thats actually all it needs:
// #flow
import React, { Component } from "react";
import { View } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import ActionButton from "react-native-action-button";
import Profile from "./Profile";
import Tab1View from "./Tab1";
import Tab2View from "./Tab2";
import Tab3View from "./Tab3";
const TabView = TabNavigator({
tab1: { screen: Tab1View },
tab2: { screen: Tab2View },
tab3: { screen: Tab3View },
})
const Home = (props) => {
return (
<View style={{flex: 1}}>
<TabView navigation={props.navigation} />
<ActionButton offsetY={100} />
</View>
);
}
Home.router = TabView.router;
const StackView = StackNavigator({
home: { screen: Home },
profile: { screen: Profile },
});
export default class App extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<StackView />
</View>
);
}
}