I use reactnavigation and I am hiding the statusbar at the top, but it leaves an empty space above the header.
I already tried paddingTop or marginTop, but none work.
This is how I hide the statusbar.
import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';
const App = () => (
<View style={{flex:1}}>
<StatusBar hidden={true} />
<Drawer />
</View>
);
export default App;
Any idea would be helpful.
Thanks.
How to Fix it
I add the following to the index.js:
import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';
import { SafeAreaView } from 'react-navigation';
SafeAreaView.setStatusBarHeight(0);
const App = () => (
<View style={{flex:1}}>
<StatusBar hidden={true} />
<Drawer />
</View>
);
export default App;
Basically added the SafeAreaView part.
Hope this is helpful for others.
Try the static function Status Bar. You might need to convert the component to a React Component/Pure Component. Try it with and without converting it.
componentDidMount(){
StatusBar.setHidden(true,true);
}
Related
Cannot get any output from my function test() which I have written in Boxes.js when I add onPress={test} to my View tag in Dice.js.
I have tried to add test() on tags like Text, then it works, but not when I put it on the View tag.
Boxes.js:
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import Dice from "./Dice";
import PatternDivider from "./PatternDivider";
export function test() {
console.log("hi");
}
export default class Boxes extends react.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.header}>Advice #117</Text>
<Text style={styles.advice}>
It is easy to sit up and take notice, what's difficult is getting uu
and taking action
</Text>
<PatternDivider />
<Dice />
</View>
);
}
}
Dice.js:
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { test } from "./Boxes";
export default class Dice extends react.Component {
render() {
return (
<View style={styles.circle} onPress={test}>
<Image
source={require("../assets/icon-dice.png")}
style={styles.dice}
/>
</View>
);
}
}
If you wanna Dice to be clickable, use one the components that handles press events, like Pressable. Not all components accept an onPress property, View is one of them.
import react from "react";
import { StyleSheet, Text, View, Image, Pressable } from "react-native";
import { test } from "./Boxes";
export default class Dice extends react.Component {
render() {
return (
<Pressable style={styles.circle} onPress={test}>
<Image
source={require("../assets/icon-dice.png")}
style={styles.dice}
/>
</Pressable>
);
}
}
React Native's View component doesn't have an onPress property https://reactnative.dev/docs/view
I'm trying to pass some data between two screens in my app. I'm using for this route.params from react-navigation
(here is the docs https://reactnavigation.org/docs/params/).
In the first component - home.js - I have an array with some data and FlatList component. Home.js displays data in my app correctly.
In the second component - reviewsDetails.js- I'm trying to display data /item.title/ from
home.js but I have this error: "TypeError: Cannot read properties of undefined (reading 'item')".
I am looking for a solution to this problem
Here is my code:
home.js
import React, { useState } from 'react';
import {StyleSheet, View, Text, FlatList,TouchableOpacity} from 'react-native'
function Home({navigation}) {
const [reviews, setReviews] = useState(
[
{title:"Zelda", rating:1, body:'lorem ipsum', key:1},
{title:"Cruella", rating:1, body:'lorem ipsum', key:2},
{title:"Voldemort", rating:1, body:'lorem ipsum', key:3},
]
)
return (
<View style={styles.container}>
<FlatList
data={reviews}
renderItem={({item})=>(
<TouchableOpacity onPress={()=> navigation.navigate("reviewDetails", item)}>
<Text>{item.title}</Text>
</TouchableOpacity>
)}
/>
</View>
);
}
export default Home;
reviewDetails.js
import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
export default function ReviewDetails({ route, navigation }) {
const { item } = route.params;
return (
<View style={globalStyles.container}>
<Text>{item.title}</Text>
</View>
);
}
And here is the error
image
Codesandbox with source code: link
I will be grateful for any advice
EDIT.
Additional info :)
Here is also my navigation.js:
mport { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import React from 'react';
import about from '../screens/about'
import home from '../screens/home'
import reviewDetails from '../screens/reviewDetails'
const Tab= createBottomTabNavigator();
const AppNavigator=()=>(
<Tab.Navigator>
<Tab.Screen name="about" component={about}></Tab.Screen>
<Tab.Screen name="home" component={home}></Tab.Screen>
<Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>
</Tab.Navigator>
)
export default AppNavigator;
and app.js
import React from 'react';
import { NavigationContainer, useNavigation } from "#react-navigation/native";
import AppNavigator from "./navigation/navigation.js"
export default function App(){
return(
<NavigationContainer>
<AppNavigator>
</AppNavigator> </NavigationContainer>
)
}
If its helpfull - I use version 6.0.2 of react-navigation/native and 6.0.7 of react-navigation/stack
You have to pass params like this from home screen. Pass it in an object named data (This can be named as anything you want)
onPress={() => {
navigation.navigate("reviewDetails", {
data: item,
});
}}
And then get it on the next screen like this on reviewDetails screen
const { data } = route.params;
I am trying to use navigation in react native, but it gives me an error when I try use a component with navigate (LogIn) with the
<Login/>
tags.
It says that navigate is undified so I passed the navigation as a prop with no success
App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import Login from "./assets/code/Login.js";
import { NavigationContainer, StackActions } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import 'react-native-gesture-handler';
const Stack = createStackNavigator();
export default function App({ navigation }) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Welcome to dog app, and I hate react"
component={HomePage}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
function HomePage({ navigation }) {
return (
<View style={styles.container}>
<View>
<Text> {""}Welcome to dogappcoolapp app</Text>
</View>
<View style={styles.blue}>
<Login navigate={ navigation } style={styles.blue} />
</View>
</View>
)
}
The error is in this line
<Login navigate={ navigation } style={styles.blue} />
The error is
The LogIn function is in
LogIn.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, Script, Alert } from 'react-native';
import { NavigationContainer, StackActions, } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import 'react-native-gesture-handler';
const Stack = createStackNavigator();
export function Login({navigation}) {
if (true)
return (
navigation.navigate('WelcomePage')
);
}
function WelcomePage () {
return (
<View>
<Button title="enter" />
<Text> dog app dog woof-app{"\n\n\n\n\n\n\n\n\n"}OMG!! YOU ARE LOGGED IN! WELCOME!{"\n\n\n\n\n"}</Text>
</View>
);
}
const styles = StyleSheet.create({
blue: {
flex: 2,
backgroundColor: "dodgerblue",
alignItems: 'center',
justifyContent: 'center',
},
});
export default Login;
If I remove all of the navigation prop and tags from the function LogIn, then I can use LogIn as a componnent with <LogIn/>, but not with navigation, I tried usinng it with
navigate={ navigation }
(As it is in the code that I posted)
and I tried without it, I keep getting similar errors.
How can I use LogIn as a component with </> tags while still having navigation component in it?
The logic is correct, in child components, you can pass a navigation prop to get access to navigation, but you are passing your navigation object to a prop called navigate <Login navigate={ navigation } style={styles.blue} />, no wonder it's undefined, you should receive it as navigate in your Login component.
export function Login({navigation}) { //<-- here you have navigation where the prop name that you pass is navigate.
so it should be
export function Login({navigate}) {
...
navigate.navigate('...')
or you should rename your prop to navigation and then your navigation.navigate won't be undefined anymore.
I'm super new to react native & having a hard time connecting separate files with my App.js. I've got a user-defined component in a separate file. This is what I've right now in the app.js
import React from 'react';
import TextImg from "./components/comp";
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={{alignItems:'center', top:150}}>
<Image source={require('./images/pic.jpeg')} style={{ width: 290, height: 190 }}/>
<TextImg text='Mt. Fuji'/>
<TextImg source={{imageUri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
</View> );
};
I am importing components from comp.js, and this is what I've in the comp.js file
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
function TextImg(textprop, imgprop) {
return (
<React.Fragment>
<Text>{textprop.text}</Text>
<Image source={imgprop.imageUri}></Image>
</React.Fragment>
);
};
But this only shows the text, but not the image. Can anyone help with this?
Thanks in advance for help!
All your props would be passed as a single parameter. So you should change your component like below.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default function TextImg(props) {
return (
<React.Fragment>
<Text>{props.text}</Text>
<Image source={props.imageUri} style={props.style}></Image>
</React.Fragment>
);
};
You will have to import it in your app.js. (Assuming your file name is TextImg.js and its in the same path)
import TextImg from './TextImg'
You are not passing your props correctly.
Here is a revamp of your code, but in the proper way:
import React from 'react';
import { TextImg } from "./components/comp";
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={{alignItems:'center', top:150}}>
<Image source={require('./images/pic.jpeg')} style={{ width: 290, height: 190 }}/>
<TextImg text='Mt. Fuji' imageUri: {'https://reactjs.org/logo-og.png'} />
</View> );
};
Then in comp.js
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export const TextImg = ({ text, imageUri }) => {
return (
<React.Fragment>
<Text>{text}</Text>
<Image source={imageUri} style={{width: 400, height: 400}} />
</React.Fragment>
);
};
This will fix it up for you. Study the code and try to understand what was done. But I'll also advise you to learn about React props.
I am going to implement a react native footer menu (bottom tam navigator). But I got some errors on running it.
this is my drawer.js file
import React,{Component} from 'react';
import {View,Text,StyleSheet} from "react-native";
import {createAppContainer}from "react-navigation";
import {createMaterialBootomTabNavigator} from "react-navigation-material-bottom-tabs";
import Homescreen from "./home.js";
class drawer extends React.Component{
render() {
return (
<View style={styles.container}>
<Text>drawer</Text>
</View>
);
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:"center",
alignItems:"center",
}
});
const TabNavigator=createMaterialBootomTabNavigator(
{
Home:{
screen:Homescreen,
}
},
{
initialRouteName:"home",
activeColor:"#f0edf6",
inactiveColor:"#3e2465",
barStyle:{ backgroundColor: '#694fad' },
}
);
export default createAppContainer(TabNavigator);
I had already installed the react-navigator.
By run it on my emulator I got this error.
how can I fix this?
Change createMaterialBootomTabNavigator to createMaterialBottomTabNavigator