React native. undefined is not object (evaluating 'this.props.navigator.push') - javascript

I am testing my code and got an error. I need to press a button and go to the next page.
First, I created Safay.js and wrote code to set the initial route in this page. Then I created buttonsubmit.js so that when I press the button it will go to the next page, route.js. However, when testing I get an error. I just rechecked my code, which I may have typed wrong, or maybe it's something I don't know.
This is my error:
got error: undefined is not an object (evaluating 'this.props.navigator.push')
error in file ButtonSubmit.js :22
This is my code:
Safay.js
import index from './index.js';
import React, { Component, PropTypes } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
import Route from './Route.js';
import Signup from './Signup.js';
import ButtonSubmit from './ButtonSubmit.js';
export default class Safay extends Component {
renderScene(route, navigator){
if(route.name == 'Safay'){
return <Safay navigator={navigator}/>
}
if(route.name == 'Route'){
return <Route navigator={navigator}/>
}
}
render() {
return (
<View style={styles.container}>
{<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>}
</View>
);
}
}
ButtonSubmit.js
import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import {
StyleSheet,
TouchableOpacity,
Text,
Animated,
Easing,
Image,
Alert,
View,
} from 'react-native';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;
export default class ButtonSubmit extends Component {
navigate(routeName){
this.props.navigator.push({
name: routeName
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.navigate.bind(this, 'Route')} style={styles.button}>
<Text style={styles.text}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: -20,
alignItems: 'center',
justifyContent: 'flex-start',
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ff8011',
height: MARGIN,
borderRadius: 20,
zIndex: 100,
width: DEVICE_WIDTH - 40,
},
circle: {
height: MARGIN,
width: MARGIN,
marginTop: -MARGIN,
borderWidth: 1,
borderColor: '#ff8011',
borderRadius: 100,
alignSelf: 'center',
zIndex: 99,
backgroundColor: '#ff8011',
},
text: {
color: 'white',
fontWeight: '700',
fontSize: 21,
backgroundColor: 'transparent',
},
});
Route.js
import React, { Component } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
export default class Route extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#05121F',
},
});
Thank you for your support.

You were wrong in button class because you did not pass the instance of the navigator to the button class and you are using navigator.
If i was you i would have removed onpress from the button for a while then i would have used button in the class Safay. like this:
<View style={styles.container}>
<ButtonSubmit navigator={navigator} />
<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>
</View>
After all the above process i would have include onPress again.
Cheers :)

Related

Getting too much gap between two component react native

am new in react world, am trying to making a d-mart clone, my app is working fine but getting too much difference between two banner component , I don't want it , don't know why its getting. please try to fix my error.
You seem in special offer top and bottom difference is good but winter special top getting too much difference.
App.js
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Header from "./screens/Header";
import Banner from "./screens/Banner";
import Banner2 from "./screens/Banner2";
import { ScrollView } from "react-native";
function App() {
return (
<View style={styles.container}>
<ScrollView>
<Header />
<Banner />
<Banner2 name="Special Offer"/>
<Banner2 name="Winter Special"/>
<Banner2 name="New Year Special"/>
<Banner2 name="Festival Special"/>
</ScrollView>
<StatusBar style="auto" />
</View>
);
}
export default App;
Banner2.js
import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";
const Banner2 = ({ name }) => {
return (
<View style={{ marginHorizontal: 7 }}>
<Text style={styles.offer}>{name}</Text>
<Image
style={{
height: 300,
width: "100%",
marginTop: -30,
alignItems: "center",
resizeMode: "contain",
}}
source={require("../images/banner1.jpg")}
/>
</View>
);
};
const styles = StyleSheet.create({
offer: {
marginTop: 20,
fontWeight: "bold",
fontSize: 20,
marginLeft: 10,
},
});
export default Banner2;

React Native - How do I set the style of a View contained within an ImageBackground so that the View stays contained within the ImageBackground?

