React Native View and Flex: 1 not working as expected - reactjs

I learning React Native and I'm doing a simple View and setting the style to a container style, but nothing happens when I run the code. The View is now filling with the color read from the code. Its very starter code, just not seeing where its going wrong? When I run this, nothing in the view changes, it just white? I was expecting to see a screen of red?
import React, { useState } from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import { Input } from 'react-native-elements';
import SLSHeader from '../app-components/slsheader';
export default function Home (props) {
return (
<View styles={styles.container}>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});

The only place Im using it thus far is in a Navigator file... Its a switch Navigator with a Drawer Navigator...
import React from 'react';
import { createAppContainer, createSwitchNavigator} from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
//import CustomDrawer from './CustomDrawer';
//Import Screens
import LoginScreen from '../screens/Login';
import HomeScreen from '../screens/Home';
//Drawer Screens
const DrawerScreens = {
Home: {
screen: HomeScreen,
navigationOptions:{
headerShown: false
}
}
}
const DrawerNavigator = createDrawerNavigator(DrawerScreens, {
defaultNavigationOptions: {
headerStyle: {
height: 60
}
},
//contentComponent: CustomDrawer
});
//Pre Login Screens
const PreLoginScreens = {
Login: {
screen: LoginScreen,
navigationOptions:{
headerShown: false
}
},
PostLogin: {
screen: DrawerNavigator
}
}
const PreloginNavigator = createSwitchNavigator(PreLoginScreens,{
defaultNavigationOptions: {}
});
export default createAppContainer(PreloginNavigator);

Yes, in the App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SLSNavigator from './Navigation/SLSNavigator';
export default function App() {
return (
<SLSNavigator />
);
}

Related

How to continue a video between Screens with StackNavigation in React Native?

