Develop Reference

How i make the same table model (without the words contents) in react native/expo as my picture example

how I make the same table model (i need the same table without the contents) in react-native/expo as my picture examples?
I try so many things but its doesn't work for me and i need some help with that.
here you can see my example the first picture and I want to transfer it to the example as the second picture.
this is the example table that i have now:
this is the example table that i want :
this is my code :
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
ActivityIndicator,
Platform,
FlatList,
TouchableOpacity,
Dimensions
} from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";
import axios from "axios";
import { Card } from "react-native-elements";
import { Icon } from "react-native-elements";
const { width, height } = Dimensions.get('window');
export default class MainScreen extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
getData = () => {
this.setState({ isLoading: true, data: [] })
axios.get("https://rallycoding.herokuapp.com/api/music_albums ")
.then(res => {
this.setState({
isLoading: false,
data: res.data
});
console.log(res.data);
});
}
componentDidMount() {
this.props.navigation.setParams({ getData: this.getData });
this.getData()
}
renderItem(item) {
const { title, artist} = item.item;
return (
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Settings")}
>
<View style={styles.itemView}>
<View style={styles.itemInfo}>
<Text style={styles.name}>
{title+ ' ' + artist}
</Text>
<Text style={styles.vertical} numberOfLines={1}>{artist} |</Text>
</View>
</View>
</TouchableOpacity>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex:0,paddingTop: 300 }}>
<Text style={{ alignSelf: "center", fontWeight: "bold", fontSize: 20 }}>loading data...</Text>
<ActivityIndicator size={'large'} color={'#08cbfc'} />
</View>
);
}
return (
<>
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={this.renderItem.bind(this)}
keyExtractor={(_, index) => String(index)}
/>
{/* <Text>{this.state.data.length !== 0 ? this.state.data.length : "NO DATA FOUND" }</Text> */}
</View>
<View style={styles.bottomMainContainer}>
<View style={styles.bottomView} >
<Text style={styles.bottomTextStyle}>סה"כ: {this.state.data.length} רשומות</Text>
</View>
</View>
</>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 0,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor:'pink'
},
itemView: {
flex: 1,
width,
borderBottomWidth: 0.5,
borderColor: 'black',
borderStyle: 'solid',
paddingHorizontal: 12,
flexDirection: 'row',
},
imgContainer: {
// flex: 0,
// borderColor: 'black',
// borderWidth: 1.5,
// height: 60,
// width: 60,
// alignItems: 'center',
// justifyContent: 'center',
},
itemInfo: {
flex: 1,
marginHorizontal: 10,
// backgroundColor:'pink'
},
name: {
//fontFamily: 'Verdana',
fontSize: 18,
color: '#ff0000',
textAlign: 'left',
},
vertical: {
fontSize: 18,
}

undefined is not an object evaluating _this.props.navigation React Native

