I have a Custom Button Component with this code
import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
const CustomBtn = ({props, text, onPress }) => (
<TouchableOpacity {...props} onPress={onPress}>
<View style={styles.button}>
<Text style={styles.text}>{text}</Text>
</View>
</TouchableOpacity>
);
CustomBtn = {
text: PropTypes.string,
onPress: PropTypes.func,
};
export default CustomBtn;
I want to override the styles (Margins, Paddings) of the Component in my view where I write
<CustomBtn style={styles.BtnMargin} onPress={this.handlePressLogin} text="Login" />
But my custom Button don't get the style. How to change the code for the custom btn to solve this?
You are using the stateless component wrong. If you look at the signature you can notice that it accepts props as an argument:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
In the line {...props} varibale props is undefined because it is the same as this.props.props in a normal component. What you really want to do is:
const CustomBtn = (props) => (
<TouchableOpacity {...props} onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.text}>{props.text}</Text>
</View>
</TouchableOpacity>
);
Related
I used This <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> to open other page, But when I click <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> in photos page, I got this error:
enter image description here
The code:
import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, Dimensions, StyleSheet, StatusBar, Image} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Animatable from 'react-native-animatable';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '#react-navigation/native';
const SplashScreen = ({navigation}) => {
const { colors } = useTheme();
return (
<View style={styles.container}>
<StatusBar backgroundColor='#009387' barStyle="light-content"/>
<View style={styles.header}>
<Animatable.Image
animation="bounceIn"
duraton="1500"
source={require('../assets/fmasdeco.png')}
style={styles.logo}
resizeMode="stretch"
/>
</View>
<Animatable.View
style={[styles.footer, {
backgroundColor: colors.background
}]}
animation="fadeInUpBig"
>
<Text style={[styles.title, {
color: colors.text
}]}>Stay connected with everyone!</Text>
<Text style={styles.text}>Sign in with account</Text>
<View style={styles.button}>
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<LinearGradient
colors={['#08d4c4', '#01ab9d']}
style={styles.signIn}
>
<Text style={styles.textSign}>Get Started</Text>
<MaterialIcons
name="navigate-next"
color="#fff"
size={20}
/>
</LinearGradient>
</TouchableOpacity>
</View>
</Animatable.View>
</View>
);
};
export default SplashScreen;
My page SignUpScreen.Js
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default function SignUpScreen() {
return (
<View>
<Text>Hello</Text>
</View>
)
}
const styles = StyleSheet.create({})
Whenever You Navigate From Component which isn't in Your Navigation Container Your Navigation Props Is Undefined Your Splashscreen Component isn't in your Navigation Container May be it is a Child of Screen Thats why You Couldn't get Navigation Prop Pass navigation from from Parent Component where you rendered Splashscreen .
OR
You Should Use Use Navigation Hook Provided By React navigation To Navigation Between Screen from Outside of Navigation Container....
import { useNavigation } from '#react-navigation/native';
const someComponent = () => {
const navigation = useNavigation();
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<Text>Navigation To Sigin Screen</Text>
</TouchableOpacity>
}
Hope this would Help...
I want to Create a Global Header that can call the Navigation Drawer
My main code is like this :
import * as React from 'react';
import { View, Text, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList,DrawerItem, } from '#react-navigation/drawer';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Header from './components/Headertest';
function Screen1() {
return (
<View>
<View><Text>Screen1</Text></View>
</View>
);
}
function Screen2() {
return (
<View>
<View><Text>Screen2</Text></View>
</View>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Screen1" component={Screen1} />
<Drawer.Screen name="Screen2" component={Screen2} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Header />
<MyDrawer />
</NavigationContainer>
);
}
And my Header Code is like this:
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
class Header extends React.Component {
render() {
return(
<View style={{flexDirection: 'row', height:50, backgroundColor:'#12415e', marginTop: 25 }}>
<View style={{flex: 1, justifyContent: 'center', alignItems:'center',flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
<Icon style= {{color: 'white'}} name='bars'/>
</TouchableOpacity>
</View>
</View>
)
}
}
export default Header;
But instead an error appears like this:
TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')
What's wrong with my code?
The <Header /> component is not inside a Navigator, so it doesn't have access to the navigation props. Make the <Header /> component a functional component and use the useNavigation() hook.
More details here: https://reactnavigation.org/docs/connecting-navigation-prop
I am trying to use react navigation but getting this error
import React, { useState } from 'react'
import{StyleSheet,Text,View,TextInput} from 'react-native'
import { TouchableOpacity,FlatList,ScrollView,} from 'react-native-gesture-handler'
import LegalInformation from './LegalInformation'
import {NavigationContainer} from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
export default function App(){
const[menu,menupeople]=useState([
{name:'My Account',key:1},
{name:'Notification Settings',key:2},
{name:'Clear Cache',key:3},
{name:'Legal Information',key:4},
{name:'Rate App Tak',key:5},
{name:'Version',key:6},
{name:'About',key:7},
])
return(
<View style={styles.container}>
<ScrollView>
{menu.map((item)=>{
return(
<TouchableOpacity onPress={()=>navigation.navigate(LegalInformation)}
key={item.key}
>
<Text style={styles.item}
>{item.name}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
</View>
)
}
const styles=StyleSheet.create({
container:{
flex:1,
backgroundColor:'#fff',
paddingTop:40,
paddingHorizontal:20,
alignItems:'center'
}
})
I read the documentation of react navigation and installed all the dependencies imported the required dependencies but this does not seem to work any tip
You should get the navigation from props like
export default function App(props){
let {navigation}=props;
//your code
}
but first make sure that your component is wrapped by NavigationContainer. Read this for more detailed info.
I'm trying to navigate to the home page from login page but my login-form is in another folder named "component", When I'm navigating from the login page using touchableOpacity it is working, But when I'm doing same thing from login-form component it is giving me an error. Can someone tell me what I'm doing wrong.
Here is the code which I'm trying to perform.
code of Login.js
import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import LoginForm from '../components/LoginForm';
type Props = {};
export default class Login extends Component<Props> {
static navigationOptions = {
header: null
}
render() {
return (
<ScrollView>
<View>
<LoginForm/>
</View>
<View>
<Text> Skip login and goto</Text>
<Text onPress={()=>this.props.navigation.navigate('Home')}>
Home
</Text>
</View>
</ScrollView>
);
}
}
code of LoginForm.js
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
type Props = {};
export default class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
here is the screenshot of error:
Error when navigating to page in another folder
Please help me to get out of this error. Thanks in advance. :)
You can use withNavigation or you should pass navigation as a props to child component.
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import { withNavigation } from 'react-navigation';
type Props = {};
class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
export default withNavigation(LoginForm);
In the end of your LoginForm.js you need to put export {LoginForm};
If only this not work, try make your import like this: import {LoginForm} from '../components/LoginForm';
I am using stack navigator to navigate between screen in my react native app. But it is giving me an error using this.props.navigation.navigate . kindly tell me what i am doing wrong here .
I am using react-native router-flux too in my app but for some purpose i need to use stack navigator as my app has home page and it shows some content of blog feed and onclicking read more it should open detailed view of only that specific blog feed in detailed page, therefore, for this purpose i am using stack navigator here .
Here is my code:
Home.js:
import React, { Component } from 'react';
import {
ActivityIndicator,
ListView,
Text,
StyleSheet,
View,
Button,
TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {Actions, Router, Scene} from 'react-native-router-flux';
import TimeAgo from 'react-native-timeago';
import {
Card,
CardItem,
Content,
Header,
Body,
Footer,
FooterTab,
Container,
Left,
Icon,
Right
} from 'native-base';
import {GetImage,ContentSnippet} from './helpers/helpers';
import HTMLView from 'react-native-htmlview';
import FitImage from 'react-native-fit-image';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
count:0,
count1:0
}
}
componentDidMount() {
return fetch('http://www.cardory.co.uk/jan/json')
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.items),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 80}}>
<ActivityIndicator />
</View>
);
}
return (
<Container style={{flex: 1, paddingTop: 60}} >
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<Card>
<CardItem header>
<Text style={styles.titleHeading}>{rowData.title}</Text>
</CardItem>
<CardItem cardBody>
<Content style={{marginLeft:10,marginRight:10}}>
<FitImage source={{uri: GetImage(rowData.content_html)}}/>
<HTMLView value={ContentSnippet(rowData.content_html.replace(/<img[^>]*>/g,""))}/>
</Content>
</CardItem>
<CardItem>
<Left>
<TouchableOpacity onPress={() =>this.props.navigation.navigate('Detail')}>
<Text style={styles.ReadMore}>
Read more
</Text>
</TouchableOpacity>
</Left>
<Right>
<Text style={styles.Time}>
<Icon name="time" style={{color:'#483D8B'}}/>
<TimeAgo time= {rowData.date_published}/>
</Text>
</Right>
</CardItem>
</Card>
}
/>
</Container>
);
}
}
const styles=StyleSheet.create({
textHeading:{
fontSize:20,
marginTop:20
},
titleHeading:{
fontSize:20,
fontWeight:'bold',
color:'black',
alignItems:'center',
},
ReadMore:{
color:'#483D8B',
fontSize:15,
fontWeight:'bold'
},
Time:{
color:'#483D8B',
alignSelf:'stretch'
},
});
Navigation.js:
import React,{Component} from 'react';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Home from './Home';
import Info from './Info';
import Details from './Details';
import Register from './Register';
const Navigation = StackNavigator({
Home:{screen: Home},
Info:{ screen: Info},
Details:{ screen: Details},
Register:{ screen: Register}
});
And my aim is on cliking read more it should open only that specific blog feed any help would be appreciated. Thanks in advance!
in onPress callback, this may be changed, so the value of this.props.navigation may be different to your expect. you should use a variable to save navigation and avoid use this in callback. see my code below.
render() {
const {navigation} = this.props;
...
<TouchableOpacity onPress={() => navigation.navigate('Detail')}>
...
}
I believe what #Harlan is asking for is something like:
import AppNavigator from './Navigation.js'
class App extends Component {
render(){
return(
<View>
<AppNavigator/>
</View>
)
}
}
AppRegistry.registerComponent( 'app', () => App );
And he probably has a point since you are not exporting your navigator in Navigation.js. Without something like the above code, then your components will not have navigation in their props.