Hey Everyone I'm trying to use a video as a Background for several screens but the problem is when I'm trying to re use the BackgroundVideo.js in an another screen, the video would stop and replay at the begin when i'm switching between Screen (Lauchscreen to the SignInScreen).
I want to make this continue and not that the video replay.
An idea please ?
Thank you
BackgroundVideo.js :
import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import { assertStatusValuesInBounds } from 'expo-av/build/AV';
const { width, height } = Dimensions.get("window");
export default class BackgroundVideo extends Component {
render() {
return (
<Video
source={require("/Users/joshuabonifond/DoneWithIt/assets/BackgroundVideo.mp4")}
rate={1.0}
isMuted={true}
resizeMode="cover"
shouldPlay
isLooping style={styles.backgroundVideoStyle}
/>
);
}
}
const styles = StyleSheet.create({
backgroundVideoStyle: {
flex : 1,
height: height,
position: "absolute",
top: 0,
left: 0,
alignItems: "stretch",
bottom: 0,
right: 0,
}
});
Launchscreen.js
import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import { assertStatusValuesInBounds } from 'expo-av/build/AV';
import BackgroundVideo from './BackgroundVideo.js';
const { width, height } = Dimensions.get("window");
export default class Launchscreen extends Component {
render() {
return (
<View style = {styles.container}>
<BackgroundVideo/>
<Text style = {styles.TextTitle}>
First app !
{'\n'} {'\n'}
Hello There
</Text>
Navigation.js
import { getActiveChildNavigationOptions } from 'react-navigation';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Launchscreen from '../Components/Launchscreen';
import SignInScreen from '../Components/SignInScreen';
const HomeScreenStackNavigator = createStackNavigator({
LaunchscreenView:{
screen: Launchscreen,
navigationOptions:{
headerShown: false,
}
},
SignInScreenView: {
screen: SignInScreen,
navigationOptions:{
headerShown: false,
}
},
})
App.js
import StatusBar from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Launchscreen from './Components/Launchscreen';
import NavigationHomeScreen from './Navigation/NavigationHomeScreen';
export default class App extends React.Component {
render(){
return (
<NavigationHomeScreen/>
);
}
}
Resolved !
Like #beingbalder said, I put my Launchscreen and my SignInView in a common Screen and then, I used this method (https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react)to return the state from the Child ("Launchscreen") to my Parent Component ("CommonViewLaunch") and change the state of the variable "isLaunch" when I press on a touchableOpacity button in the Launchscreen.
Thank you so much !
You can't do that in this way.
First of all make a common screen for Launchscreen and SignInScreen and use both of these screens as component.
inside you CommonScreen.js
<View>
<BackgroundVideo/>
{isLaunch ? <Launchscreen/>:<SignInScreenView/>}
</View>
change your isLaunch variable when you are moving from launch screen to sign in screen
Note - Make sure to add proper styling so you video appear below screen components, also remove video from both screen components.
The best answer would be https://stackoverflow.com/a/69676488/10665516.
But you can also just pass the current position of the video to the next screen videoRef.getStatusAsync(). And set the starting position of the video on the next screen using videoRef.setPositionAsync(millis)

React Native Navigation: Check if drawer is opened or not

i have a component that is outside the Drawer tag but it's inside a NavigationContainer.
So i used useRef from react to get navigate method .
So i use this example: Navigating without navigation prop
But now, i can't get the state of the drawer (is it opened or closed).
Here's my App component:
import 'react-native-gesture-handler';
import React from 'react';
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import GetInformationByLocation from "./reducers/GetInformationByLocation";
import Wrapper from './components/Wrapper';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import GeoDisplay from "./components/GeoDisplay";
import { Text } from "react-native";
import { navigationRef } from "./helpers/Navigator";
const store = createStore(GetInformationByLocation, applyMiddleware(thunk));
/*
* TODO:
* 1. Wrap everything with parent component
* 2. Search bar
* 3. Save searched cities.
* 4. Check if the city is undefined and suggest nearest city.
* 5. Animated background
* 6. Fancy and animated font
* 7. Setup menu преди показване на приложението
*/
const Drawer = createDrawerNavigator();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
<Wrapper />
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={GeoDisplay} />
</Drawer.Navigator>
</NavigationContainer>
</Provider >
);
}
export default App;
and my Wrapper.js Component:
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import { SearchBar, Header } from 'react-native-elements';
import { MainUI } from '../styling/UI';
import * as Navigator from "../helpers/Navigator";
import { DrawerActions } from "#react-navigation/native";
const Wrapper = (props) => {
const [search, setSearch] = useState(true);
const openDrawer = () => {
Navigator.navigationRef.current.dispatch(DrawerActions.openDrawer())
setSearch(false);
}
useEffect(() => {
}, []);
return (
<>
<StatusBar backgroundColor={"#011E25"} />
<Header
leftComponent={{ icon: 'menu', color: '#fff', onPress: () => { openDrawer() } }}
centerComponent={{ text: 'COVID Bulgaria', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
backgroundColor={'#011E25'}
/>
{search &&
<View>
<SearchBar placeholder="Търси град" containerStyle={MainUI.searchContainer} />
</View>
}
</>
)
}
export default Wrapper;
I dispatch openDrawer() action with navigationRef
Navigator.navigationRef.current.dispatch(DrawerActions.openDrawer())
but can't get status of the drawer.
I've tried many ways but not work.
Thanks in advance.
You can check if drawer is open by getting the navigation state:
const state = navigationRef.current.getRootState();
const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
The above code assumes that drawer is at root. If it's nested, you'll need to traverse the state to find the state object with type: 'drawer'.
It's not clear why you need to check it from the question. Normally you shouldn't need to check it. If you dispatch DrawerActions.openDrawer() if drawer is already open, nothing will happen. So the check is unnecessary. If you want to close the drawer if it was open, you can dispatch DrawerActions.toggleDrawer() instead.
You can create a helper class like:
class DrawerHandler() {
openDrawer() {
this.drawerOpened = true;
}
closeDrawer() {
this.drawerOpened = false;
}
getDrawerStatus() {
return this.drawerOpened;
}
}
export default new DrawerHandler();
Use open and close functions on drawer opening and closing and get function to get status of the drawer

TypeError: (0, _reactNavigation.default) is not a function. React Native

I am using React Navigation Version 4 and after setting my navigations and all screens and run the code I am facing the following issue:
TypeError: (0, _reactNavigation.default) is not a function.
My Routes.Js is -
import React from 'react';
import createAppContainer from 'react-navigation';
import { createStackNavigator, HeaderBackButton } from 'react-navigation-stack';
import { Drawer } from './Drawer';
import LoginScreen from '../screens/LoginScreen';
import InitialScreen from '../screens/InitialScreen';
import LogoutScreen from '../screens/LogoutScreen';
const RootStack = createStackNavigator(
{
Drawer: {
screen: Drawer
},
LoginScreen: {
screen: LoginScreen
},
LogoutScreen: {
screen: LogoutScreen
}
InitialScreen: {
screen: InitialScreen
}
},
{
initialRouteName: 'InitialScreen',
headerMode: "none"
}
)
const App = createAppContainer(RootStack);
export default App;
and Index.js is -
import React, { Component } from 'react';
import { StyleSheet, AsyncStorage } from 'react-native';
import { Button, Text, Drawer } from 'native-base';
import App from './config/Routes';
import AppHeader from './components/Header/Header';
export default class Index extends Component {
render() {
const { globalContainer } = styles;
return (
<App
style={ globalContainer }
navigation={this.props.navigation}>
</App>
)
}
}
Any help??
It appears from the documentation that it should be a named import, not a default.
import { createAppContainer } from 'react-navigation';
Please read the docs. It's also a good first place to look when debugging.

React native app - Can't seem to wrap everything into . a container

How do I wrap the below code into an app-container please? I am trying to update from an older version of native.
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import SplashScreen from './screens/splash.screen';
const Splash = {
screen: SplashScreen,
defaultNavigationOptions: {
header: null
}
}
const RouteConfig = {
initialRoute: 'Splash'
}
const AppNavigator = createDrawerNavigator({
Splash: Splash
},RouteConfig)
export default AppNavigator;
export default createAppContainer(AppNavigator);

The navigation prop is missing for this navigator

Every single example I have seen in Stack Overflow uses the case where the App component is a functional component, but I am using a class-based App component and I am playing catch up with the breaking changes of React Navigation.
This is my code inside App.js file:
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
createBottomTabNavigator,
createStackNavigator
} from "react-navigation";
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
export default class App extends React.Component {
render() {
const MainNavigator = createBottomTabNavigator({
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
});
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center"
}
});
I was refactoring it along nicely and then it broke with this message that I cannot figure out:
Invariant Violation: The navigation prop is missing for this
navigator. In react-navigation 3 you must set up your app container
directly.
Yes, I looked at React Native docs regarding AppContainer and I saw this line of code
const AppContainer = createAppContainer(AppNavigator);
but I am not sure how to refactor mines or not refactor it too much to get this right.
When I try to add this line of code export default createAppContainer(App); at the bottom of my file and obviously removing export default from in front of class App... and also pulling out createAppContainer from inside my react-navigation, I get an error that says:
TypeError: undefined is not an object
Set you createAppContainer like this
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
const MainNavigator = createAppContainer(createBottomTabNavigator({ // set createAppContainer here
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
}));
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center"
}
});

Resources