I am getting undefined is not an object evaluating _this.props.navigation. Here is my code.
I want to use the in multiple screens so I have to
extract it out and call it in any I need it in.
I have tried https://github.com/react-navigation/react-navigation/issues/2198#issuecomment-316883535 to no luck.
Category.js
import React, {Component} from 'react';
import {View, FlatList} from 'react-native';
import {ListItem} from 'react-native-elements'
import {AppRegistry, TouchableOpacity, ActivityIndicator} from 'react-native';
import {SearchHeader} from '../SearchHeader';
export default class Category extends Component {
constructor() {
super();
this.state = {
list: [],
};
this.onPress = this.onPress.bind(this);
}
static navigationOptions = {
title: 'Categories',
headerStyle: {backgroundColor: '#ffb30c'},
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "98%",
backgroundColor: "#CED0CE",
marginLeft: "1%",
marginRight: "1%"
}}
/>
);
};
_keyExtractor = (item, index) => item.name;
renderHeader = () => {
return (<SearchHeader />);
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large"/>
</View>
);
};
onPress = (item) => {
this.props.navigation.navigate('SpecTypeScreen',{cat:item});
};
search = () => {
};
render() {
return (
<FlatList
data={this.state.list}
renderItem={({item}) => (
<TouchableOpacity onPress={() => this.onPress(item)}>
<ListItem
title={`${item.name}`}
containerStyle={{borderBottomWidth: 0}}
/>
</TouchableOpacity>
)}
keyExtractor={this._keyExtractor}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
/>
);
}
}
AppRegistry.registerComponent('CategoryScreen', () => CategoryScreen);
SearchHeader.js
import React, {Component} from 'react';
import Autocomplete from 'react-native-autocomplete-input';
import {
AppRegistry,
View,
StyleSheet,
Platform,
Text,
TouchableOpacity,
} from 'react-native';
import {withNavigation} from 'react-navigation';
import colors from './config/colors';
import normalize from './config/normalizeText';
export class SearchHeader extends Component {
constructor() {
super();
this.state = {
list: [],
};
}
search = (term) => {
if (term.length > 2) {
fetch("https://myUrl?term=" + encodeURI(term))
.then((response) => response.json())
.then((responseJson) => {
this.setState({list: responseJson});
console.log(responseJson);
})
.catch((error) => {
console.error(error)
});
}
else{
this.setState({list: []});
}
};
onPress = (item) => {
this.props.navigation.navigate('ProductScreen',{spec:item});
};
render() {
return (
<View style={[
styles.container, styles.containerLight
]}>
<Autocomplete placeholder="Search Specs & Approvals..."
autoCorrect={false}
onChangeText={this.search}
data={this.state.list}
containerStyle={{backgroundColor: "#d71201"}}
inputStyle={{backgroundColor: "#fff"}}
renderItem={({ id, specification }) => (
<TouchableOpacity style={styles.autocompleteContainer} onPress={this.onPress.bind(this, specification)}>
<Text style={styles.itemText}>
{specification}
</Text>
<View
style={{
height: 1,
width: "98%",
backgroundColor: "#CED0CE",
marginLeft: "1%",
marginRight: "1%"
}}
/>
</TouchableOpacity>
)}
style={[
styles.input,
styles.inputLight,
{borderRadius: Platform.OS === 'ios' ? 15 : 20},
{paddingRight: 50}
]}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderTopWidth: 1,
borderBottomWidth: 1,
borderBottomColor: '#000',
borderTopColor: '#000',
backgroundColor: "#d71201",
maxHeight:70
},
containerLight: {
borderTopColor: '#e1e1e1',
borderBottomColor: '#e1e1e1',
},
input: {
paddingLeft: 26,
paddingRight: 19,
margin: 8,
borderRadius: 3,
overflow: 'hidden',
backgroundColor: colors.grey5,
fontSize: normalize(14),
color: colors.grey3,
height: 40,
...Platform.select({
ios: {
height: 30,
},
android: {
borderWidth: 0,
},
}),
},
inputLight: {
backgroundColor: "#fff"
},
autocompleteContainer: {
backgroundColor:"#fff",
marginLeft: 10,
marginRight: 10
},
itemText: {
fontSize: 15,
margin: 5,
marginLeft: 20,
paddingTop:5,
paddingBottom:5
},
descriptionContainer: {
backgroundColor: '#F5FCFF',
marginTop: 8
},
infoText: {
textAlign: 'center'
},
titleText: {
fontSize: 18,
fontWeight: '500',
marginBottom: 10,
marginTop: 10,
textAlign: 'center'
},
directorText: {
color: 'grey',
fontSize: 12,
marginBottom: 10,
textAlign: 'center'
},
openingText: {
textAlign: 'center'
}
});
AppRegistry.registerComponent('SearchHeader', () => SearchHeader);

You need to pass the navigation prop down. Try this:
renderHeader = () => {
return (<SearchHeader navigation={this.props.navigation} />);
};

You need to wrap your component with withNavigation(Component)
Example: AppRegistry.registerComponent('SearchHeader', () => withNavigation(SearchHeader));
The point of withNavigation was so that you wouldn't need to pass navigation as a prop. Especially useful when you're passing through multiple children.

Can I pass name of object to use through props?

What I want to accomplish is this: I have created button component based on TouchableOpacity. In my app I have 3 types of differently looking buttons, they all share some styles and have something specific as well. Below is how my Button.js looks like:
import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
class Button extends Component {
render() {
const { children, onPress, style } = this.props;
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={[buttonStyle]}>
<Text style={[textStyle]}>
{children}
</Text>
</TouchableOpacity>
);
}
}
//Commonly shared button styles
const styles = {
textStyle: {
alignSelf: 'center',
fontSize: 17,
paddingTop: 15,
paddingBottom: 15
},
buttonStyle: {
alignSelf: 'stretch',
marginLeft: 15,
marginRight: 15
}
};
//Below are specific appearance styles
const black = {
container: {
backgroundColor: '#000'
},
text: {
color: '#FFF'
}
};
const white = {
container: {
backgroundColor: '#FFF'
},
text: {
color: '#000'
}
};
It would be great if I could use this button something like this:
<Button onPress={} style='black'>PLAY</Button>
<Button onPress={} style='white'>CANCEL</Button>
I.e. default buttonStyle and textStyle are applied from styles object. And I just want to pass a single word ('black', 'white') to reference additional style objects described in Button component.
I know I can create a helper method with switch, but I think there is a shorter way to do this. Is there?
Thanks a lot!

