I have this component in react-native and when I press the button i need the whole view to be cloned.
How can I do it?
import React, { Component } from 'react';
import {
Platform, Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import styles from '../../assets/Styles'
class AccountForm extends Component {
render() {
return (
<View>
<TextInput
style={styles.input2}
placeholder="Registered addresses"
/>
<TouchableOpacity style={styles.AddIcon}>
<Image source={require('../../assets/images/addicon.png')}/>
</TouchableOpacity>
</View>
);
}
}
export default AccountForm;
I'm assuming, you want to add one TextInput on tapping the Image. You can modify based on requirement.
import React, { Component } from 'react';
import {
Platform,
Text,
Image,
View,
TextInput,
TouchableOpacity,
ScrollView
} from 'react-native';
import styles from '../../assets/Styles'
class AccountForm extends Component {
constructor() {
super();
this.state = {
count: 1,
};
this.addMore = this.addMore.bind(this);
}
addMore() {
this.setState({
count: ++this.state.count,
})
}
renderAddress() {
const elements = [];
for (let i = 0; i < this.state.count; i++) {
elements.push(
<TextInput key={i}
style={styles.input2}
placeholder="Registered addresses"
/>
);
}
return elements;
}
render() {
return (
<View>
{this.renderAddress();}
<TouchableOpacity onPress={this.addMore} style={styles.AddIcon}>
<Image source={require('../../assets/images/addicon.png')}/>
</TouchableOpacity>
}
</View>
);
}
}
export default AccountForm;
Related
When I type, nothing shows up in the search bar, but it knows that I'm typing (from the print statements in my updateSearch function). From my understanding of the react-native searchBar, there isn't even anything I need to do for text to be showing up there, so I really have no idea how I could have screwed this up. This is a part of a larger project.. but I'm praying this issue doesn't have anything to do with the rest of it.
import React, { Component } from "react";
import {
View,
Text,
FlatList,
ActivityIndicator,
SafeAreaView,
StyleSheet
} from "react-native";
import Header from "../components/Header";
import { SearchBar, List, ListItem } from 'react-native-elements';
export default class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
query: "",
data: []
};
}
renderHeader = () => {
return (
<SearchBar
placeholder="Type Here..."
onChangeText={this.updateSearch}
value={this.state.query}
lightTheme={true}
/>
);
}
updateSearch = text => {
console.log("text", text);
const formattedSearch = text.toLowerCase();
this.setState({ query: formattedSearch });
console.log("text", this.state.query);
};
render() {
return (
<SafeAreaView style={styles.container}>
<Header text={"Search"} />
<FlatList
ListHeaderComponent={this.renderHeader}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Expo.Constants.statusBarHeight
}
});
If you want to update your UI with render, you have to update your state.
In your FlatList component, you don't update state. So it never renders again.
You have to use state in your FlatList.
render() {
return (
<SafeAreaView style={styles.container}>
<Header text={"Search"} />
<FlatList
ListHeaderComponent={this.renderHeader}
AnyProp={this.state.anyState}
/>
</SafeAreaView>
);
}
The problem is with the ListHeaderComponent.
I did a demo project to see what was happening :
import React, { Component } from 'react'
import { SafeAreaView, FlatList, TextInput } from 'react-native'
export default class Test extends Component {
constructor(props){
super(props)
this.state={value:""}
}
renderHeader = () =>{
console.log("rendering")
return (<TextInput style={{backgroundColor:"green"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>)
}
render() {
console.log(this.state.value) //Logs the value
return (
<SafeAreaView style={{flex:1}}>
<FlatList
ListHeaderComponent={this.renderHeader}
/>
</SafeAreaView>
)
}
}
It looks like once the component has rendered, it does not update anymore. The log inside the render does actually update, but the component do not re-render himself (probably cause the FlatList do not update the ListHeaderComponent once it is done with the first render)
I would suggest to move the SearchBar above the FlatList and enclose everything inside a ScrollView.
EDIT,
To confirm that it was actually updating, i created another TextInput and put it outside the FlatList, and it worked normally:
import React, { Component } from 'react'
import { SafeAreaView, FlatList, TextInput } from 'react-native'
export default class Test extends Component {
constructor(props){
super(props)
this.state={value:""}
}
renderHeader = () =>{
console.log("rendering")
return (<TextInput style={{backgroundColor:"green"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>)
}
render() {
console.log(this.state.value) //Logs the value
return (
<SafeAreaView style={{flex:1}}>
<TextInput style={{backgroundColor:"red"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>
<FlatList
ListHeaderComponent={this.renderHeader}
/>
</SafeAreaView>
)
}
}
How to show Activity indicator 5 seconds before "Hello world". can you help me please.
import React, { Component } from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
Try this:
import React from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
export default class App extends React.Component {
state = {
showContent: false,
};
componentDidMount() {
setTimeout(() => {
this.setState({ showContent: true });
}, 5000);
}
render() {
const { showContent } = this.state;
return showContent ? (
<View>
<Text>Hello world!</Text>
</View>
) : (
<View>
<ActivityIndicator />
</View>
);
}
}
I have been trying to create a touchable highlight that takes to me a new scene by using this.props.navigation.navigate for a react-native app. However, react native gives me an error that says undefined is not an object (evaluating '_this2.props.navigation'). Here is my code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';
const squadIcon = require('../../img/serioussquad.jpg');
class BeerList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(beerlist),
};
}
renderRow(beer) {
return (
<View style={styles.row}>
<Image style = {styles.icon} source = {squadIcon}/>
<View style={styles.info}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('BeerDetails')}>
<Text style={styles.items}>
{beer.name}
</Text>
</TouchableHighlight>
</View>
<View style={styles.total}>
<Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
</View>
</View>
);
}
Any ideas on how to get it fixed?
Although #justelouise is right and the
StackNavigator Definiton
part of the code would help, still, if you've navigated to this page using stack navigator then it's been added to the stick navigator already.
I think this.props.navigation is available under the render() method. If you want to use it in another method, then you have to pass it from render() to the method you want. Something like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';
const squadIcon = require('../../img/serioussquad.jpg');
class BeerList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(beerlist),
};
}
renderRow (beer, renderNavigation) {
return (
<View style={styles.row}>
<Image style={styles.icon} source={squadIcon}/>
<View style={styles.info}>
<TouchableHighlight onPress={() => renderNavigation.navigate('BeerDetails')}>
<Text style={styles.items}>
{beer.name}
</Text>
</TouchableHighlight>
</View>
<View style={styles.total}>
<Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
</View>
</View>
);
render () {
const navigation = this.props.navigation;
return (
<View>
{this.renderRow(BEER, navigation)}
</View>
)
}
}
If you are navigating to stackNavigator outside of render() then try this
static navigationOptions = ({ navigation })=>{
const { navigate } = navigation
return{
title: 'Header Text',
headerRight:(<Button
title="Settings" backgroundColor="rgba(0,0,0,0)" color="rgba(0,122,255,1)"
onPress={() =>navigate('settings')}
/>)
}
}
Strange error is appearing while developing one of my React Native project.
enter image description here
Following is the code I am using;
import React, {Component} from 'react';
import {Text, View, Image, StyleSheet} from 'react-native';
import {Content, Container} from 'native-base';
import {Carousel} from 'react-native-looped-carousel';
export default class AppBody extends Component {
render() {
return (
<Container>
<Content>
<Carousel delay={500}>
<View style={[{
backgroundColor: '#BADA55'
}
]}/>
<View style={[{
backgroundColor: 'red'
}
]}/>
<View style={[{
backgroundColor: 'blue'
}
]}/>
</Carousel>
</Content>
</Container>
);
}
}
module.export = AppBody;
Your import from react-native-looped-carousel is incorrect:
import Carousel from 'react-native-looped-carousel'
After fixing that, the carousel won't work. Because you should provide dimensions for it:
import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, Dimensions } from 'react-native'
import { Content, Container } from 'native-base'
import Carousel from 'react-native-looped-carousel'
const {width, height} = Dimensions.get('window')
export default class AppBody extends Component {
constructor(props) {
super(props)
this.state = {
size: {width, height},
}
}
render() {
return (
<Container>
<Content>
<Carousel
delay={2000}
style={this.state.size}
autoplay
pageInfo
onAnimateNextPage={(p) => console.log(p)}
>
<View style={[{backgroundColor: '#BADA55'}, this.state.size]}><Text>1</Text></View>
<View style={[{backgroundColor: 'red'}, this.state.size]}><Text>2</Text></View>
<View style={[{backgroundColor: 'blue'}, this.state.size]}><Text>3</Text></View>
</Carousel>
</Content>
</Container>
)
}
}
module.export = AppBody
i am getting above mentioned error while running my code and have also searched about this error , i do understand the meaning of this error But i am not able to figure it out in my case.
Here is the code for index.android.js file :-
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import TabNavigatoro from './src/pages/TabNavigatoro';
export default class ReactNewsfeedDemo extends Component {
render() {
return (
<TabNavigatoro/>
);
}
}
AppRegistry.registerComponent('ReactNewsfeedDemo', () => ReactNewsfeedDemo);
Code for TabNavigatoro.js :-
import React, { Component } from 'react';
import {
AppRegistry,
Image
} from 'react-native';
import { Actions, ActionConst } from 'react-native-router-flux';
import logoImg from '../images/logo.png';
import eyeImg from '../images/eye_black.png';
import homeView from './homeView';
import profileView from './profileView';
import TabNavigator from 'react-native-tab-navigator';
export default class TabNavigatoro extends Component {
constructor(props){
super(props);
this.state={selectedTab:'home'}
}
render() {
return (
<TabNavigator selectedTab = {this.state.selectedTab}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() => <Image source={logoImg} />}
renderSelectedIcon={() => <Image source={logoImg} />}
onPress={() => this.setState({ selectedTab: 'home' })}>
{homeView}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() => <Image source={eyeImg} />}
renderSelectedIcon={() => <Image source={eyeImg} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
{profileView}
</TabNavigator.Item>
</TabNavigator>
);
}
}
Here is homeView.js code :-
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
export default class homeView extends Component {
render() {
return (
<View style={styles.container} >
<Text style = {styles.description}>
This is Home View , Please click to confirm.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container : {
flex:1,
alignSelf : 'stretch',
justifyContent:'center',
},
description : {
fontSize:16,
color: '#ffffff',
textAlign:'center',
},
});
I found one link with same error but it was not answered :-
https://github.com/expo/react-native-tab-navigator/issues/130
please let me know what actually causing problem whey it's no picking {homeView} and {profileView} pages, why it's coming null ?
Appreciate!!!