I am writing this code for a message screen
<Screen>
<FlatList
data={Message}
keyExtractor={(Message) => Message.id.toString}
renderItem={({ item }) => (
<ListItem
title={item.title}
subtitle={item.description}
image={item.image}
onPress={() => console.log("message selected", item)}
/>
)}
ItemSeparatorComponent={ListItemSeparator}
/>
</Screen>;
And getting this error :
ERROR Error: Text strings must be rendered within a <Text> component.
This error is located at:
in RCTView (created by View)
in View (created by Screen)
in Screen (created by MessagesScreen)
in MessagesScreen (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
You should check that is text undefined. Like that;
<ListItem
title={item.title ? item.title : ""}
subtitle={item.description ? item.description : ""}
image={item.image}
onPress={()=>console.log("message selected", item)}/>
Related
I am doing a project using react native. In that I faced the following error
(Note: I am creating an android app using react-native in that when I click on search bar I am facing the error as follows. Please help me to clear the error)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `SearchedProduct`.
in SearchedProduct (created by ProductContainer)
in RCTView (created by View)
in View
in Unknown
in Box
in Container
in ProductContainer (created by App)
in RCTView (created by View)
in View (created by App)
in $dac019021ac61f1f$export$9f8ac96af4b1b2ae (created by NativeBaseProvider)
in ToastProvider (created by NativeBaseProvider)
in PortalProvider (created by NativeBaseProvider)
in HybridProvider (created by NativeBaseProvider)
in ResponsiveQueryProvider (created by NativeBaseProvider)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by NativeBaseProvider)
in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
I am attaching my code here https://snack.expo.dev/#naheeda24/animal-feedmart. Can you please help me to solve this error
Thanks in advance
The root of the problem is located in CategoryFilter.js. In this component you are using ListItem from native-base. This component does not exist in native-base version 3.3.7 (I am unaware in which version it existed).
However, a ListItem was really just a View with some additional padding. Hence, you can remove ListItem and replace it with a View from react-native and add the styling you desire.
Here is the updated CategoryFilter.js.
import React from 'react';
import { StyleSheet, TouchableOpacity, ScrollView, View } from 'react-native';
import { Badge, Text} from 'native-base';
const CategoryFilter = (props) => {
return(
<ScrollView
bounces={true}
horizantal = {true}
style = {{ backgroundColor: "#f2f2f2" }}
>
<View style = {{ margin: 0, padding: 0, borderRadius: 0}}>
<TouchableOpacity
key={1}
// onPress{()}
>
<Badge
style={[styles.center, {margin: 5}]}
>
<Text style={{ color: 'white' }}>name</Text>
</Badge>
</TouchableOpacity>
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
center: {
justifyContent: 'center'
}
})
export default CategoryFilter;
I'm building a mobile app with React Native in an expo managed project and I'm using React Navigation. I'm using a Stack navigation and Tabbar navigation. I'm having trouble adding a simple button into the Stack screen header. My goal is to add an 'add' button on the right side of the header.
I followed the React Navigation documentation on how to add this button, but it didn't work, I'm getting this error:
Error: Text strings must be rendered within a <Text> component.
I added the headerRight option into Stack.Screen options as shown int the documentation, but it doesn't work and I get mentioned error.
Does anyone know how to fix this? Did anyone encountered the same problem?
Here is a link to my git repo with the whole project. The problem is with the PlaylistScreen.js file in screens folder.
Here is the code in question:
const PlaylistsScreen = () => {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator>
<Stack.Screen
name="PlaylistList"
component={PlaylistList}
options={{
headerTitle: "Playlisty",
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
</Stack.Navigator>
);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I have also tried this, which resulted in the same error:
const PlaylistsScreen = () => {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator>
<Stack.Screen
name="PlaylistList"
component={PlaylistList}
options={{
headerTitle: "Playlisty",
headerRight: () => (
<View>
<Text>{"right"}</Text>
</View>
),
}}
/>
</Stack.Navigator>
);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Here is my navigation structure:
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen/>
</Tab.Navigator>
</NavigationContainer>
The Tab.Screen contains a component with the Stack.Navigator like this:
<Stack.Navigator>
<Stack.Screen/>
</Stack.Navigator>
And that is the Stack.Screen I'm trying to add the header button to.
Here is the full error:
Error: Text strings must be rendered within a <Text> component.
This error is located at:
in div (created by Text)
in Text (created by HeaderConfig)
in div (created by View)
in View (created by HeaderConfig)
in RNSScreenStackHeaderSubview (created by ScreenStackHeaderRightView)
in ScreenStackHeaderRightView (created by HeaderConfig)
in RNSScreenStackHeaderConfig (created by HeaderConfig)
in HeaderConfig (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by PlaylistsScreen)
in PlaylistsScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenNavigationContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by Navigation)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Navigation)
in Navigation (created by App)
in ThemeProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
And here is a screenshot from an Android virtual device
image
Hey you were importing the native-web components which doesn't work on mobiles
change this import in your PlaylistsScreen.js
from
import { Button, Text, View } from "react-native-web";
to
import { Button, Text, View } from "react-native";
I am using the Stream IO Feeds API for React Native. I was trying to follow this example but ended up getting this error when trying to run the app:
Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.
This error is located at:
in FeedInner
in StreamAppConsumer (created by Feed)
in Feed (created by FlatFeed)
in FlatFeed (created by HomeFeed)
in StreamApp (created by HomeFeed)
in RCTView (created by View)
in View (created by HomeFeed)
in HomeFeed (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in SceneView (created by PagerViewAdapter)
in RNCViewPager (created by PagerView)
in PagerView (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by PagerViewAdapter)
in PagerViewAdapter (created by TabView)
in RCTView (created by View)
in View (created by TabView)
in TabView (created by MaterialTopTabView)
in MaterialTopTabView (created by MaterialTopTabNavigator)
in Unknown (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by SafeAreaView)
in SafeAreaView (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
I noticed that this issue appears whenever I am using a Stream Flatfeed with a React navigation container. When the feed is on its own (not part of any stack/tab navigation), it renders correctly. I am testing the app on Android using Node v16.13.1. Any tips on this?
I was able to reproduce this issue on a smaller app:
Import statements:
import React, { Fragment } from 'react';
import { Text, View } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import { StreamApp, FlatFeed, Activity, LikeButton, StatusUpdateForm, ReactionIconBar} from 'expo-activity-feed';
const Tab = createMaterialTopTabNavigator();
First tab (with Stream feed):
function Feed() {
return (
<StreamApp
apiKey={apiKey}
appId={appId}
token={token}>
<FlatFeed
Activity={props => (
<Fragment>
<Activity
{...props}
notify
Footer={
<ReactionIconBar>
<LikeButton {...props} />
</ReactionIconBar>
}
/>
</Fragment>)}/>
<StatusUpdateForm feedGroup='timeline' />
</StreamApp>
)
}
Second tab:
function Screen2() {
return (
<View style={{ flex: 1 }}>
<Text>Screen 2</Text>
</View>
);
}
Export (all of the code including the previous code is in App.js):
export default App = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer>
<Tab.Navigator
screenOptions={{
tabBarLabelStyle: { fontSize: 12 },
tabBarItemStyle: { width: 100 },
}}
>
<Tab.Screen name="Feed" component={ Feed } />
<Tab.Screen name="Screen2" component={ Screen2 } />
</Tab.Navigator>
</NavigationContainer>
</SafeAreaView>
</SafeAreaProvider>
);
};
We asked a similar question on the GitHub repo for GetStream and found that we needed to upgrade to Expo 44 and downgrade expo-activity-feed to version 1.0.0 and ensure it does not have the ^ at the end of 1.0.0.
I hope this helps you as well.
Link to the GitHub Issue discussion https://github.com/GetStream/react-native-activity-feed/issues/244#issuecomment-1013567858
enter code hereHello the developers of react-native, I wanted to integrate createMarterialTabBottom in my native project, I followed all the conventions, the views function but I always have a mistake in my console, please help me to solve this problem.
this is the code of my View App
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createMaterialBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="HomeScreen"
activeColor="#fff"
style={{ backgroundColor: 'tomato' }}
>
<Tab.Screen
name="HomeScreen"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="SettingsScreen"
component={SettingsScreen}
options={{
tabBarLabel: 'Updates',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="bell" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const HomeScreen = ({navigation}) =>(
<View><Text>Hello Home</Text></View>
);
const SettingsScreen = ({navigation}) =>(
<View><Text>Hello seting</Text></View>
);
this the error of my console
[Warning: React does not recognize the `accessibilityState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accessibilitystate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in a (created by Text)
in Text (created by Link)
in Link (created by BottomNavigation)
in div (created by View)
in View (created by BottomNavigation)
in div (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent (created by BottomNavigation)
in div (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent (created by Surface)
in Surface (created by Context.Consumer)
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by BottomNavigation)
in div (created by View)
in View (created by BottomNavigation)
in BottomNavigation (created by Context.Consumer)
in ThemedComponent (created by withTheme(BottomNavigation))
in withTheme(BottomNavigation) (created by MaterialBottomTabViewInner)
in MaterialBottomTabViewInner (created by MaterialBottomTabView)
in MaterialBottomTabView (created by MaterialBottomTabNavigator)
in MaterialBottomTabNavigator (at App.js:12)
in EnsureSingleNavigator (created by ForwardRef(BaseNavigationContainer))
in ForwardRef(BaseNavigationContainer) (created by ForwardRef(NavigationContainer))
in ThemeProvider (created by ForwardRef(NavigationContainer))
in ForwardRef(NavigationContainer) (at App.js:11)
in App (created by ExpoRootComponent)
in div (created by View)
in View (at NativeAppearance.web.tsx:51)
in NativeAppearanceProvider (at src/index.tsx:70)
in AppearanceProvider (created by ExpoRootComponent)
in ExpoRootComponent (created by RootComponent)
in RootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer][1]
I was also having this same issue, I found out that this warning was only generated when you compile the app in web, I tried compiling on an actual android device and the warning went away.
I created a FlastList for my posts where I calling a function that made for returning the likes of the post but it's giving me an error that is :
[Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.
in RCTView (at Testing.js:196)
in TouchableWithoutFeedback (at Testing.js:185)
in RCTView (at Testing.js:184)
in RCTView (at Testing.js:165)
in TouchableWithoutFeedback (at Testing.js:160)
in RCTView (at VirtualizedList.js:1925)
in CellRenderer (at VirtualizedList.js:767)
in RCTView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in ScrollView (at VirtualizedList.js:1183)
in VirtualizedList (at FlatList.js:676)
in FlatList (at Testing.js:151)
in RCTView (at Testing.js:147)
in Testing
in SceneView (at StackView.tsx:269)
in RCTView (at CardContainer.tsx:171)
in RCTView (at CardContainer.tsx:170)
in RCTView (at Card.tsx:455)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:442)
in PanGestureHandler (at Card.tsx:435)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:431)
in RCTView (at Card.tsx:424)
in Card (at CardContainer.tsx:138)
in CardContainer (at CardStack.tsx:503)
in RCTView (at CardStack.tsx:110)
in MaybeScreen (at CardStack.tsx:496)
in RCTView (at CardStack.tsx:93)
in MaybeScreenContainer (at CardStack.tsx:403)
in CardStack (at StackView.tsx:384)
in KeyboardManager (at StackView.tsx:382)
in RNCSafeAreaView (at src/index.tsx:26)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
in SafeAreaProviderCompat (at StackView.tsx:379)
in StackView (at StackView.tsx:41)
in StackView (at createStackNavigator.tsx:33)
in Unknown (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)]
fetch() is working properly I'm getting the likes but when I return the data I got that error.
I don't understand why I'm getting this error and how it will remove and how I'll get posts like on my app.
Here is my code.
likes = async item => {
const response = await fetch(
'http://192.168.0.3:1234/post_likes?post_id=' + item.id,
);
const data = await response.json();
let likes = data[0].likes;
console.log(likes);
return <Text>{likes}</Text>;
};
render() {
return (
<View style={styles.container}>
<HeaderIcon />
{this.state.loading && <ActivityIndicator size="large" color="cyan" />}
<FlatList
onScroll={({nativeEvent}) => {
if (this.isCloseToBottom(nativeEvent)) {
this.getMorePost();
}
}}
data={this.state.post}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => (
<TouchableWithoutFeedback
style={styles.main}
onPress={() => {
this.openPost(item);
}}>
<View style={styles.main}>
<View style={styles.row}>
{/* <View>{this.img(item)}</View> */}
<View>
<Image
style={styles.profilePic}
source={{uri: item.featuredImage}}
/>
</View>
<View>
<Text style={styles.title}>{item.post_title}</Text>
</View>
</View>
<Image
// resizeMode="stretch"
style={styles.image}
source={{uri: item.featuredImage}}
/>
<View>
<TouchableWithoutFeedback
onPress={() => {
Share.share({
title: item.post_title,
message:
item.section_seo_url +
item.post_content.replace(/<[^>]*>| /g, ' ') +
item.featuredImage,
url: item.featuredImage,
});
}}>
<View
style={{
justifyContent: 'center',
padding: 10,
flexDirection: 'row',
}}>
<Image
source={require('../image/wlogo.png')}
style={{height: 40, width: 40, paddingLeft: 50}}
/>
{this.likes(item)}
</View>
</TouchableWithoutFeedback>
</View>
</View>
</TouchableWithoutFeedback>
)}
/>
</View>
);
}
}
As per me here you are making multiple api calls
Instead of that you can get your posts data with your likes from backend in simple
one api call.
You just need to add join query with your likes table in your get-posts request
which will return all your post with likes
So, you will get your all post with likes in one api call instead of these much
of calls.
Which is good practise for us.it will increase your app performance as well as
less api calls so it is good for server as well
Solution is like
add one more field likes to your post table
what you can do is when user like/dislike your post then get your likes
from post table and increment by one else decrement by one as per user
like/dislike and update back to post table.