Stream IO Feeds React Native with React Navigation - 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

Related

ERROR :Text string must be rendered within a <Text> component

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

React.jsx: type is invalid expected a string or a class/function but got: undefined

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;

Error adding React Native Navigation header button [Error: Text strings must be rendered within a <Text> component.]

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

React does not recognize the `accessibilityState` prop on a DOM element

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.

Error rendering stateless component: "Can't find variable: React"

I have a stateless component in my react-native application defined as follows.
components/TodoItem.js:
import { View, Text, Button } from 'react-native';
const TodoItem = () => (
<View style={{flex: 1, flexDirection: 'column'}}>
<Text>Hello, please remember to do this!</Text>
<Button
color="#841584"
title="Button 1"
/>
<Button
color="#241584"
title="Button 2"
/>
</View>
);
export default TodoItem;
When I use it in the render() function of App.js like this:
import TodoItem from './components/TodoItem';
// . . . other code here
render() {
return (
<View style={styles.container}>
<Text>Hello :)</Text>
<TodoItem/>
</View>
);
}
I get the following error:
ReferenceError: Can't find variable: React
This error is located at:
in TodoItem (at App.js:39)
in RCTView (at View.js:60)
in View (at App.js:37)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
* components/TodoItem.js:4:8 in TodoItem
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:9050:17 in mountIndeterminateComponent
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:9573:10 in beginWork
- ... 21 more stack frames from framework internals
Some help with this is much appreciated!
You should add this - import React from 'react'; although you don't use React on components/TodoItem.js:
Even in a stateless component, we need to import React from react package as such:
import React from 'react';