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';
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 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
I am trying to use a simple ViewPager on React native. I am facing a problem when I try to run the app on an emulator. (I have not tested it on IOS and I don't require to test it too.)
So, I have a very simple piece of code -
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ViewPager from '#react-native-community/viewpager';
const ViewPager_3 = () => {
return (
<View style={{ flex: 1 }}>
<ViewPager style={styles.viewPager} initialPage={0}>
<View style={styles.page} key="1">
<Text>First page</Text>
<Text>Swipe ➡️</Text>
</View>
<View style={styles.page} key="2">
<Text>Second page</Text>
</View>
<View style={styles.page} key="3">
<Text>Third page</Text>
</View>
</ViewPager>
</View>
);
};
const styles = StyleSheet.create({
viewPager: {
flex: 1,
},
page: {
justifyContent: 'center',
alignItems: 'center',
},
});
export default ViewPager_3;
When I try to run the code on Android emulator it gives an error on the page, find below--
Invariant Violation: View config not found for name RNCViewPager.
This error is located at:
in RNCViewPager (at ViewPager.js:174)
in ViewPager (at ViewPager_3.js:8)
in RCTView (at ViewPager_3.js:7)
in ViewPager_3 (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by CardContainer)
in RCTView (created by CardContainer)
in RCTView (created by Card)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (created by PanGestureHandler)
What could be the reason for the same?
I'm beginner to react native and I was try to build very basic app and I got below error
Invariant Violation: View config not found for name div. Make sure to start component names with a capital letter.
This error is located at:
in div (created by View)
in View (created by ScrollView)
in div (created by View)
in View (created by ScrollViewBase)
in ScrollViewBase (created by ScrollView)
in ScrollView (at Horizontal.js:8)
in Horizontal (at App.js:12)
in RCTView (at View.js:45)
in View (at App.js:11)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
get
below is my source code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {ScrollView} from "react-native-web";
export default class Horizontal extends React.Component{
render() {
return (
<ScrollView>
<View>
<Text style={styles.innerText}>
Welcome to LCOs
</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
},
outer: {
},
innerText:{},
});
and this is my main class
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Red from './component/Red';
import Green from "./component/Green";
import Blue from "./component/Blue";
import Horizontal from "./component/Horizontal";
export default class App extends React.Component{
render() {
return (
<View style={styles.container}>
<Horizontal/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent:'center',
flexDirection:'row'
},
});
what is the reason for this error and how can I resolve this?
ok I found the solution change the input of scrollview to react native not react native web
change import {ScrollView} from "react-native-web"; this to
import {ScrollView} from "react-native"; this.
I have gotten to grips with React, but have just started a React-Native project today for the first time. My code is very simple at the moment, but I can't seem to get it to work. I get the following error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.%s,
in RCTView (at View.js:45)
in View (at App.js:10)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error
- node_modules\expo\build\environment\muteWarnings.fx.js:26:24 in error
- ... 24 more stack frames from framework internals
Here is my code:
app.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Profile from './Profile/Profile.js';
export default function App() {
return (
<React.Fragment>
<View>{Profile}</View>
</React.Fragment>
);
}
profile.js
import React from 'react';
const Profile = (props) =>{
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
//style={this.styles.container}
return(
<React.Fragment>
<View>
<Text>Hi Guys</Text>
</View>
</React.Fragment>
);
}
export default Profile;
I have tried removing React Fragment in case it isn't supported in React Native, but this didn't do the trick. Any suggestions?
Also on a side note, what is the best way to a debug React-Native project? This error description doesn't make a lot of sense to me.
Thanks in advance.
You are using Profile Component incorrectly.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Profile from './Profile/Profile.js';
export default function App() {
return (
<React.Fragment>
<View>
<Profile/> // <---- The correct way
</View>
</React.Fragment>
);
}
Profile is a component you created and component are used by other component with the JSX syntax, like this: <MyComponent prop1={someValueHere} prop2={somethingElse} />.
So your use of Profile is incorrect, you should write:
<View><Profile /></View>
instead of
<View>{Profile}</View>.
You are using Profile component in a wrong way.
Please remove {Profile} and change to <Profile/>