We Keep Coding

element type is invalid expected a string react native mobile

Hallo i got some Error with my code i already try some of the solution but still not work, can someone help me? Thank You
App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { ThemeProvider, Div, Text } from 'react-native-magnus';
import DashboardBody from './src/Component/Dashboard/DashboardBody';
import { Route } from './src/Routes/Route';
export default function App() {
return (
<ThemeProvider>
<Route />
</ThemeProvider>
);
}
Route.js
import React from "react";
import { NavigationContainers } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { BodyBar } from "../Component/BottomNav/BodyBar";
const RouteStack = createStackNavigator();
export const Route = () => {
return (
<NavigationContainers>
<RouteStack.Navigator>
<RouteStack.Screen
name="Lobby"
component={BodyBar}
options={{ headerShown: false }}
/>
</RouteStack.Navigator>
</NavigationContainers>
);
};
BodyBar.js
import React from "react";
import {
Alert,
Animated,
StyleSheet,
TouchableOpacity,
View,
} from "react-native";
import { CurvedBottomBar } from "react-native-curved-bottom-bar";
import Ionicons from "react-native-vector-icons/Ionicons";
import {
heightPercentageToDP as hp,
widthPercentageToDP as wp,
} from "react-native-responsive-screen";
import DashboardBody from "../Dashboard/DashboardBody";
import User from "../Profile/User";
export const BodyBar = () => {
const _renderIcon = (routeName: string, selectedTab: string) => {
let icon = "";
switch (routeName) {
case "title1":
icon = "home";
break;
case "title2":
icon = "person";
break;
}
return (
<Ionicons
name={icon}
size={25}
color={routeName === selectedTab ? "#feae3b" : "gray"}
/>
);
};
const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
return (
<TouchableOpacity
onPress={() => navigate(routeName)}
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
{_renderIcon(routeName, selectedTab)}
</TouchableOpacity>
);
};
return (
<View style={{ flex: 1 }}>
<CurvedBottomBar.Navigator
style={styles.bottomBar}
strokeWidth={0.5}
height={hp(8)}
circleWidth={hp(8)}
bgColor="#78c040"
initialRouteName="title1"
borderTopLeftRight
swipeEnabled={false}
renderCircle={({ selectedTab, navigate }) => (
<Animated.View style={styles.btnCircle}>
<TouchableOpacity
style={{
flex: 1,
justifyContent: "center",
}}
onPress={() => Alert.alert("Click Action")}
>
<Ionicons name={"qr-code"} color="gray" size={hp(5)} />
</TouchableOpacity>
</Animated.View>
)}
tabBar={renderTabBar}
>
<CurvedBottomBar.Screen
name="title1"
position="left"
component={DashboardBody}
/>
<CurvedBottomBar.Screen
name="title2"
component={User}
position="right"
/>
</CurvedBottomBar.Navigator>
</View>
);
};
export const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
button: {
marginVertical: 5,
},
bottomBar: {},
btnCircle: {
width: wp(15),
height: hp(8),
borderRadius: hp(4),
alignItems: "center",
justifyContent: "center",
backgroundColor: "white",
padding: hp(1),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 0.5,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 1,
bottom: 30,
},
imgCircle: {
width: 30,
height: 30,
tintColor: "gray",
},
img: {
width: 30,
height: 30,
},
});
DashboardBody.js
import React from "react";
import { Button, Div, Icon, Image, Text } from "react-native-magnus";
import HeaderLobby from "../Reuseable/HeaderLobby";
import {
heightPercentageToDP as hp,
widthPercentageToDP as wp,
} from "react-native-responsive-screen";
const SPACING = hp(1.5);
const DashboardBody = () => {
return (
<Div bg="gray400" flex={1}>
<HeaderLobby headerText={"Dashboard"} />
<Div
bg="#78c040"
h={hp(17)}
style={{
borderBottomLeftRadius: hp(15),
borderBottomRightRadius: hp(15),
}}
>
<Text textAlign="center" color="white" fontSize={hp(3)}>
Hai, Mike
</Text>
<Text
textAlign="center"
mt={SPACING}
fontSize={hp(2.5)}
fontWeight="bold"
color="white"
>
Produk Saya
</Text>
<Text
textAlign="center"
mt={SPACING}
fontSize={hp(4)}
fontWeight="bold"
color="white"
>
0
</Text>
</Div>
<Button
w={wp(90)}
h={hp(15)}
rounded={hp(5)}
ml={hp(2.5)}
mt={SPACING}
prefix={
<Icon
name="battery-charging"
fontFamily="Ionicons"
fontSize={hp(7)}
color="#feae3b"
// h={hp(10)}
// w={wp(13)}
mr={hp(2)}
/>
}
fontSize={hp(4)}
fontWeight="bold"
bg="white"
>
<Div>
<Text fontSize={hp(3)} w={wp(50)} fontWeight="bold">
Deskripsi Produk
</Text>
<Text w={wp(50)}>
Lihat informasi
</Text>
</Div>
</Button>
</Div>
);
};
export default DashboardBody;
User.js
import { View } from "react-native";
import React from "react";
import { Div, Text } from "react-native-magnus";
import HeaderBack from "../Reuseable/HeaderBack";
const User = () => {
return (
<Div>
<HeaderBack HeaderText={"Profile"} />
<Text>Name</Text>
</Div>
);
};
export default User;
But when i don't use Route part the code can still work, like you can use DashboardBody and User.
But when use Route idk why the code error

