I have the code below and it not work
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class Splash extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.chars}>
<SeparateText value='AFEW' />
</View>
</View>
);
}
}
class SeparateText extends Component {
render() {
return ({
this.props.value.split('')
.map(char => <Text>{char}</Text>)
});
}
}
In execution, the server shows the error below:
My final objective is do somethink like this:
And I do it! Using the code below I do what I am trying do, but I need some code to show that screen using map and react. I try from many forms, but unsucessfull.
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class Splash extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.splashChars}>
<SplashChar value='A' />
<SplashChar value='F' />
<SplashChar value='E' />
<SplashChar value='W' />
</View>
<View style={styles.splashText}>
<Text></Text>
</View>
</View>
);
}
}
class SplashChar extends Component {
render() {
return (
<Text style={styles.splashChar}>{this.props.value}</Text>
);
}
}
You are missing to enclose the JSX inside of the View.
class SeparateText extends Component {
render() {
return (
<View>
{this
.props
.value
.split('')
.map(char => <Text>{char}</Text>)
}
</View>
)
}
}
You need a root enclose tag.
return (
<View>{this.props.value.split('').map(char => <Text>{char}</Text>)</View>
);
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 am implementing FlatList and it is not giving the desired rendring output.
Here is my Code:
App.js
import React from 'react';
import Main from './components/MainComponent';
export default class App extends React.Component {
render() {
return (
<Main />
);
}
}
MainComponent.js
import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<Menu dishes={this.state.dishes} />
);
}
}
export default Main;
MenuComponent.js
import React from 'react';
import { View, FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';
function Menu(props) {
const renderMenuItem = ({item, index}) => {
return (
<ListItem
key={index}
title={item.name}
subtitle={item.description}
hideChevron={true}
leftAvatar={{ source: require('./images/uthappizza.png')}}
/>
);
};
return (
<FlatList
data={props.dishes}
renderItem={renderMenuItem}
keyExtractor={item => item.id.toString()}
/>
);
}
export default Menu;
Bug:
I am getting the following output which is not desired.
result image
Desired Output:
I want output like image below. How can I achieve it?
Desired output image
are you sure that the problem is with flatlist ? , you are seeing a list , and that means that it's working. So... the problem is with ListItem component, according to this and this , the ListItem doesn´t have hideChevron property [in the latest version], try updating the module ;), deleting hideChevron [wich hides the image], or putting chevron ={true} , because you want to show the image like the desired output
you should render your list accordingly
just define your view
const renderMenuItem = ({item, index}) => {
return (
<View style={{...}}>
<Text style={styles.title}>
{item.name}
<Text>
<Text style={styles.description}>
{item.description}
<Text>
<Image source: require('./images/uthappizza.png')/>
</View>
);
};
I have the following code:
import React, { Component } from 'react';
import {TabNavigator} from 'react-navigation';
import {Button,FlatList,Text,View} from 'react-native';
class Recent extends Component<{}> {
getData() {
return ["Locked in room","Fell on the floor", "Need help with Stairs"];
}
render() {
let {navigate} = this.props.navigation;
console.log(this.props.user); // this line gives me undefined
return (
<FlatList
style={{flex:1,width:"100%"}}
data={this.getData()}
keyExtractor={(item, index) => index}
renderItem={({item}) => <Text onPress={()=>navigate("NextPage",{user:this.props.user})}>{item}</Text>}
/>
);
}
}
const RequestRouter = TabNavigator({
Recent1: {screen: Recent},
Recent2:{screen:Recent}
}
);
export default class App extends Component<{}> {
render() {
let {navigate} = this.props.navigation;
const user = this.props.navigation.state.params.user;
return (
<View style={{flex:1,flexDirection:"column"}}>
<Button onPress={()=>navigate("NextPage",{user:user})}
title="Go"
accessibilityLabel="Go"
/>
<View style={{width:"100%",flex:6,flexDirection:"column"}}>
<RequestRouter user={user} />
</View>
</View>
);
}
}
The issue I'm having is that the console.log(this.props.user); inside the class Recent extends Component gives me an undefined. This is because I don't know how to properly pass the user variable in the App.render() into the Recent.render(), since there is a TabNavigator that routes requests to the Recent class.
How do I pass the user variable from App.render() into Recent?
You can use screenProps to pass props to child component inside TabNavigator like this:
<RequestRouter screenProps={user} />
You can access it in child component by this.props.screenProps.user
Inside my header component, there is a menu icon. When I press the icon, it should open the DrawerNavigation.
I already tried to add
const { navigate } = this.props.navigation;
But unfortunately, it doesn't fix the problem.
My header component:
import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from '../assets/stylesheets/theme';
export default class Header extends Component {
render() {
return (
<View style={styles.header}>
<Icon onPress={() => navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
}
My home screen, where I import the header component:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../components/header';
import styles from '../../assets/stylesheets/theme'
export default class HomeScreen extends Component {
render() {
return(
<View style={styles.applicationView}>
<Header />
<Text>Home Screen</Text>
</View>
);
}
}
This error appears when the icon inside the header is pressed
How can I use the navigation inside the header component? Thanks in advance.
Update
Header component:
import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from '../assets/stylesheets/theme';
export default class Header extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.header}>
<Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
}
Home screen:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../components/header';
import styles from '../../assets/stylesheets/theme'
export default class HomeScreen extends Component {
render() {
return(
<View style={styles.applicationView}>
<Header navigation={this.props.navigation} />
<Text>Home Screen</Text>
</View>
);
}
}
Error after update
You need to pass the navigation object to your header component like this
<Header navigation={this.props.navigation} />
Your header component now should be something like this
export default class Header extends Component {
render() {
return (
<View style={styles.header}>
<Icon onPress={this.openDrawer.bind(this)} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
openDrawer() {
this.props.navigation.navigate('DrawerToggle');
}
}