When I configure my links and url-scheme with react navigation it falls into the fallback error. Don't know why. Sometimes when making changes it worked but then it didn't. I have followed some tutorials that worked perfectly but when configuring it in my app It doesn't work. Please help. this is the code:
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
// NAVIGATION
import { LinkingOptions, NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Ionic from 'react-native-vector-icons/Ionicons';
//APP SCREENS
import AppScreens from '../../Screens/App';
// CHECK OUT NAVIGATOR GROUPS
// AUTH SCREENS
import AuthScreens from '../../Screens/Auth';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { useSelector } from 'react-redux';
import store from '../../Store';
type RootState = ReturnType<typeof store.getState>;
export type RootStackParamList = {
Login: undefined;
SignUp: undefined;
Wizard: undefined;
};
const WizardStack = createNativeStackNavigator<RootStackParamList>();
const WizardStackScreen = () => {
return (
<WizardStack.Navigator>
<WizardStack.Screen
options={() => ({
headerShown: false,
})}
name="Wizard"
component={AuthScreens.Wizard}
/>
<WizardStack.Screen
options={() => ({
headerShown: true,
})}
name="Login"
component={AuthScreens.Login}
/>
<WizardStack.Screen
options={() => ({
headerShown: true,
})}
name="SignUp"
component={AuthScreens.SignUp}
/>
</WizardStack.Navigator>
);
};
const AppStack = createNativeStackNavigator();
const AppStackScreen = () => {
return (
<AppStack.Navigator>
<AppStack.Screen
options={() => ({
headerShown: false,
})}
name="App"
component={TabScreens}
/>
</AppStack.Navigator>
);
};
const App = () => {
const [isLoading, setIsLoading] = useState(false);
const [userLoaded, setUserLoaded] = useState(false);
const userLogged = useSelector((state: RootState) => state.auth.logged);
useEffect(() => {
if (userLogged) {
setUserLoaded(true);
}
}, [userLogged]);
const config = {
screens: {
Wizard: 'wizard',
Login: 'login',
SignUp: 'signup',
},
};
const linking: LinkingOptions<RootStackParamList> = {
prefixes: ['clientsapp://app'],
config,
};
return (
<SafeAreaProvider>
{isLoading ? (
<AuthScreens.Splash />
) : (
<NavigationContainer
// linking={linking}
fallback={
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Loading... error</Text>
</View>
}>
<WizardStackScreen />
</NavigationContainer>
)}
</SafeAreaProvider>
);
};
export default App;
Related
I am new to react-native. I would like to open the camera on Pressable onPress event. Can anyone please give me the example of react-native-vision-camera. I have read the document. but really I don't know how to use the component. I have tried find-out the example, but no clue.
because I want to customize the video camera. for example, I want to show 1234 while recording. that's why I will go with react-native-vision-camera. I tried that package. but I couldn't able to open the camera. I am not sure what I am wrong and the documentation is also not clear for me. So I asked for help here. Can anyone please help ?
Upload.js
import React, {
useState,
useEffect,
useRef
} from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { Avatar, Button, Card, Title, Chip, Paragraph } from 'react-native-paper';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Image,
ImageBackground,
Pressable,
Dimensions,
PermissionsAndroid,
Platform,
TouchableOpacity
} from 'react-native';
import { Container } from 'native-base';
import Header from '../../Components/Header'
import colors from '../../Themes/Colors';
import Routes from '../../Navigation/Routes';
import useTranslation from '../../i18n';
import { IconX, ICON_TYPE } from '../../Icons';
import { ButtonX } from '../../Components';
import HeaderDoc from '../../Components/HeaderDoc';
import {
launchCamera,
launchImageLibrary
} from 'react-native-image-picker';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { org_id } from '../../Config';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import ImagePicker from 'react-native-image-crop-picker';
import ApplicantDetails from './ApplicationDetails';
import { CameraComponent } from './CameraComponent';
const UploadDoc = ({ navigation, route }) => {
const { t } = useTranslation();
const isDarkMode = useColorScheme() === 'dark';
const tagList = ['a', 'b', 'c', 'D', 'E', 'F'];
const [fileData, setfileData] = useState('');
const [fileUri, setfileUri] = useState('');
const camera = useRef(null);
useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'authorized');
})();
}, []);
return (
<SafeAreaView style={{ flex: 1, backgroundColor: colors.white }}>
<HeaderDoc title={'Upload Documents'} page={'1'} navigation={navigation} />
<View style={{ flex: 1, flexDirection: 'column' }}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ marginBottom: 130, backgroundColor: colors.white }}>
<View style={{ marginHorizontal: 20, marginTop: 10, marginBottom: 50 }}>
<Pressable
style={{width: 100, height: 30, backgroundColor: colors.primary, justifyContent: 'center',alignSelf: 'center',alignItems: 'center'}}
onPress={()=> CameraComponent()}>
<Text style={{color: colors.white}}>Take Photo</Text>
</Pressable>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
export default UploadDoc;
CameraComponent.js
import React, {
useState,
useEffect,
useRef
} from 'react';
import {
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {Camera, useCameraDevices} from 'react-native-vision-camera';
export const CameraComponent = () => {
console.log("asmasas")
useEffect(() => {
(async () => {
const newCameraPermission = await Camera.requestCameraPermission()
const newMicrophonePermission = await Camera.requestMicrophonePermission()
})();
},[])
const devices = useCameraDevices()
const device = devices.back
if (device == null) return null;
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
photo={true}
/>
)
}
First of all i assume youre using bare react native and not expo
Next then first you have to install the package via npm i or yarn install .
Then ill tell you for android
<uses-permission android:name="android.permission.CAMERA" />
<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
You have to add these in AndroidManifest.xml
Next get permission status by using
next then in your comp
App.js
export const App = () => {
useEffect(() => {
const newCameraPermission = await Camera.requestCameraPermission()
const newMicrophonePermission = await Camera.requestMicrophonePermission()
},[])
const devices = useCameraDevices()
const device = devices.back
if (device == null) return <LoadingView />
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
/>
)
}
Hop it helps
I am trying to build an demo app same like diagram below :
When, i am trying to navigate from Child screen to another screen , then drawer opens automatically :
Code: :
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, HeaderTitle } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createDrawerNavigator } from '#react-navigation/drawer'
import FoodListScreen from '../screens/FoodListScreen';
import FoodDetailsScreen from '../screens/FoodDetailsScreen';
import FavouriteScreen from '../screens/FavouritesScreen';
import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';
import { Button, Text, View } from 'react-native';
const Stack = createStackNavigator();
const FavouriteStack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
//// ********** HOME TAB STACK View ************
function HomeStackScreens() {
return (
<Stack.Navigator initialRouteName="HomeScreen" screenOptions = {({route, navigation}) => (
{
title: 'My home',
mode:'card',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerRight: () => (
<HeaderTitle>
<Button
onPress={() => {
navigation.navigate('FoodDetailsScreen')
console.log('This is a Right !!')
}
}
title="Info!"
/>
<Button
onPress={() => console.log('This is a Right most button!')}
title="Edit"
/>
<Button
onPress={() => console.log('This is a Right most button!')}
title="Delete"
/>
</HeaderTitle>
),
})}>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="FoodListScreen" component={FoodListScreen} />
<Stack.Screen name="FoodDetailsScreen" component={FoodDetailsScreen} options = {{
title: 'Food Details Title',
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: '#fff',
}}/>
<Stack.Screen name="FavouriteList" component={FavouriteScreen} />
</Stack.Navigator>
);
}
//// ********** Favourite TAB STACK View ************
function FavouriteStackScreens() {
return (
<FavouriteStack.Navigator>
<FavouriteStack.Screen name="FavouriteScreen" component={FavouriteScreen} />
<FavouriteStack.Screen name="FoodDetailsScreen" component={FoodDetailsScreen} />
</FavouriteStack.Navigator>
);
}
/// **** TAB View Of HOME Item of Drawer ********
function HomePageTabScreen() {
return (
<Tab.Navigator>
<Tab.Screen name="FoodTab" component={HomeStackScreens} />
<Tab.Screen name="FavouriteTab" component={FavouriteStackScreens} />
</Tab.Navigator>
)
}
///// The Main Drawer
const AppNavigator = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="NavHome"
drawerType= 'back'
overlayColor="transparent"
gestureHandlerProps
drawerStyle={{
backgroundColor: '#c6cbef',
width: 240,
}}
>
<Drawer.Screen name="NavHome" component={HomePageTabScreen} />
<Drawer.Screen name="About Us" component={AboutScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
export default AppNavigator;
Issue screen recording : video link
I want to add a BottomNavigation to one of the screen of my App, I already used StackNavigation. How do I Implement the BottomNavigation into the routing flow?
I have tried doing it this way
import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
import { Font } from 'expo';
const AuthStack = createStackNavigator(
{
LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
RegisterScreen: {screen: Register,navigationOptions: { header: null }},
},
{
initialRouteName: "LoginScreen",
}
);
const AppStack = createStackNavigator(
createBottomTabNavigator(
{
TimelineScreen:Timeline,
ProductScreen:Post
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'TimelineScreen') {
iconName = `ios-home${focused ? '' : '-outline'}`;
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = IconWithBadge;
} else if (routeName === 'ProductScreen') {
iconName = `ios-plus`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
)
)
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
Here is the IconWithBadge.js
import React, {Component} from 'react';
class IconWithBadge extends React.Component {
render() {
const { name, badgeCount, color, size } = this.props;
return (
<View style={{ width: 24, height: 24, margin: 5 }}>
<Ionicons name={name} size={size} color={color} />
{badgeCount > 0 && (
<View
style={{
// /If you're using react-native < 0.57 overflow outside of the parent
// will not work on Android, see https://git.io/fhLJ8
position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
{badgeCount}
</Text>
</View>
)}
</View>
);
}
}
Here is my App.js
import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
const AuthStack = createStackNavigator(
{
LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
RegisterScreen: {screen: Register,navigationOptions: { header: null }},
},
{
initialRouteName: "LoginScreen",
}
);
const AppStack = createStackNavigator(
{
TimelineScreen: {screen:Timeline,navigationOptions: { header: null,title: "Welcome to the dashboard" }}
}
)
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
My code seems not to work with my set up here, how do I place the Bottom Navigation routing into the stacknavgiation in order to see it on the TimelineScreen
Modify your code as following. Essentially replace createSwitchNavigator with createBottomTabNavigator
const AppContainer = createAppContainer(
createBottomTabNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
I am new to react native and i am trying to make screen which has two tabs and one drawer. For this i am using createTabnavigator inside createDrawerNavigator and this createDrawerNavigator inside createStackNavigator. I have enabled the swipeEnable but still the swipe gesture is not working for drawer but the tabs are working fine. Please help me to find a way to make this work.
Here is the set up of createDrawernavigator.
App.js
import React from "react";
import { TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
createMaterialTopTabNavigator
} from "react-navigation";
import Icon from "react-native-vector-icons/MaterialIcons";
import { DrawerActions } from "react-navigation-drawer";
import Login from "./modules/LoginPage/components/Form";
import NewComplaint from "./modules/newComplaint/components/Form";
import OpenTab from "./modules/homePage/components/OpenTab";
import ClosedTab from "./modules/homePage/components/CloseTab";
import complaintDetails from
"./modules/ComplaintDetail/components/Details";
const App = props =>
// eslint-disable-next-line react/prop-types
props.authentication.data.success ? (
<LoginRootStack />
) : (
<LoggedOutRootStack />
);
const Drawer = createDrawerNavigator(
{
OpenComplaints: createMaterialTopTabNavigator(
{
Open: { screen: OpenTab },
Closed: { screen: ClosedTab }
},
{
order: ["Open", "Closed"],
initialRouteName: "Open"
}
),
ClosedComplaints: createMaterialTopTabNavigator(
{
Open: { screen: OpenTab },
Closed: { screen: ClosedTab }
},
{
order: ["Open", "Closed"],
initialRouteName: "Closed"
}
)
},
{
navigationOptions: ({ navigation }) => ({
title: "Home",
drawerLockMode: "unlocked",
headerLeft: (
<TouchableOpacity
style={{ marginLeft: 10 }}
onPress={() => {
navigation.dispatch(DrawerActions.toggleDrawer());
}}
>
<Icon name="menu" size={30} color="#fff" navigation={navigation}
/>
</TouchableOpacity>
),
headerRight: (
<TouchableOpacity
style={{ marginRight: 10 }}
onPress={() => {
navigation.navigate("newComplaint");
}}
>
<Icon name="add" size={30} color="#fff" navigation={navigation} />
</TouchableOpacity>
),
headerStyle: {
backgroundColor: "#2980b9"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
}
}),
swipeEnabled: true,
contentOptions: {
activeTintColor: "#2980b9"
}
}
);
const LoggedOutStack = createStackNavigator(
{
Login: { screen: Login },
Home: { screen: Drawer },
newComplaint: { screen: NewComplaint },
Details: { screen: complaintDetails }
},
{
swipeEnabled: true,
initialRouteName: "Login",
headerMode: "none"
}
);
const LogggedInStack = createStackNavigator(
{
Login: { screen: Login },
Home: { screen: Drawer },
newComplaint: { screen: NewComplaint },
Details: { screen: complaintDetails }
},
{
swipeEnabled: true,
initialRouteName: "Home"
}
);
function mapStateToProps(state) {
return {
authentication: state.authentication
};
}
export const LoginRootStack = createAppContainer(LogggedInStack);
export const LoggedOutRootStack = createAppContainer(LoggedOutStack);
export default connect(mapStateToProps)(App);
Put LoggedOutStack and LogggedInStack in switchStackNavigator and put that switchStackNavigator in createAppContainer.
I've seen a ton of people having this issue, but no one's answer has solved this error for me. The error I'm getting is:
undefined is not an object react native evaluating this.props.navigation Here is a picture https://imgur.com/a/JP9RLZT
My goal is to create a login screen that leads to a mainscreen that has a tab bar. The bar works, but I can't figure out how to make the login screen open to that screen because of the above error.
My code for the applicable files looks like this:
app.js
import React from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation'
import MainScreen from './Components/MainScreen'
import Login from './Components/Login/Login'
export default class App extends React.Component {
static navigationOptions = {
title: 'LoginScreen',
headerStyle: {
backgroundColor: '#212121',
},
headerTitleStyle: {
color: '#fff'
}
};
render() {
//const { navigate } = this.props.navigation;
return (
<Login />
);
}
}
const AppStackNavigator = StackNavigator({
Login: {
screen: Login
},
Main: {
screen: MainScreen
},
},
{
initialRouteName: 'Login'
}
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})
AppRegistry.registerComponent('BIDMCATHOME', () => AppStackNavigator);
Here's my Login screen code
import React, { Component } from "react";
import {
Text,
} from "react-native";
import { Alert, Button, TextInput, View, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import { Icon } from 'native-base'
export default class Login extends Component {
constructor(props) {
super(props);
const { navigate } = this.props.navigation;
this.state = {
username: '',
password: '',
};
}
onLogin() {
const { username, password } = this.state;
// Alert.alert('Credentials', `${username} + ${password}`);
}
render() {
const { navigate } = this.props.navigation
return (
<View style={styles.container}>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>
<Button
value={this.state.Login}
title={'Login'}
style={styles.input}
onPress={() =>
navigate('MainScreen', { name: 'MainScreen' })}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
});
Here's my mainscreen (tab bar screen code)
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Platform
} from "react-native";
import HomeTab from './AppTabNavigator/HomeTab'
import SearchTab from './AppTabNavigator/SearchTab'
import AddMediaTab from './AppTabNavigator/AddMediaTab'
import LikesTab from './AppTabNavigator/LikesTab'
import ProfileTab from './AppTabNavigator/ProfileTab'
import { TabNavigator } from 'react-navigation'
import { Icon } from 'native-base'
class MainScreen extends Component {
static navigationOptions =
{
title: 'MainScreen',
};
render() {
return (
<AppTabNavigator />
);
}
}
export default MainScreen;
const AppTabNavigator = TabNavigator({
HomeTab: {
screen: HomeTab
},
SecondTab: {
screen: SearchTab
},
ThirdTab: {
screen: AddMediaTab
},
MedList: {
screen: LikesTab
},
ProfileTab: {
screen: ProfileTab
}
}, {
animationEnabled: false,
swipeEnabled: true,
tabBarPosition: "bottom",
tabBarOptions: {
style: {
...Platform.select({
android: {
backgroundColor: 'white'
}
})
},
activeTintColor: '#000',
inactiveTintColor: '#d1cece',
showLabel: true,
showIcon: false
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
When you are using a component and want to navigate to other pages via that component, you have to pass this.props.navigation to that component. in your code, you are using Login as a component so you can use this code:
render() {
//const { navigate } = this.props.navigation;
return (
<Login navigation={this.props.navigation} />
);
}
I hope this may help you..
I guess this.props.navigation in your Login component is undefined.
Can you please verify that using a console log.