There's a typo mistake on the NavigationContainer component. Refactor code as below:
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { BodyBar } from "../Component/BottomNav/BodyBar";
const RouteStack = createStackNavigator();
export const Route = () => {
return (
<NavigationContainer>
<RouteStack.Navigator>
<RouteStack.Screen
name="Lobby"
component={BodyBar}
options={{ headerShown: false }}
/>
</RouteStack.Navigator>
</NavigationContainer>
);
};

How to pass in the state of my app from App.js to MainStack.Screen?

So I have my App.js which then renders a NavigationContainer with MainStack.Screen(s). I use an api to fetch some data about movies and then process it to give me a list of movieItem Objects with details about that movie. I save this moviesList object in my App.js state and want to pass this to my HomeScreen so that it can render all the movies in the moviesList object.
Please help how I can correctly get the route.params.moviesList[0].title to show.
App.js:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import HomeScreen from './Screens/HomeScreen';
import ResultsScreen from './Screens/ResultsScreen';
import { fetchMovies } from './api';
const MainStack = createStackNavigator();
export default class App extends React.Component {
state = {
moviesList: null,
};
componentDidMount() {
this.getUsers();
}
getUsers = async () => {
const movies = await fetchMovies();
this.setState({ moviesList: movies });
console.log('===========');
console.log(this.state.moviesList);
};
render() {
return (
<NavigationContainer>
<MainStack.Navigator>
<MainStack.Screen
name="Home"
component={HomeScreen}
initialParams={this.state}
/>
<MainStack.Screen name="Results" component={ResultsScreen} />
</MainStack.Navigator>
</NavigationContainer>
);
}
}
HomeScreen.js:
import React from 'react';
import { StyleSheet, TextInput, Button, Text, View } from 'react-native';
import Row from '../Row';
export default function HomeScreen({ route, navigation }) {
console.log('ROUTE:');
console.log(route);
return (
<View style={styles.container}>
<Text style={styles.heading}>Movie Browser</Text>
<Text style={styles.heading}>{route.params.moviesList[0].title}</Text>
<TextInput style={styles.textInput} placeholder="Sreach" />
<Row props />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
heading: {
fontSize: 42,
padding: 20,
},
text: {
justifyContent: 'center',
fontSize: 24,
paddingBottom: 5,
},
textInput: {
borderWidth: 2,
borderColor: 'black',
minWidth: 260,
marginBottom: 20,
marginHorizontal: 20,
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 3,
},
});

I believe the movieList array is your params. Try this in your return statement of HomeScreen.js:
<Text style={styles.heading}>{route.params[0].title}</Text>

Passing onPress redirect to child component React Native

