Develop Reference

React navigation content size too narrow

Hi I am implementing react navigation in a react native app, and I am following the docs on react navigation. And I when I run the code this is the result:
My question is how do I make the center content's width same as the screen.
Also, his is my first time using react native expo after switching from reactJS
Code:
navigator code:
import Login from "./Login";
import Signup from "./Signup";
import {
createAppContainer,
NavigationContainer,
NavigationNavigator,
} from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Chat from "./Chat";
import Error from "./Error";
/**
* This is the screen stack of the navigation stack.
*/
const screens: any = {
default: { screen: Login },
signup: { screen: Signup },
chat: { screen: Chat },
Error: { screen: Error },
};
const stack: NavigationNavigator<any, any> = createStackNavigator(screens);
const container: NavigationContainer = createAppContainer(stack);
export default container;
App.tsx:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import * as expoAppLoading from "expo-app-loading";
import loadFonts from "./assets/fonts/loader";
import Navigator from "./screens/navigator";
/**
* This is the main app component of the Chill&chat application.
*/
const App: React.FC = () => {
const [loading, setLoading] = React.useState(true);
const style: any = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
text: {
fontFamily: "poppinsBold",
},
});
if (loading) {
return (
<expoAppLoading.default
startAsync={async (): Promise<void> => {
await loadFonts();
}}
onFinish={(): void => {
setLoading(false);
}}
onError={(): void => {
Alert.alert("Error", "Error loading fonts");
}}
/>
);
} else {
return (
<View style={style.container}>
<Navigator />
<StatusBar style="auto" />
</View>
);
}
};
export default App;

You should be able to set the width by adding percentage dimensions to your style sheet for the desired element. This may require you do away with flex layout however, or use flex in a parent instead.
container: {
width:'100%',
},
This should solve for the width problem though.

Unable to read data from Firebase Realtime Database in React Native

