I am using react navigation to navigate between different screens.
below is my code:
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Home from "./screen/Home";
function Main({ navigation }) {
return (
<View style={styles.container}>
<View style={{flex: 0}}>
<Text>Welcome</Text>
</View>
<View style={{flex: 0}}>
<TouchableOpacity style={styles.btn} onPress={() => navigation.navigate('Home')}>
<Text>Goto Home</Text>
</TouchableOpacity>
</View>
</View>
);
}
const MainNavigator = createStackNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<MainNavigator.Navigator >
<MainNavigator.Screen name="Main" component={Main} />
<MainNavigator.Screen name="Home" component={Home} />
</MainNavigator.Navigator>
</NavigationContainer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1, backgroundColor: '#44210D', alignItems: 'center', justifyContent: 'center',
},
text: {
color: "black", borderWidth: 2, borderColor: "green"
},
btn: {
alignItems: "center", backgroundColor: "#DDDDDD", padding: 10,margin: 10
},
});
You can see in the image that there is a white space at the top. I want to know how can I change the color of that space.
Related
This is my first React Native app. I want to get the header hamburger icon to open the side bar (drawer) but it only read it as undefined. So I read that it´s not possible to implement openDrawer() on a header as it is not read as a "screen". I have not been able to understand how to change my code to make it work. Help appreciated.
My code:
//Header
import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "#expo/vector-icons";
export const Header = ({ navigation, title }) => {
const openMenu = () => {
navigation.openDrawer();
};
return (
<View style={styles.header}>
<TouchableOpacity onPress={openMenu} style={styles.icons}>
<Ionicons name="md-menu" size={28} color="white" />
</TouchableOpacity>
<View style={styles.headerTitle}>
<Text style={styles.headerText}>{title}Title for header</Text>
</View>
</View>
);
};
//Navigation screen
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { Notifications } from "./screens/Notifications";
import { Profile } from "./screens/Profile";
import { Header } from "./screens/Header";
const Drawer = createDrawerNavigator();
export const Navigation = () => {
return (
<>
<Header />
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="Profile" component={Profile} />
<Drawer.Screen name="Notifications" component={Notifications} />
</Drawer.Navigator>
</NavigationContainer>
</>
);
};
Firstly, create a folder called navigation where your App.js is located
Inside navigation folder create a file called AppNavigator.js
Then paste this inside AppNavigator.js
import React from "react";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { Notifications } from "./screens/Notifications";
import { Profile } from "./screens/Profile";
const Drawer = createDrawerNavigator();
function AppNavigator() {
return (
<Drawer.Navigator screenOptions={{ headerShown: true }}>
<Drawer.Screen name="Profile" component={Profile} />
<Drawer.Screen name="Notifications" component={Notifications} />
</Drawer.Navigator>
);
}
export default AppNavigator;
In your App.js paste this code
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import AppNavigator from "./navigation/AppNavigator"
const App = () => {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
};
export default App;
Your Login.js would look like this
import React, { useState } from "react";
import {
TouchableOpacity,
TextInput,
Text,
View,
StyleSheet,
} from "react-native";
export const Login = ({ navigation }) => {
const [userName, setUserName] = useState("");
const [password, setPassword] = useState("");
return (
<View style={styles.container}>
<Text style={styles.welcomeText}>Welcome to your App</Text>
<View style={styles.inputView}>
<TextInput
// required
style={styles.inputText}
placeholder="Email"
placeholderTextColor="#fff"
onChangeText={(value) => setUserName(value)}
defaultValue={userName}
/>
</View>
<View style={styles.inputView}>
<TextInput
// required
style={styles.inputText}
placeholder="Password"
placeholderTextColor="#fff"
onChangeText={(value) => setPassword(value)}
defaultValue={password}
/>
</View>
<TouchableOpacity>
<Text style={styles.forgot}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.loginButton}
title="Login"
onPress={() => navigation.navigate("NavigationTest", { userName })}
>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
welcomeText: {
color: "#fb5b5a",
fontWeight: "bold",
fontSize: 50,
textAlign: "center",
margin: 40,
},
inputView: {
width: "80%",
backgroundColor: "#465880",
borderRadius: 25,
height: 50,
marginBottom: 20,
justifyContent: "center",
padding: 20,
},
inputText: {
height: 50,
color: "white",
},
loginButton: {
width: "80%",
backgroundColor: "#fb5b5a",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 40,
marginBottom: 10,
},
forgot: {
color: "grey",
},
loginText: {
color: "#ffff",
fontWeight: "bold",
},
});
I tried to implement this codes, But failed. 'undefined is not an object (evaluating 'navigation.navigate') ' error shows when I click that object. I want use TouchableOpacity, not button. How can I fix? or Can I use button without default style in touchableOpacity located place?
import React from 'react'
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native'
import { Ionicons } from '#expo/vector-icons'
const ArticleItem = ({
article: {
id,
title,
content,
date,
},
navigation,
}) => {
return (
<View>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => navigation.navigate('ViewStack')} <-error point
>
<View style={styles.container}>
<View style={styles.icon}>
<Ionicons name="md-list" size={14} color="#9E9E9E"/>
</View>
<View style={styles.info}>
<Text style={styles.title}>
{title}
</Text>
<Text style={styles.content}>
{content}
</Text>
<Text style={styles.date}>
{date}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
padding: 16,
paddingBottom: 0,
},
icon: {
width: 16,
height: 16,
marginRight: 8,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.select({
ios: 3, android: 8,
})
},
title: {
marginBottom: 8,
fontSize: 16,
fontWeight: '800',
color: '#212121',
},
content: {
marginBottom: 4,
fontSize: 14,
color: '#9E9E9E',
lineHeight: 18,
},
date: {
fontSize: 12,
color: '#BDBDBD',
},
info: {
flex: 1,
paddingBottom: 16,
borderBottomWidth: 1,
borderBottomColor: '#DEDEDE',
},
})
export default ArticleItem
ArticleItem.js
import React from 'react'
import {
View,
Text,
} from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import ViewDiaryScreen from './ViewDiaryScreen'
const Stack = createStackNavigator();
const ViewStackScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen name="ViewStack" component={ViewDiaryScreen}/>
</Stack.Navigator>
)
}
export default ViewStackScreen
ViewStackScreen.js (placed in screens/ViewStackScreen.js)
import React from 'react'
import {
Text,
StyleSheet,
SafeAreaView,
} from 'react-native'
const ViewDiaryScreen = () => {
return (
<SafeAreaView style={styles.container}>
<Text>
Screen
</Text>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
})
export default ViewDiaryScreen
ViewDiaryScreen.js
import React from 'react'
import {
View,
Text,
} from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import Header from '../components/Header'
import ArticleItem from '../components/ArticleItem'
const DiaryScreen = () => {
return (
<View style={{ flex: 1}}>
<Header title="new Diary" />
<ArticleItem
article={{
id: 1,
title: 'Test1',
content: 'contentTest1',
date: '2021/1/2',
}}
/>
<ArticleItem
article={{
id: 1,
title: 'Test2',
content: 'contentTest2',
date: '2021/1/2',
}}
/>
</View>
);
}
export default DiaryScreen
DiaryScreen.js
As Hend EL-Sahli mentioned, it has nothing to do with your TouchableOpacity but I believe you should have both of the screens in your stack Navigator, Like this:
return (
<Stack.Navigator>
<Stack.Screen name="ArticleItem" component={ArticleItem}/>
<Stack.Screen name="Viewstack" component={ViewDiaryScreen}/>
</Stack.Navigator>
)
LoginScreen.js
import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native'
import { color } from 'react-native-reanimated'
import Button from 'react-native-elements'
import ValidationComponent from "react-native-form-validator"
import axios from 'axios'
import AsyncStorage from '#react-native-community/async-storage'
export default class LoginScreen extends ValidationComponent {
render() {
return (
<View style = {{
width:'100%',
height:'100%',
justifyContent: 'center',
alignSelf: 'center',
alignContent: 'center',
alignItems: 'center' }}>
<Text style={styles.TextLogin}>DEW WATER</Text>
<TextInput placeholder={'Enter the user Name'}
onChangeText={(value) => this.setState({username : value})}
style={{ height:42, width:'80%',
borderBottomWidth:1 }}/>
<TextInput placeholder={'Enter the user password'}
onChangeText={(value) => this.setState({password : value})}
style={{ height:42, width:'80%',
borderBottomWidth:1, marginTop: '5%'}}/>
<View style={{
marginTop:'10%',
width:'80%'}}>
<Button titleStyle={{fontSize: 22,}} buttonStyle={{borderRadius:50,width:100,backgroundColor:'#307cee',marginBottom:5 }}
onPress={this._onPressButton} color='white' title='LoginScreen'></Button>
<View style={styles.Signup}>
<Text style={[styles.textSignup, {color: 'gray'}]}>Don't have an account?</Text>
<TouchableOpacity
onPress = {() => {this.props.navigation.replace("RegisterScreen")}}>
<Text style={[styles.textSignup, {color:'#3465d9', marginLeft: 4}]}>Signup</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
const styles =StyleSheet.create({
TextLogin: {
fontSize: 35,
marginBottom: 60,
opacity: 0.9,
color:'#5f9ea0'
},
Signup: {
marginTop: 25,
flexDirection: 'row',
justifyContent: 'center'
},
textSignup: {
textAlign: 'center'
}
})
App.js
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import LoginScreen from './screens/LoginScreen'
import RegisterScreen from './screens/RegisterScreen'
import Template from './screens/Page/Template'
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name = 'Login' component = {LoginScreen}/>
<Stack.Screen name = 'Register' component = {RegisterScreen}/>
<Stack.Screen name = 'Template' component = {Template}/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;
I am working on a react native application and am trying to understand how to deal with react navigation as it affects my styling. Essentially when I navigate to a page, react navigation's top arrow with header is displacing my components (I'd like to move my black header bar up and use react navigation's arrow ideally):
I have react navigation set up in the following manner:
App.js
const ProfileNavigator = createStackNavigator({
//Profile: { screen: Profile},
QR: { screen: GenerateQR },
EditAccount: { screen: EditAccount }
});
const AppNavigator = createSwitchNavigator({
tabs: bottomTabNavigator,
profile: ProfileNavigator
})
const AppContainer = createAppContainer(AppNavigator);
I have a header component I put together for styling that I use on top of each page:
pageTemplate
import React, {Component} from 'react';
import {Text,View, StyleSheet} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Ionicons } from '#expo/vector-icons';
class PageTemplate extends Component {
render() {
return (
<View
style={{
flexDirection: 'row',
height: 130,
alignSelf: 'stretch',
width: '100%'
}}>
<View style={{backgroundColor: 'black', alignSelf: 'stretch',width: '100%'}} />
<View style=
{{position:'absolute',
marginTop: '16%',
marginLeft: '3%',
display: 'flex',
flexDirection: 'row',
flex:1
}}>
<TouchableOpacity onPress={this.props.navigate}>
<Ionicons name="ios-arrow-dropleft" size={32} color="white" />
</TouchableOpacity>
</View>
<Text
style={{
position: 'absolute',
marginTop: '15%',
marginLeft: '12%',
color: 'white',
fontSize: 30}}
>
{this.props.title}
</Text>
</View>
);
}
}
export default PageTemplate;
I have a tab called profile which navigates through a list item to get to an account edits page:
Profile
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { List, ListItem } from 'react-native-elements'
import GenerateQR from './generateQR';
import PageTemplate from './smallComponents/pageTemplate';
import pic from '../assets/bigRate.png'
export default class Profile extends React.Component {
render() {
const { navigate } = this.props.navigation;
navigateBack=()=>{
navigate('Queue')
}
return(
<React.Fragment>
<PageTemplate title={'Profile Settings'} navigate={navigateBack} />
{/*<Image source={pic} />*/}
{/** Frst Section */}
<View style={{
//backgroundColor:'blue'
}}>
<Text style={styles.section}>Account Information</Text>
</View>
<TouchableOpacity
onPress={()=>{navigate('EditAccount')}}
style={{position: 'absolute',
marginTop:'32%',
flex:1,
flexDirection: 'row',
flexWrap: 'wrap'}}>
<View style={{
marginLeft:'5%',
flex:1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
//backgroundColor:'yellow',
alignItems: 'center',
//borderRadius:50,
//height:'60%'
}} >
<Ionicons style={{marginLeft:'20%'}} name="ios-person" size={72} />
</View>
<View style={{paddingTop:50,
marginRight:'40%',
flex:2,
flexDirection: 'row',
flexWrap: 'wrap',
//backgroundColor: 'red'
}}
>
<Text>Sylvester Stallone</Text>
<Text>+1 646-897-0098</Text>
<Text>SlyLone#gmail.com</Text>
</View>
</TouchableOpacity>
{/**add line section */}
</React.Fragment>
);
}
}
const styles = StyleSheet.create({
option : {
//position: 'absolute',
marginLeft:'7%',
alignSelf: 'stretch',
width: '100%',
height: '15%',
//flexWrap: 'wrap',
justifyContent:'space-between',
//padding:20
},
section : {
fontSize:20,
marginLeft:'5%'
}
})
/**
*
*
*
<View style={styles.option}>
<Ionicons name="ios-gift" size={32} />
<TouchableHighlight>
<Text>Rewards</Text>
</TouchableHighlight>
</View>
*
*/
Ideally it be nice to drop the arrow icon and move the header up keeping react-navigations arrow.
If you want to get rid of the arrows, you can create your own headers.
Example
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('#expo/snack-static/react-native-logo.png')}
style={{ width: 30, height: 30, alignSelf:"center" }}
/>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
// headerTitle instead of title
headerTitle: () => <LogoTitle />,
headerLeft: () => (
<Button
onPress={() => alert('This is a button!')}
title="back"
color="#fff"
/>
),
};
I am an beginner in react native.I want to display home page after logged in.I have install react-navigator using npm install and I have tried below code.
But I am getting below error, I tried to solve this. Still I have the error.
In App.js
//This is an example code for Bottom Navigation//
import React, { Component } from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ marginTop: 50, fontSize: 25 }}>Setting!</Text>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Two')}>
<Text>Go to Home Tab</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Two')}>
<Text>Open Detail Screen</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Two')}>
<Text>Open Profile Screen</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});
Can anyone assist me to solve this?
You can do it as following:
import React from "react";
import { View, Text } from "react-native";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
class LoginScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Login Screen</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
</View>
);
}
}
on App.js,
import React from 'react';
import { HomeScreen, LoginScreen } from '..'// should set the proper path.
const AppNavigator = createStackNavigator({
Login: LoginScreen,
Home: HomeScreen
});
const App = () => {
return <AppNavigator />;
}
export default App;