i'm currently trying to implement custom component to show the icon i've.
i got no error when rendering it , but 2 of list of screen didn't shows up. am i need to do something with styling or there's a problem with my code
if anyone could inspect my code that would be awesome
this is my error
here are my code
App.js
import React from 'react';
import {
StyleSheet,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image,
Text
} from 'react-native';
import {
createDrawerNavigator,
DrawerItems
} from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import SettingsScreen from './screen/SettingsScreen';
export default class App extends React.Component {
render () {
return (
<AppDrawerNavigator />
);
}
}
const CustomDrawerComponent = ( props ) => (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('./img/cs.png')}
style={{height:120, width:120, borderRadius: 20}}
/>
</View>
</ScrollView>
</SafeAreaView>
)
const AppDrawerNavigator = createDrawerNavigator ({
Home: HomeScreen,
Settings: SettingsScreen
},{
contentComponent: CustomDrawerComponent
})
const styles = StyleSheet.create({
container: {
flex: 0,
color: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Homescreen.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class HomeScreen extends Component {
render () {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
export default HomeScreen ;
const styles = StyleSheet.create({
container: {
flex: 1,
color: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
According to the official doc, your Drawer Navigator has to be defined like:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
}
});
You're not assigning an object with a prop screen to each custom screen.
For more details take a look at doc.
as I understand, you need to add DrawerItems to your drawer.
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerComponent = ( props ) => (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('./img/cs.png')}
style={{height:120, width:120, borderRadius: 20}}
/>
</View>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
Related
your texti'm tryng to navigate with the props navigation as a nested navigation and i'm getting this error
ERROR The action 'NAVIGATE' with payload {"name":"Man"} was not handled by any navigator.
Do you have a screen named 'Man'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.
i suspact that is becose i didnt set the screen but i dont wont to set the screen becose i wont it to render only when the user is clicking on the button
i'm tryng to navigate the component man
this is my code
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function Man() {
return (
<View style={styles.container}>
<Text>Man</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs"
import { useNavigation } from '#react-navigation/native';
import Home from "./screens/Home";
import Exhibition from "./screens/Exhibition";
import Cart from "./screens/Cart";
export default function App() {
const Tab = createBottomTabNavigator();
// const navigation = useNavigation();
return (
<NavigationContainer>
<Tab.Navigator >
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Exhibition" component={Exhibition} />
<Tab.Screen name="Cart" component={Cart} />
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
// marginLeft: 50
},
});
import { StatusBar } from "expo-status-bar";
import {createStackNavigator} from '#react-navigation/stack';
import {
FlatList,
Image,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import { useState } from "react";
import { useNavigation, StackActions, useNavigationContainerRef } from "#react-navigation/native";
import Man from "./Man";
import Woman from './Woman'
export default function Home({navigation}: any) {
const navigationRef = useNavigationContainerRef()
const collections: { name: string; img: any; compo: any; key: number }[]= [
{
name: "man collection",
img: require("../assets/manModel.jpeg"),
compo: "Man",
key: 1,
},
{
name: "woman collection",
img: require("../assets/womanModel.jpg"),
compo: "Woman",
key: 2,
},
]
const Stack = createNativeStackNavigator();
// const navigation = useNavigation();
return (
<View style={styles.container}>
<FlatList
numColumns={2}
data={collections}
renderItem={({ item }) => (
<>
<TouchableOpacity
onPress={() => {
navigation.navigate('Man');
}}
>
<Image style={styles.image} source={item.img} />
<Text style={styles.title}>{item.name}</Text>
</TouchableOpacity>
</>
)}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
image: {
width: 170,
height: 180,
margin: 15,
},
title: {
position: "absolute",
left: "15%",
right: "15%",
width: "70%",
top: 90,
fontSize: 17,
color: "white",
backgroundColor: "purple",
fontWeight: "bold",
textAlign: "center",
},
});
I am trying to make a reusable text input component, but I want to grab the value that the user types to manipulate it on the App.js
TextInputComponent.js
import React, {useState} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'
const TextInputComponent = (props) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={onChangeText} placeholder="Enter"/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: 50,
width: 200,
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: "black",
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default TextInputComponent
App.js
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import TextInputComponent from './src/components/TextInputComponent';
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row' }}>
<Text>Test</Text>
<TextInputComponent/>
<Button title="A" onPress={()=> console.log(-------> text value from TextInputComponent <-----)}></Button>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In order to access the state value created on the TextInputComponent.js what do I need to do?
One thing you can do is to pass a custom method through to the component and then use it as the onChangeText method:
const TextInputComponent = ({ customMethod }) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={(txt) => customMethod(txt)} placeholder="Enter"/>
</View>
)
}
Then in App.js you have the method:
customMethod = (txt) => {
// do something with txt variable
}
and:
<TextInputComponent customMethod={customMethod} />
Might require some tweaking to get it to work (I didn't test it), but that's the general idea.
When running the app on the iPhone X simulator the Material Top Tab Navigator cuts into the notch and bottom button.
To fix this I have tried to implement the SafeAreaView before applying the App Container and to wrap each individual screen in SafeAreaViews. This works to keep the text away from these areas but not the navigator.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createAppContainer, createMaterialTopTabNavigator, SafeAreaView } from 'react-navigation';
class Calculator extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Calculator!</Text>
</View>
);
}
}
class Camera extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Camera!</Text>
</View>
);
}
}
class Solution extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Solution!</Text>
</View>
);
}
}
const TabNavigator = createMaterialTopTabNavigator(
{
Calculator,
Camera,
Solution
},
{
tabBarPosition: 'bottom',
}
);
const AppContainer = createAppContainer(TabNavigator);
class App extends Component {
render() {
return (
<SafeAreaView>
<AppContainer/>
</SafeAreaView>
);
}
}
export default App;
When running this application, no errors are present. However, nothing renders. What I would expect is a tab navigator renders with three tabs that doesn't cut under the notch or bottom button.
give SafeAreaView a size
<SafeAreaView style={{ flex: 1 }}>
<AppContainer/>
</SafeAreaView>
if AppContainer still spreads full screen,
change import { SafeAreaView } from 'react-navigation'
to import { SafeAreaView } from 'react-native'
You need to provide flex: 1 as style to the SafeAreaView Component
<SafeAreaView style={{flex: 1}}>
{/* Component here */}
</SafeAreaView>
picture
My problem is that I don't know were to put "title". I have TabNavigator, with two pages. You can see on the image, which is what I really want to do.
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View >
<Button
title='Click me'
onPress={() => this.props.navigation.navigate('HomeScreen')} />
</View>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
export default createMaterialTopTabNavigator({
Test1: { screen: HomeScreen },
Test2: { screen: SettingsScreen },
});
One possible solution is to wrap the MaterialTopTabNavigatorinside a StackNavigator and add the title option to it. So your code should looks something similar to this:
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View >
<Button
title='Click me'
onPress={() => this.props.navigation.navigate('HomeScreen')} />
</View>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const App = createMaterialTopTabNavigator({
Test1: { screen: HomeScreen },
Test2: { screen: SettingsScreen },
});
export default createStackNavigator({
app: {
screen: App,
navigationOptions: {
title: 'Screen title',
},
},
});
i have three pages.
app.js, login.js and mainpage.js
i am having problem of going from login to mainpage.
The problem appears to be in Login.js in logibtn function.
i also tried this.props.navigation instead of passing a parameter, but it still didnt work.
App.js
import React, {Component} from 'react';
import {View, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
import { StackNavigator} from "react-navigation";
import Login from './src/Login';
import MainPage from './src/MainPage';
const NavigationApp = StackNavigator({
LoginPage:{
screen: Login
},
MainPagePage:{
screen: MainPage
}
}
)
export default class extends Component{
render(){
return(
<NavigationApp/>
)
}
}
Login.js
import React, {Component} from 'react';
import {View, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
export default class extends Component{
static navigationOptions={
title:"Login"
};
constructor(props){
super(props);
this.state= {title:'login', username:'', password:''}
this.loginbtn = this.loginbtn.bind(this);
}
loginbtn(navigate){
let username='Parisa';
let password='123';
if(this.state.username===username && this.state.password===password){
navigate('MainPage')
title="MainPage";
}
else{
alert("Incorrect Username or Password");
}
}
render(){
const { navigate } = this.props.navigation;
return(
<View style={Styles.container}>
<Text style={Styles.title}>
To-Do List
</Text>
<View style={Styles.shadow}>
<TextInput
style={Styles.input}
placeholder="Enter username"
onChangeText={(text) => {this.state.username = text} }
/>
<TextInput
style={Styles.input}
secureTextEntry={true}
placeholder="Enter password"
onChangeText={(text) => {this.state.password = text} }
/>
<TouchableOpacity style={Styles.button} onPress={() => this.loginbtn(navigate)}>
<Text style={Styles.buttonText}>Log in</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
const Styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor: "white",
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
title:{
fontWeight:"bold",
fontSize: 30,
width:180,
textAlign: "center",
color:"#310505"
},
shadow:{
elevation: 50,
borderRadius: 4,
borderWidth: 20,
borderColor: '#Fff',
backgroundColor: '#FFF'
},
input:{
color:"#310505"
},
button:{
backgroundColor:'#310505',
width:180,
height: 30
},
buttonText:{
fontSize: 20,
color:"white",
textAlign: "center"
}
}
)
MainPage.js
import React, {Component} from "react";
import {View, Text} from "react-native";
export default class extends Component{
static navigationOptions ={
title:"MainPage"
}
render(){
return(
<View>
<Text>MainPage</Text>
</View>
)
}
}
Use
this.props.navigation.navigate('MainPagePage')
instead of
this.props.navigation.navigate('MainPage')
as you have defined inside the Stack navigator.