I think this would be the shortest and cleanest way
import React, { PropTypes } from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ children, onPress, type }) => (
<TouchableOpacity onPress={onPress} style={[styles.defaultButton, styles[type].button]}>
<Text style={[styles.defaultText, styles[type].text]}>
{children}
</Text>
</TouchableOpacity>
);
Button.propTypes = {
children: PropTypes.node.isRequired,
onPress: PropTypes.func.isRequired,
type: PropTypes.oneOf(['white', 'black']).isRequired,
};
const styles = {
defaultButton: {
alignSelf: 'stretch',
marginLeft: 15,
marginRight: 15
},
defaultText: {
alignSelf: 'center',
fontSize: 17,
paddingTop: 15,
paddingBottom: 15
},
white: {
button: {
backgroundColor: '#FFF'
},
text: {
color: '#000'
}
},
black: {
button: {
backgroundColor: '#000'
},
text: {
color: '#FFF'
}
},
};
export default Button;
Add type && style[type].button if type is not required prop. Like this:
const Button = ({ children, onPress, type }) => (
<TouchableOpacity onPress={onPress} style={[styles.defaultButton, type && styles[type].button]}>
<Text style={[styles.defaultText, type && styles[type].text]}>
{children}
</Text>
</TouchableOpacity>
);
Button.propTypes = {
children: PropTypes.node.isRequired,
onPress: PropTypes.func.isRequired,
type: PropTypes.oneOf(['white', 'black']),
};

As per my understanding towards your questions,please have a look at this:-
var styleChangeForButton,styleChangeForText
class Button extends Component {
constructor(props)
{
super(props)
const { children, onPress, style } = this.props;
const { buttonStyle, textStyle } = styles;
styleChangeForButton = [buttonStyle]
styleChangeForText = [textStyle]
}
onPress()
{
styleChangeForButton = 'black'
styleChangeForText = 'white'
}
render() {
//
style
return (
<TouchableOpacity onPress={onPress} style={styleChangeForButton}>
<Text style={styleChangeForText}>
{children}
</Text>
</TouchableOpacity>
);
}
}
//Commonly shared button styles
const styles = {
textStyle: {
alignSelf: 'center',
fontSize: 17,
paddingTop: 15,
paddingBottom: 15
},
buttonStyle: {
alignSelf: 'stretch',
marginLeft: 15,
marginRight: 15
}
};
//Below are specific appearance styles
const black = {
container: {
backgroundColor: '#000'
},
text: {
color: '#FFF'
}
};
const white = {
container: {
backgroundColor: '#FFF'
},
text: {
color: '#000'
}
};

