I'm trying to figure out how to pass props to the 'Camera' component but getting a syntax error when i try
component= { Camera doSomething={this.doSomething}}
cant seem to find documentation to help on this one. Im sure its simple if you know how - hoping someone can assist.
my code
import React, { Component } from 'react';
import Camera from './camera'
import VideoComponent from './video'
import AudioComponent from './audio'
import File from './file'
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';
const CaptureNav = createMaterialBottomTabNavigator();
class Capture extends Component {
render(){
return (
<CaptureNav.Navigator >
<CaptureNav.Screen
name="Camera"
component= {Camera}
options={{
tabBarIcon : () => (
<MaterialCommunityIcons name='camera' color={'black'} size={26} />
)
}}
/>
<CaptureNav.Screen
name="Video"
component= {VideoComponent}
/>
<CaptureNav.Screen
name="Audio"
component= {AudioComponent}
/>
<CaptureNav.Screen
name="File"
component= {File}
/>
</CaptureNav.Navigator>
)
}
}
export default Capture
<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
check this
Related
I recently started developing apps using React Native.
During development, I needed to move data from a calendar to another view selected by the user.
I used async storage for this process.
But something went wrong.
Please refer to the following link.
And I made it so that I can pass data in the navigation process without using async storage afterwards.
However, this time, I found that nothing appears on the Detail screen even when February 15 is selected on the calendar.
And this was a problem that occurred even if I selected a date other than February 15th.
I don't know how to solve this problem.
I'm new to React Native development, so I don't know how to solve this problem.
This is my code
App.js
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import HomeScreen from './Home';
import DetailScreen from './Detail';
import { AntDesign } from '#expo/vector-icons';
import { Ionicons } from '#expo/vector-icons';
function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={({}) => ({
headerBackVisible: false,
headerRight: () => (
<AntDesign name="setting" size={24} color="black" />
),
})}
/>
<Stack.Screen name="Detail" component={DetailScreen}
options={({ navigation }) => ({
headerBackVisible: false,
headerLeft: () => (
<Ionicons name="arrow-back" size={24} color="black" onPress={() => navigation.navigate('Home')} />
),
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Home.js
import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View} from 'react-native';
function HomeScreen({navigation}) {
const markedDates = {
'2023-02-01': {marked: true, dotColor: 'red'},
}
return(
<SafeAreaProvider>
<View>
<Calendar
markedDates={markedDates}
onDayPress={(day) => {
navigation.push('Detail', {day});
}}
/>
</View>
</SafeAreaProvider>
);
}
export default HomeScreen;
Detail.js
import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {View, Text} from 'react-native';
function DetailScreen({route}) {
const { day } = route.params;
return(
<SafeAreaProvider>
<View>
<Text>{day}</Text>
</View>
</SafeAreaProvider>
);
}
export default DetailScreen;
And this is my development environment.
OS: macOS Monterey(12.6.3)
Development Program: Visual Studio Code (1.71.1)
Simulator: iPhone 14 (ios 16.2)
React native Version: 9.2.0
And I am using expo go to test it.
If anyone can help me please help.
because day value callback onDayPress of Calendar return is a object, you need parse it to string to show in screen. You can console.log(day) in file Detail.js to check pass params
How do I get to use custom font in React native when designing a Bottom tab navigator?
I have been able to use it on other forms without trouble, but on bottom tab navigator, I still appear to have some challenges with it.
My code looks thus, but it still is the same, Nothing changes.
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import HomePage from '../src/HomePage';
import TransfersPage from '../src/TransfersPage';
import ProfilesPage from '../src/ProfilePage';
import SettingsPage from '../src/SettingsPage';
import Icon from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
function BottomNavigation() {
return (
<Tab.Navigator screenOptions={({route}) => ({
headerShown:false,
style:{
fontFamily:'Poppins-Medium',
fontSize:27,
color : '#00BB23'
},
tabBarIcon:({color, size, focused}) =>{
let iconName;
if (route.name ==='HomePage'){
iconName = focused ? 'ios-home-sharp' : 'ios-home-outline'
}else if(route.name ==='Transfers'){
iconName = focused ? 'ios-send-sharp' : 'ios-send-outline'
}else if(route.name ==='Profile'){
iconName = focused ? 'ios-person-sharp' : 'ios-person-outline'
}else if(route.name ==='Settings'){
iconName = focused ? 'ios-settings-sharp' : 'ios-settings-outline'
}
return <Icon name={iconName} size={27} color={"#00BB23"} />
}
})}>
<Tab.Screen name="HomePage" component={HomePage} />
<Tab.Screen name="Transfers" component={TransfersPage} />
<Tab.Screen name="Profile" component={ProfilesPage} />
<Tab.Screen name="Settings" component={SettingsPage} />
</Tab.Navigator>
);
}
export default BottomNavigation;
And my app.Js looks like this :
import React from 'react';
import {Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SplashScreen from './src/SplashScreen';
import LoginPage from './src/LoginPage';
import RegisterPage from './src/RegisterPage';
import BottomNavigation from './navigation/BottomNavigation';
const Stack = createStackNavigator()
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}} />
<Stack.Screen name="Login" component={LoginPage} options={{headerShown:false}} />
<Stack.Screen name="Register" component={RegisterPage} />
<Stack.Screen name="Dashboard" component={BottomNavigation} options={{headerShown:false}} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Is there something i am not doing correctly?
<Tab.Screen
options={() => ({
tabBarIcon: ({ focused }) => (
<View
style={[
styles.usContainer,
{ borderColor: focused ? colors.primary : colors.white },
]}>
<Text
style={[
styles.usText,
{ color: focused ? colors.primary : colors.white },
]}>
US
</Text>
</View>
),
})}
name="us-screen"
component={Demo}
/>
you can use your custom component like that
This error occurs while using navigation. I don't understand why you do that.
The above error occurs when trying to navigate from HomeScreen to SignUp Detail through navigation.
I've looked everywhere, but I'm asking because I can't find the answer.
This error occurs while using navigation. I don't understand why you do that.
The above error occurs when trying to navigate from HomeScreen to SignUp Detail through navigation.
I've looked everywhere, but I'm asking because I can't find the answer.
this code App.js
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import SignUp from "./components/signupdetail/signup";
import HomeScreen from "./components/homeScreen";
const Stack = createStackNavigator();
const App = () => {
return (
<>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="SignUp" component={SignUp} /> //my problem
</Stack.Navigator>
</NavigationContainer>
</>
);
};
export default App;
this code Homescreen
import Login from "./loginScreen/login";
import ButtonComponent from "./loginScreen/button";
import LostPassword from "./loginScreen/lostpassword";
import SocialLogin from "./loginScreen/sociallogin";
import SignUp from "./loginScreen/signup";
const HomeScreen = (props) => {
return (
<>
<SafeAreaView style={styles.container}>
<Text style={styles.header}>everywear</Text>
</SafeAreaView>
<View>
<Login />
<ButtonComponent />
<LostPassword />
<SocialLogin />
<SignUp navigation={props} />
</View>
</>
);
};
export default HomeScreen;
this code signup
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
const SignUp = (props) => {
const { navigation } = props;
return (
<>
<View style={styles.container}>
<Text style={styles.text}>혹시 처음이신가요?</Text>
<TouchableHighlight
onPress={() => {
navigation.navigate("SignUp");
}}
underlayColor="gray"
style={styles.button}
>
<>
<Text style={styles.signuptext}>회원가입</Text>
</>
</TouchableHighlight>
</View>
</>
);
};
export default SignUp;
There are different ways to fix this issue.
Easiest one would be to change like below
<SignUp navigation={props.navigation} />
This will pass the navigation prop correctly and the rest of the code would work as expected.
the useNavigation hook
you can use the hook like below
const SignUp = (props) => {
const navigation = useNavigation();
then no need to pass the prop from the parent.
my friends, hope you doing well, I need some help with my React Native project.
I have the following code and struggling with the navigation for the "NewPost" screen.
I want to create a button in the header and handle press on it but can not figure out how to do it. Thanks for your precious help:
import React from 'react';
import 'react-native-gesture-handler';
import { TouchableOpacity } from 'react-native'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Provider } from './src/context/BlogContext';
import IndexScreen from './src/screens/IndexScreen';
import CreatePost from './src/screens/CreatePost';
import ShowScreen from './src/screens/ShowScreen';
import { AntDesign } from '#expo/vector-icons'
const Stack = createStackNavigator()
const App = ({navigation}) => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Index'>
<Stack.Screen name='Index'
component={IndexScreen}
options={{
title: 'Blogs',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('NewPost')}>
<AntDesign name="plus" size={24} color="black" />
</TouchableOpacity>
)
}} />
<Stack.Screen name='ShowScreen' component={ShowScreen} options={{ title: 'Post Details' }} />
<Stack.Screen name='NewPost' component={CreatePost} options={{ title: 'Create a Post' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default () => {
return (
<Provider>
<App />
</Provider>
)
}
First thing you cannot access navigation outside of the NavigationContainer so remove navigation from your App declaration :
const App = ({}) => { // remove navigation object from here
Now, to do user redirection on headerRight press, you can actually access naviagation on your headerRight and navigation user as below :
headerRight: ({navigation}) => (
<TouchableOpacity onPress={() => navigation.navigate('NewPost')}>
<AntDesign name="plus" size={24} color="black" />
</TouchableOpacity>
)
We can use useNavigation hook to implement the navigation In the navigator component.
For Example:
import React from 'react';
import 'react-native-gesture-handler';
import { TouchableOpacity } from 'react-native'
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Provider } from './src/context/BlogContext';
import IndexScreen from './src/screens/IndexScreen';
import CreatePost from './src/screens/CreatePost';
import ShowScreen from './src/screens/ShowScreen';
import { AntDesign } from '#expo/vector-icons'
const Stack = createStackNavigator()
const App = props => {
const navigation = useNavigation();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Index'>
<Stack.Screen name='Index'
component={IndexScreen}
options={{
title: 'Blogs',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('NewPost')}>
<AntDesign name="plus" size={24} color="black" />
</TouchableOpacity>
)
}} />
<Stack.Screen name='ShowScreen' component={ShowScreen} options={{ title: 'Post Details' }} />
<Stack.Screen name='NewPost' component={CreatePost} options={{ title: 'Create a Post' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default () => {
return (
<Provider>
<App />
</Provider>
)
}
Here is the solution I got for my question:
options={({navigation}) => ({
title: 'Blogs',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('NewPost')}>
import React from 'react';
import 'react-native-gesture-handler';
import { TouchableOpacity } from 'react-native'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Provider } from './src/context/BlogContext';
import IndexScreen from './src/screens/IndexScreen';
import CreatePost from './src/screens/CreatePost';
import ShowScreen from './src/screens/ShowScreen';
import { AntDesign } from '#expo/vector-icons'
const Stack = createStackNavigator()
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Index'>
<Stack.Screen name='Index'
component={IndexScreen}
options={({navigation}) => ({
title: 'Blogs',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('NewPost')}>
<AntDesign name="plus" size={24} color="black" />
</TouchableOpacity>
)
})} />
<Stack.Screen name='ShowScreen' component={ShowScreen} options={{ title: 'Post Details' }} />
<Stack.Screen name='NewPost' component={CreatePost} options={{ title: 'Create a Post' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default () => {
return (
<Provider>
<App />
</Provider>
)
}
I have a webview component in my project, where the flow being =>
The bottomTabBar opens the initial screen of the url that is given to Webview source prop, which should remain, when any link is clicked on the webview and it moves to another screen, the bottomtabbar should not come up.
Below is my WebviewScreen code :
import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
import {View, SafeAreaView, ActivityIndicator} from 'react-native';
export default class ConsultationHomeScreen extends Component {
renderLoadingView = () => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<ActivityIndicator size="large" />
</View>
);
};
render() {
const {url} = this.props.route.params;
return (
<SafeAreaView style={{flex: 1}}>
<WebView
source={{uri: url}}
renderLoading={this.renderLoadingView}
startInLoadingState={true}
ref={(ref) => {
this.webview = ref;
}}
onNavigationStateChange={(event) => {
if (event.url !== url) {
this.webview.stopLoading();
}
}}
/>
</SafeAreaView>
);
}
}
And Appnavigation.js
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import LoginScreen from '../screens/authentication/LoginScreen';
import OtpScreen from '../screens/authentication/OtpScreen';
import AddChild from '../screens/Child/AddChild';
import AcceptInviteScreen from '../screens/AcceptInviteScreen';
import ConsultationHomeScreen from '../screens/ConsultationHomeScreen';
import HomeScreen from '../screens/HomeScreen/HomeScreen';
import PlansScreen from '../screens/PlansScreen';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
function BottomTabBar() {
return (
<Tab.Navigator
lazy={false}
tabBarOptions={{
labelStyle: {
color: '#FF1493',
fontSize: 15,
},
}}>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: () => {
<MaterialIcon name="home" color="#FF1493" size={20} />;
},
}}
/>
<Tab.Screen
name="Consult"
component={ConsultationHomeScreen}
initialParams={{
url: 'some link',
}}
/>
<Tab.Screen name="Plans" component={PlansScreen} />
</Tab.Navigator>
);
}
export default function AppNavigation() {
return (
<NavigationContainer>
<Stack.Navigator headerMode="none">
<Stack.Screen name="login" component={LoginScreen} />
<Stack.Screen name="otp" component={OtpScreen} />
<Stack.Screen name="addchild" component={AddChild} />
<Stack.Screen
name="acceptinvitescreen"
component={AcceptInviteScreen}
/>
<Stack.Screen name="home" component={BottomTabBar} />
</Stack.Navigator>
</NavigationContainer>
);
}
However, am unable to remove the bottomtabbar,could anyone please suggest how should I implement this behaviour?
Step1-> Webview initial screen renders and has bottomtabtabr
Step2-> Link clicked on the initial screen and navigates to next screen handled by web source
Step3->Bottom tab bar should not occur anywhere but only on the first initial screen
Please,any suggestion would be appreciated and let me know if anything else is required for better understanding.
I tested this modification in your source code and it works like a charm.
GIT difference in WebviewScreen.js :
## -23,6 +23,7 ## export default class ConsultationHomeScreen extends Component {
}}
onNavigationStateChange={(event) => {
if (event.url !== url) {
+ this.props.navigation.setOptions({ tabBarVisible: false });
this.webview.stopLoading();
}
}}
Let me know if you have any issue.