I am struggling a little bit. I have tried to create more components for my React native app but after I did it my ButtonSaving stoped redirecting to Dashboard for some reason. I was trying some ways to pass onRowPress to component but without luck. What do I do incorrectly here please?
Login button is working fine => redirecting to Dashboard
ButtonSaving not working at all => should redirect to Dashboard
AppNavigator.js
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';
const AppNavigator = createStackNavigator({
Homepage: Homepage,
Dashboard: { screen: Dashboard},
},
{
initialRouteName: 'Homepage',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: 'white',
opacity: 70,
borderBottomColor: 'white',
borderColor: 'white'
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold'
}
}
}
);
const Container = createAppContainer(AppNavigator);
export default Container;
Homepage.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import {NavigationActions} from 'react-navigation';
// COMPONENTS
import ButtonSaving from './ButtonSaving/ButtonSaving';
class Homepage extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
},
this.handleClick = this.handleClick.bind(this);
this.onRowPress = this.onRowPress.bind(this);
}
handleClick() {
const counterApp = this.state.counter;
this.setState({
counter: counterApp + 1,
dashboard: 'Dashboard'
})
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render() {
return(
<View style={styles.container}>
{/* LOGIN BUTTON */}
<View style={styles.buttonContainer}>
<View style={styles.buttonLogin}>
<Button title="log in"
color="white"
onPress={() => this.props.navigation.navigate('Dashboard')}/>
</View>
</View>
{/* LOGO CONTAINER */}
<View style={styles.logoContainer}>
<Image
style={{height: 147, width: 170}}
source= {require('./REACT_NATIVE/AwesomeProject/logo.png')}
></Image>
</View>
{/* EXPLAINATION OF WALT */}
<Text style={styles.textContainer}>Lorem ipsum lorem upsum></Text>
{/* Needs to be refactored to VIEW */}
<ButtonSaving onPress={() => this.onRowPress}/>
</View>)
}
ButtonSaving.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
class ButtonSaving extends React.Component {
constructor(props) {
super(props);
this.state = {
},
this.onRowPress = this.onRowPress.bind(this);
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render(){
return(
<View style={styleButton.container}>
<LinearGradient
colors={[
'#00b38f',
'#7dcf5a'
]}
style={styleButton.opacityContainer}>
<TouchableOpacity>
<Button
title="Start Saving"
color='white'
onPress={this.onRowPress}/>
</TouchableOpacity>
</LinearGradient>
</View>
)
}
}
const styleButton = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
width: '100%',
height: 50,
justifyContent: 'center',
marginTop: '39%'
},
opacityContainer: {
height: 48,
borderRadius: 25,
backgroundColor: 'darkgreen',
width: '70%',
justifyContent: 'center',
alignItems: 'center'
}
})
export default ButtonSaving;

You miss to put dashboard in your state in ButtonSaving.js
In Homepage.js when your are calling handleClick ?. Dunno how you got that working...

You say in the onRowPress this:
this.props.navigation.navigate(this.state.dashboard);
but I don't see anywhere that you set this.state.dashboard.
Probabbly you missed set it up.

It was simple refactor and this helped!
<ButtonSaving navigation ={this.props.navigation}/>
I will update solution for others later.

There is no point to save "dashboard" in the Homepage state or the ButtonSaving state.
In Homepage.js you don't need to pass onPress to ButtonSaving
...
<ButtonSaving navigation={this.props.navigation}/>
...
Next in ButtonSaving.js
onRowPress = () => {
this.props.navigation.navigate('Dashboard');
}

Problems in DrawerNavigator in React-Native with react-navigation

I'm trying to implement a Drawer Navigator in my application but it returns this error.
I'm using React-Native and react-navigation and android 9.0 for emulator
Error Message:
App return
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
ScroollView,
Dimensions,
Image
} from "react-native";
import {
createDrawerNavigator,
createAppContainer,
DrawerItems,
SafeAreaView[enter image description here][3]
} from "react-navigation";
import LoginScreen from "./Screens/Login/LoginScreen";
import HomeScreen from "./Screens/Home/HomeScreen";
type Props = {};
export default class App extends Component<Props> {
render() {
return <Apps />;
}
}
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={require("./images/perfil.png")}
style={{ height: 120, width: 120, borderRadius: 60 }}
/>
</View>
<ScroollView>
<DrawerItems {...props} />
</ScroollView>
</SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
Settings: LoginScreen
},
{
contentComponent: CustomDrawerComponent
}
);
const Apps = createAppContainer(AppDrawerNavigator);
const styles = StyleSheet.create({});
I expected that application to start with the side menu working.

THe problem is in my code. It's ScrollView not ScroollView, my bad xd

How to solve ImageBackground not taking full width problem in React-Native?

I am using one ImageBackground in my LeftDrawer header. I have set the heigth and width to 100% and haven't set any padding or margin. But then I am not getting why my drawer header image is taking some space in left and right side. You can see that in the given image below -
And here I have provided the code for this class-
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
let user_email ='', user_first_name='';
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<Container style={styles.Container}>
<Header style={styles.drawerHeader}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: '100%',resizeMode:'cover'}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text>{user_email}</Text>
<Text>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
);
const MyApp = DrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
}
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
const styles = StyleSheet.create({
Container:{
textAlign:'center'
},
drawerHeader:{
height:150,
width:'100%',
backgroundColor: 'white'
},
drawerHeaderText:{
flex:1,
backgroundColor:'#5555'
},
drawerImage:{
height: 70,
width: 70,
borderRadius: 100,
},
drawerBody: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'transparent'
},
});
export default HomeDrawer;
So, it would be very nice if someone helps to find out what is the problem and suggest how to solve it.

You need to set resizeMode as props of ImageBackground.
<ImageBackground
source={require('../assets/header.jpeg')}
resizeMode={'cover'}
style={{width: '100%', height: '100%'}}>