i'm building a simple bughouse (4-person chess) game as my first React Native app, and i'm a little confused about a styling issue. the issue occurs when rendering an ImageBackground, which contains a View, which contains a grid of Views (the chess board). when using the code laid out following this question, the View is not contained within the screen (see screenshot below). how do i set the style of a View contained within an ImageBackground so that the View stays contained within the ImageBackground?
screenshot
i've tried about everything i can think of but nothing has helped. i suspect the issue has something to do with the dimensions of the ImageBackground not being set properly and actually extending past the edge of the screen. when i comment out the line that says width: Dimensions.get('screen').width, in styles.board in BoardView.js, the image for the ImageBackground also fills up the same too-big space.
here is views/Game.js:
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
SafeAreaView,
View,
StyleSheet,
Platform,
StatusBar,
} from 'react-native';
import { BoardView } from '../components/BoardView';
import { Navbar } from '../components/Navbar';
export function Game () {
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
},
bottomBar: {
flex: 2,
width: '100%',
backgroundColor: 'black',
justifyContent: 'center',
},
});
return (
<SafeAreaView style={styles.mainContainer}>
<Navbar />
<BoardView />
<View style={styles.bottomBar}>
</View>
</SafeAreaView>
);
}
here is components/BoardView.js:
import React, { Component } from 'react';
import {
StyleSheet,
ImageBackground,
Dimensions
} from 'react-native';
import { Pieces } from "./Pieces";
export function BoardView () {
const styles = StyleSheet.create({
board: {
flex: 10,
width: Dimensions.get('screen').width,
},
});
return (
<ImageBackground
resizeMode='contain'
style={styles.board}
source={require('../assets/board.png')}
>
<Pieces />
</ImageBackground>
);
}
here is components/Pieces.js:
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
} from 'react-native';
export function Pieces () {
const styles = StyleSheet.create({
grid: {
borderColor: 'green',
borderWidth: 5,
alignSelf: 'center',
aspectRatio: 1,
overflow: 'visible',
width: '100%',
height: '100%',
},
gridRow: {
flexDirection: 'row',
flex: 1,
},
gridTile: {
borderWidth: 1,
borderColor: 'green',
flex: 1,
height: '100%',
},
test: {
color: 'green',
},
});
let pieces = [
[['bRook'],['bKnight'],['bBishop'],['bQueen'],['bKing'],['bBishop'],['bKnight'],['bRook']],
[['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn']],
[[''],[''],[''],[''],[''],[''],[''],['']],
[[''],[''],[''],[''],[''],[''],[''],['']],
[[''],[''],[''],[''],[''],[''],[''],['']],
[[''],[''],[''],[''],[''],[''],[''],['']],
[['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn']],
[['wRook'],['wKnight'],['wBishop'],['wQueen'],['wKing'],['wBishop'],['wKnight'],['wRook']],
];
return (
<View style={styles.grid}>
{pieces.map((row, index) =>(
<View style={styles.gridRow} key={index}>
{row.map((tile, index) => (
<View style={styles.gridTile} key={index}>
<Text style={styles.test}>
{tile}
</Text>
</View>
))}
</View>
))}
</View>
);
}
how do i set the style so that the View stays contained within the ImageBackground? thank you very much for your help!

Navigating between screens having two separate react native files

I am new to react native and I want to navigate between screens. I have two sample files
#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/Home';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Home/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFEB3B',
alignItems: 'center',
justifyContent: 'center',
},
});
and another file
#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>User</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Contractor</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
},
button: {
width:300,
borderRadius: 25,
backgroundColor:'#FCE4EC',
marginVertical: 10,
paddingVertical:16
}
});
How do I make it that when either User or Contractor are clicked in Home.js file they take me to different screens preferably using stacknavigator. I tried the documentation but can't seem to figure out the way forward.
You could do this easily using StackNavigator offered by react-navigation library.
Here is the idea:
In the App.js file you have to refer to the stacknavigator/parent of your navigation.
#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './src/Home';
import Contractor from './src/Contractor';
import User from './src/User';
const Main = StackNavigator({
HomeScreen: {
screen: Home
},
UserScreen: {
screen: User,
},
ContractorScreen: {
screen: Contractor,
},
}
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Main/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFEB3B',
alignItems: 'center',
justifyContent: 'center',
},
});
Home file:
#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}
onPress={() => this.props.navigation.navigate({ routeName: 'UserScreen'})}>
<Text style={styles.buttonText}>User</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}
onPress={() => this.props.navigation.navigate({ routeName: 'ContractorScreen'})}>
<Text style={styles.buttonText}>Contractor</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
},
button: {
width:300,
borderRadius: 25,
backgroundColor:'#FCE4EC',
marginVertical: 10,
paddingVertical:16
}
});
User file:
#User.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class User extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am the User screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
});
And finally, Contractor file:
#Contractor.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Contractor extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am the Contractor screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
});

Why won't one of my components work in my React Native project?

I'm teaching myself React Native and as of now, I've ran into a minor problem.
I want <KeyboardAvoidingView/> to push the 2 input boxes up so that the user can see what they're typing but my code isn't doing that. It isn't even showing what user is typing. The user must press Next on the keyboard they can see what they typed. Also, what I press Next, it doesn't go to the next input box.
Here's App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<View>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
backgroundColor: '#DAE5FF',
// paddingBottom: 20,
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15,
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Login/>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
});
export default BackGround;

Can't find variable: React

I am trying to make a simple iOS page with a button that triggers an action.
I have followed the tutorial on how to get started and this is my index code:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Component,
AlertIOS // Thanks Kent!
} = React;
class myProj extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Welcome to React Native!
</Text>
<TouchableHighlight style={styles.button}
onPress={this.showAlert}>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
);
}
showAlert() {
AlertIOS.alert('Awesome Alert', 'This is my first React Native alert.', [{text: 'Thanks'}] )
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 44,
flexDirection: 'row',
backgroundColor: '#48BBEC',
alignSelf: 'stretch',
justifyContent: 'center'
}
});
AppRegistry.registerComponent('myProj', () => myProj);
The problem is that when I run it from Xcode on my device I get
Can't find variable: React
render
main.jsbundle:1509:6
mountComponent
mountChildren
Any idea what might be the problem here?
In the latest version of React Native you must import React from 'react' package
import React, {Component} from 'react';
import {
View,
...
} from 'react-native';
import * as React from 'react';
Add the constructor to before render
constructor(props) {
super(props);
}
Adding import React from 'react'; in all the jsx/tsx file resolved my issue

Categories