You could do something like this:
import React, { PropTypes } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
// Commonly shared button styles
const defaultStyle = StyleSheet.create({
textStyle: {
alignSelf: 'center',
fontSize: 17,
paddingTop: 15,
paddingBottom: 15,
},
buttonStyle: {
alignSelf: 'stretch',
marginLeft: 15,
marginRight: 15,
},
});
// Below are specific appearance styles
const black = StyleSheet.create({
container: {
backgroundColor: '#000',
},
text: {
color: '#FFF',
},
});
const white = StyleSheet.create({
container: {
backgroundColor: '#FFF',
},
text: {
color: '#000',
},
});
const themes = {
black,
white,
};
function Button({ children, onPress, theme }) {
const buttonStyles = [defaultStyle.buttonStyle];
const textStyles = [defaultStyle.textStyle];
if (theme) {
buttonStyles.push(themes[theme].container);
textStyles.push(themes[theme].text);
}
return (
<TouchableOpacity onPress={onPress} style={buttonStyles}>
<Text style={textStyles}>
{children}
</Text>
</TouchableOpacity>
);
}
Button.propTypes = {
onPress: PropTypes.func.isRequired,
theme: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
export default Button;

React-native onpress into touchable open another model

i have this model into react native that name LoginView.js
"use strict";
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//here !!
}
}
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;
in this module i have method called move, when click into touchable move must open this module that name test.js
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
i need this method in project its very important for me , if any one can tell me how to do this please !!
Note : iam beginner into react-native :)
Edit
i tried this code
login.js
"use strict";
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.OnBUttonPress()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
OnBUttonPress = () => {
this.props.navigator.push({
id: 'test'
})
}
}
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;
AppRegistry.registerComponent('AwesomeProject', () => LoginView);
and this test.js
import React, { Component } from 'react';
import {
View,
Text,
TouchableHighlight,
} from 'react-native';
export default class WelcomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
text: '<Your welcome in Second Screen>',
textBack: '<Tap to Go Back to First Screen>'
}
}
OnBUttonPress = () => {
this.props.navigator.push({
id: 'WelcomeScreen'
})
}
render = () => {
return (
<View>
<Text>{this.state.text}</Text>
<TouchableHighlight onPress={this.OnBUttonPress}>
<Text>{this.state.textBack}</Text>
</TouchableHighlight>
</View>
);
}
}
i got this error
undefined is not an object (evaluating'_this.props.navigator.push)

i have created a solution for multiple screen. so please read my code and implement as your requirement hope it will help you. Link here:
Navigator sample
if get any problem please ask me.

Unable to navigate to a different component on button click - React-Native Navigator

var
{Text,View,TextInput,TouchableWithoutFeedback,Image,ToastAndroid,Platform,NavigatorIOS,Navigator} = React;
var MainActivity = require('./MainActivity');
class LoginScreen extends React.Component {
Login(){
return <Navigator
initialRoute={{name: 'MainActivity', component: MainActivity, index: 0}}
renderScene={(route, navigator) => {
return React.createElement(<MainActivity />);
}} />
}
I am trying to make this work. After clicking on login button, it should go to the main activity. So LoginScreen.js onClick MainActivity.js.
My github project for you to check for more reference. Please help.

I just looked at your code. It looks like you need to set up your initial route as a navigator component. I've fixed it and am pasting the code below. The two files that need to be fixed are index.ios.js, and LoginScreen.js.:
index.ios.js
'use strict';
var React = require('react-native');
var {Text,View,TextInput,Navigator, Navigator} = React;
var LoginScreen = require('./LoginScreen');
var MainActivity = require('./MainActivity');
class Trabble extends React.Component {
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'LoginScreen', component: LoginScreen, index: 0}}
renderScene={(route, navigator) => {
return React.createElement(route.component, {navigator});
}} />
)
}
}
var Styles = React.StyleSheet.create({
loginText: {
fontSize: 50,
color: "blue",
marginTop: 100,
alignSelf: "center"
},
usernameText: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
},
passwordText: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
}
});
React.AppRegistry.registerComponent('Trabble', function() { return Trabble });
LoginScreen.js:
'use strict';
var React = require('react-native');
var {Text,View,TextInput,TouchableWithoutFeedback,Image,ToastAndroid,Platform,NavigatorIOS,Navigator} = React;
var MainActivity = require('./MainActivity');
class LoginScreen extends React.Component {
login() {
this.props.navigator.push({
component: MainActivity
})
}
render() {
return(
<View style={styles.loginView}>
<Image style={styles.image} source={require('./Ionic.png')}/>
<Text style={styles.loginText}>Chat System</Text>
<TextInput style={styles.usernameText} placeholder="username" placeholderTextColor="black"></TextInput>
<TextInput style={styles.passwordText} placeholder="password" placeholderTextColor="black" secureTextEntry></TextInput>
<TouchableWithoutFeedback onPress={ () => this.login() }>
<View style={styles.loginButton}>
<Text style={styles.loginButtonText}>Smit is smart</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback>
<View style={styles.signUpButton}>
<Text style={styles.signUpButtonText}>Sign Up</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={ () => this.login() }>
<View>
<Text style={styles.forgetPasswordText}>Forgot password?</Text>
</View>
</TouchableWithoutFeedback>
</View>)
}
}
var styles = React.StyleSheet.create({
image:{
height: 150,
alignSelf: "center",
marginTop: 50,
opacity: 1
},
loginView:{
backgroundColor: "#FA8A3A",
flex: 1
},
loginText: {
fontSize: 50,
color: "white",
marginTop: 10,
alignSelf: "center"
},
usernameText: {
height: 40,
color: 'black',
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
},
passwordText: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
},
loginButtonText:{
alignSelf: 'center',
fontSize: 20,
color: 'white'
},
loginButton:{
marginTop: 10,
height: 30,
backgroundColor: 'blue'
},
signUpButtonText:{
alignSelf: 'center',
fontSize: 20,
color: 'white'
},
signUpButton:{
marginTop: 10,
height: 30,
backgroundColor: 'grey'
},
forgetPasswordText:{
fontSize: 10,
alignSelf: 'center',
marginTop: 10
}
});
module.exports = LoginScreen;
I've also submitted a pull request to you with the fixed code.