I am working on a simple React Native app to read and write data from a Firebase database. My read and write permissions in Firebase have been set to true:
{
"rules": {
".read": true,
".write": true,
}
}
Here are my relevant files:
App.js
import React from 'react'
import {View, StyleSheet, Button} from 'react-native'
import * as firebase from 'firebase'
import RootStackNavigator from './navigation/RootNavigation'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
isLoadingComplete: false
}
var firebaseConfig = {
apiKey: "xxxxxxx",
authDomain: "testproject-9d0bc.firebaseapp.com",
databaseURL: "https://testproject-9d0bc-default-rtdb.firebaseio.com",
projectId: "testproject-9d0bc",
storageBucket: "testproject-9d0bc.appspot.com",
messagingSenderId: "1003049293166",
appId: "1:1003049293166:web:1df37fd6d181cf895cdd7f"
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
} else {
firebase.app()
}
}
render() {
return (
<View style={styles.container}>
<RootStackNavigator/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
RootStackNavigation.js
import React from 'react';
import { createAppContainer, StackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../src/screens/HomeScreen';
const RootStackNavigator = createStackNavigator(
{
screen: HomeScreen
},
{
initialRouteName:"screen", // first component that should be displayed
defaultNavigationOptions: {
title: "App"
}
}
);
export default createAppContainer(RootStackNavigator)
HomeScreen.js
import React from "react";
import { Text, StyleSheet, View, Button, TouchableOpacity } from "react-native";
import * as firebase from "firebase";
const HomeScreen = (
props
) => {
function getData() {
firebase
.database()
.ref("people/")
.on("value", (snapshot) => {
const age = snapshot.val().age;
console.log("Age: " + age);
});
}
return (
<View>
<Text>Hello this is the home screen</Text>
<Button title="Get Data" onPress={getData} />
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30,
},
});
export default HomeScreen;
My firebase database looks like this (all data was manually added through the firebase website)and I want to be able to print out these items after pressing the "Get Data" button to the console as shown in my getData function in HomeScreen.js
However, my code in getData does not work and nothing prints out to my console. What am I missing here?

Kindly modify this in your code
firebase.database.ref("people").on("value", snapshots => {
let peoples = [];
snapshots.forEach((snapshot) => {
peoples.push(snapshot.val().age);
console.log(snapshot.val().age);
});
// here you can set this Array
// setPeople(peoples)

Figured out my issue. As you can see in my firebase database, the way I was accessing my data was wrong. If I wanted to get the age of "dad", I should have called snapshot.val().dad.

React navigation doesnt navigate

I am developing an application and using the listener onAuthStateChanged from Firebase in my AuthenticationLoadingScreen so I can redirect the user based on this state, however, it just opens a white page and doesn't open the home screen.
EDIT: Someone says that maybe the app.js is the problem so I added it here
import HomeScreen from '../screens/HomeScreen'
import AuthScreen from '../screens/AuthScreen'
// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.
const AppStack = createStackNavigator({ Home: HomeScreen});
const AuthStack = createStackNavigator({ Home: HomeScreen });
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthScreen,
App: AppStack,
Auth: AuthStack
},
{
initialRouteName: 'AuthLoading',
}
));
export default class AuthScreen extends React.Component {
constructor(props){
super(props);
}
componentDidMount = ()=>{
firebase.auth().onAuthStateChanged(user => {
this.props.navigation.navigate(user ? 'App' : 'Auth');
});
}
render() {
return (
<ImageBackground
source={require('../assets/images/AuthScreenBackground.png')}
style={styles.ImageBackground}/>
);
}
}
Here is the App.js code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppNavigation from './navigation/AppNavigation.js'
import * as firebase from 'firebase'
var config = {
};
firebase.initializeApp(config);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<AppNavigation/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

Try this code:
componentWillMount() {
this.observeLogin = firebase.auth().onAuthStateChanged(user => {
if (user) {
this.props.navigation.navigate('App');
} else {
this.props.navigation.navigate('Auth');
}
});
}
componentWillUnmount() {
// Don't forget to unsubscribe when the component unmounts
this.observeLogin ();
}

Undefined ' this.props.navigation.state.props.p' navigation react-native

I have read all the other topics about this issue, but no one is the solution to my problem.
I don't know why, but I can't pass props to react-navigation when I try to navigate, I always get this error:
"Undefined ' this.props.navigation.state.props.p'"
There is my code:
import React from 'react'
import {View, Text, ActivityIndicator, StyleSheet} from 'react-native'
import * as firebase from 'firebase';
const config = {
apiKey: "AIzaSyBeFuR40n7vp1XU9edL8PeOFq3UafKQ314",
authDomain: "anylibrary-961e1.firebaseapp.com",
databaseURL: "https://anylibrary-961e1.firebaseio.com",
projectId: "anylibrary-961e1",
storageBucket: "anylibrary-961e1.appspot.com",
messagingSenderId: "482573837189"
};
export default class Loading extends React.Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
}
componentWillMount() {
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
}
componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
const {navigate} = this.props.navigation;
if (user) {
navigate('UserArea', {p: 'Profile'});
} else {
navigate('MainPage');
}
})
}
render() {
return (
<View style={styles.container}>
<Text>Loading...</Text>
<ActivityIndicator size="large"/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
And:
import React from 'react';
import {StyleSheet, View, Alert} from 'react-native';
import Profile from './Profile';
import Notifications from './Notifications';
import Search from './Search';
import Home from './Home';
import Tabbar from 'react-native-tabbar-bottom'
import * as firebase from 'firebase';
const config = {
apiKey: "AIzaSyBeFuR40n7vp1XU9edL8PeOFq3UafKQ314",
authDomain: "anylibrary-961e1.firebaseapp.com",
databaseURL: "https://anylibrary-961e1.firebaseio.com",
projectId: "anylibrary-961e1",
storageBucket: "anylibrary-961e1.appspot.com",
messagingSenderId: "482573837189"
};
export default class UserArea extends React.Component {
static navigationOptions = {
header: null,
}
constructor(props) {
super(props);
this.state = {
page: this.props.navigation.state.props.p,
name: '',
}
}
componentWillMount(){
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
}
componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
this.state.name = user.displayName;
})
}
render() {
return (
<View style={styles.container}>
{this.state.page === "Home" && <Home navigation={this.props.navigation}>Home</Home>}
{this.state.page === "Profile" && <Profile navigation={this.props.navigation}>Profile</Profile>}
{this.state.page === "Notifications" && <Notifications navigation={this.props.navigation}>Notifications</Notifications>}
{this.state.page === "Search" && <Search navigation={this.props.navigation}>Search</Search>}
<Tabbar
stateFunc={(tab) => {
this.setState({page: tab.page})
//this.props.navigation.setParams({tabTitle: tab.title})
}}
activePage={this.state.page}
tabbarBgColor='#00619A'
iconColor='#99c2ff'
tabs={[
{
page: "Home",
icon: "home",
iconText: "Home"
},
{
page: "Profile",
icon: "person",
iconText: "Profile"
},
{
page: "Notifications",
icon: "notifications",
badgeNumber: 0,
iconText: "Notifications"
},
{
page: "Search",
icon: "search",
iconText: "Search"
},
]}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
Basically i send it like that:
navigate('UserArea', {p: 'Profile'});
and try to acces it like that:
page: this.props.navigation.state.props.p,
Anyone?
Where is the problem?
What I am doing wrong?

from the documentation this looks like the correct way to get the route params
this.props.navigation.state.params.p
https://reactnavigation.org/docs/en/navigation-prop.html

old method is
this.props.navigation.state.params
new method is
this.props.route.params
im using rn version 0.62,
react navigation version -5

try this one:
page: this.props.navigation.state.p
i advise you to use getParam - Get a specific param value with a fallback
const name = this.props.navigation.getParam('name', 'Peter');
if name or param are undefined, set the fallback to Peter.

If using react-navigation v5, use
const data = route.params?.someParam ?? 'defaultValue';

Tab Navigator bar won't show up react native

Problem
I am making a very basic app that lets users post, and then renders the posts. I want to add some tabs, so I added TabNavigator. I am really confused because no tabs are showing up on my screen when I run the app, and I don't know why. I think I may be missing something, but I don't know what. I am really new to react native and firebase, and I would love any help on solving this problem.
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
import { TabNavigator } from 'react-navigation';
//Removed code - some random variables
export default class FeedView extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
};
//Removed code - some more random variables
render() {
static navigationOptions = {
tabBarLabel: 'Home',
};
return (
//Removed code - Code for this section
);
}
class Comments extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
};
render() {
static navigationOptions = {
tabBarLabel: 'Comments',
};
return (
//Removed code - This section's code
);
}
}
//Removed code - Styles declared here
const MyApp = TabNavigator({
Feed: {
screen: FeedView,
},
CommentScreen: {
screen: Comments,
},
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#fe8200',
},
});