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";
Related
I am new to React Native and i am having trouble with the following error message:
text string must be rendered within a <Text> component
This is my component:
import React from "react";
import { Text, StyleSheet, View, Button } from "react-native";
const HomeScreen = () => {
return (
<View>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30,
},
});
export default HomeScreen;
My strings are wrapped within a Text component and the error message persists. Any typo am i not seeing or doing anything wrong?
Your error is likely somewhere else in your app. one way to test this is to comment out the component inside of your App component or wherever your Homescreen component is being called. It's more likely that wherever you're mounting HomeScreen, there is extraneous text. Perhaps something you missed when deleting the boilerplate code.
Give some width and height to your view ,or try give a flex of 1 :
Hope it helps.
<View style = {{flex:1}}>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
or
<View style = {{width:'100%',height:'100%'}}>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
I am using React Native version 0.63.4. There is a bug that I just noticed and that didn't happen before. It does -width: '100%' - as if I added it myself to the style of any object (Text, View) I created. This was not the case before. For example, I want to paint the background of a text red. But just as much space as it is. Not all. I would add -width: '100%' - if I wanted this. But now it adds this automatically. What is the cause and solution?
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
<View style={{flex: 1}}>
<Text style={{marginTop: 80, backgroundColor: 'red'}}>EXAMPLE</Text>
</View>
);
};
export default App;
Try this way because It will take full width by default, If you want to wrap then try adding alignSelf:"flex-start" like
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
...
<Text style={{... , alignSelf:"flex-start"}}>EXAMPLE</Text>
...
);
};
export default App;
I'm using Ionicons from #expo/vector-icons in some parts of my application. I'm trying to ensure that all pressable elements in my UI have some sort of visual feedback. I checked the vector-icons API and didn't find any relevant properties but I just want to ensure I know the best way to achieve this.
My guess is that I would have to wrap all of the <Ionicons /> in a TouchableOpacity or another component of its type, other than TouchableWithoutFeedback. Is this correct? Is there a more direct way to achieve this? And is my suggestion the way to go?
I don't think code is relevant here, but here it is anyway:
import React from 'react'
import { StyleSheet } from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import PropTypes from 'prop-types'
const HeaderIcon = (props) => {
return (
<Ionicons
style={styles.icon}
name={props.name}
color={props.color}
onPress={() => {
props.onPress()
}}
/>
)
}
You can wrap your icon component with TouchableHighlight
it has underlayColor property where you can pass color.
e.g
<TouchableHighlight onPress={onPress} underlayColor="red">
<View style={styles.button}>
<Text>Touch Here</Text>
</View>
</TouchableHighlight>
and also have two other underlay callbacks such as onShowUnderlay and onHideUnderlay these callbacks can be used in different scenarios
Like onShowUnderlay you can change icon color or trigger any other function.
So, i was trying to do a fade animation using react-native-animated API but unfortunately it does'nt gets animated when i try to render it on my android device. It just dont animate anything and screen is also blank but after sometime(say 30-40 secs) the text shows up with no animation. If i don't apply Animated.View than text shows up immediately or you can say normal rendering of content. Can anyone find what i am doing wrong with this code or what else should i add to make this work.
react-native-animatable version : 1.3.3
import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import { Card, } from 'react-native-elements';
import * as Animatable from 'react-native-animatable';
function History() {
return(
<View>
<Text style = {{margin:10}}>
Started in 2010, Eatsy quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.
</Text>
</View>
);
}
class Test extends Component{
render()
{
return(
<ScrollView>
<Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
<Card title ='Our History'>
<History />
</Card>
</Animatable.View>
</ScrollView>
);
}
};
export default Test;
Ok so now I got to know the solution after browsing internet for hours, you just have to add useNativeDriver='true' inside <Animatable.View> just like this:
<Animatable.View animation="fadeInUp" useNativeDriver='true' duration={2000} delay={1000}>
I am fairly new to react native, nativebase, and Exponent. Unfortunately, I am having trouble getting simple components even to display. I've spent probably 6+ hours troubleshooting simple tutorial components from the nativebase documentation. I feel like I'm just missing something fundamental and I would really appreciate a helping hand.
Here's what I'm doing:
Using Exponent XDE to run my project.
Installed nativebase according to the documentation, no errors at this point.
main.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Container } from 'native-base';
import { CardImageExample } from './component/card.js';
AppRegistry.registerComponent('main', () => CardImageExample);
card.js
import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';
class CardImageExample extends Component {
render() {
return (
<Container>
<Content>
<Card>
<CardItem>
<Thumbnail source={require('./img/penguin-icon.png')} />
<Text>Instrumental Songs</Text>
<Text note>Guitar</Text>
</CardItem>
<CardItem>
<Image style={{ resizeMode: 'cover' }} source={require('./img/penguin.jpg')} />
</CardItem>
<CardItem>
<Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
<Text>Listen now</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default CardImageExample;
Current error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I just have absolutely no idea where to start. Thanks.
Your main.js should like some thing Like
import * as Exponent from 'exponent';
import React from 'react';
import First from './src/app';
import { Container, Header, Title, Content, Button, Left, Right, Body,Icon, Separator } from 'native-base';
class App extends React.Component {
render() {
return <First / > ;
}
}
Exponent.registerRootComponent(App);
You have to register your app like this Exponent.registerRootComponent(App).
If you are using Exponent.
Example: https://github.com/exponent/nativebase-example