I got a problem rendering variable 'html'.
I think its because trying to render it before loading ends( error said the variable 'html' is undefined).
is there any modules or something ? (like loading indicator)
return (
<View style={styles.container}>
<ScrollView style={styles.scrollview}>
{lecture_render(get_all_list(html))}
</ScrollView>
</View>
)
I rendered like this, but I want some filter for 'html' variable before render.
You can simply use an ActivityIndicator component from react-native to render a circular loading indicator if your state has been not been set.
import {ActivityIndicator} from 'react-native'
if (html=== "") {
return (
<View>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<ScrollView style={styles.scrollview}>
{lecture_render(get_all_list(html))}
</ScrollView>
</View>
);
Related
Hello guys i have been working on the ubereats clone and while using scrollView it doesnt work ,
i used it on other components the same way and it worked fine but here it doesnt !! ?
const MenuItem=()=>{
return(
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{paddingHorizontal:10}} >
{Menu.map((food,index)=>(
<View style={{paddingLeft:20,flexDirection:"row",marginTop:30,borderTopWidth:1,borderTopColor:"lightgray",paddingTop:10}} key={index} >
<View style={{justifyContent:"center"}}><BouncyCheckbox
iconStyle={{borderColor: "gray",borderRadius:0}}
fillColor='green'
/></View>
<View style={{width:220,marginLeft:10}}>
<Text style={{fontSize:20,fontWeight:"700"}}>{food.title}</Text>
<Text > {food.description}</Text>
<View style={{marginTop:8}}>
<Text style={{fontSize:17,fontWeight:"500"}}>{food.price}</Text></View>
</View>
<View style={{marginLeft:18}}>
<Image source={{uri:food.image}} style={{width:80,height:80,borderRadius:30}}/>
</View>
</View>
))}
</View>
</ScrollView>
)
}```
i used flex 1 on the view outside the map function and it didnt fix it
Remove the View above the ScrollView.
You try to set one child for the scrollView it’s the View component and the View component have array map.
Remove the View component to keep array map child for ScrollView
i'm using react-native-elements on my new project and decided to use floating action button on home screen. but there is an issue im facing. in home screen there is scrollView and FAB is placing itself to bottom of when i write in scroll. outside of scroll i cant see it. how to solve this problem
this is FAB
readBarcode() {
return (
<View>
<FAB title="Barkod Okut" placement="right" />
</View>
);
}
and this is render
render() {
return (
<View style={Styles.Container}>
{this.readBarcode()}
<ScrollView style={Styles.MainScroll}>
{slider()}
{banner()}
{categoryButtons()}
</ScrollView>
</View>
);
}
this is how i figure it out
this is render
render() {
return (
<View style={Styles.Container}>
<ScrollView style={Styles.MainScroll}>
{slider()}
{banner()}
{categoryButtons()}
</ScrollView>
{this.readBarcode()}
</View>
);
}
and this is FAB
readBarcode() {
return (
<View>
<FAB title="Barkod" placement="left" color="#005F8E" />
</View>
);
}
placement right wont work but when i do it left i work perfectly
I'm a new react native developer and I have an issue with TouchableHighlight where it always shows an error "Error: React.Children.only expected to receive a single React element child." in addition while I remove it is work as usual and I assume if this issue come from my device/vscode/browser. Because I already follow the source code from https://reactnative.dev/docs/touchablehighlight but still show that error.
Error image
Image without TouchableHighlight tag
Here my code
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onPress}>
<View style={styles.button}>
<Text>Touch Here</Text>
</View>
</TouchableHighlight>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{this.state.count ? this.state.count : null}
</Text>
</View>
</View>
);}
From the error message, the issue might happen if you pass Mutlipe child components to TouchableHighlight
From the docs:
TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View
<TouchableHighlight onPress={onPress}>
<View style={styles.button}> // Mutlipe child components are wrapped in a View
<Text>Touch</Text> // component 1
<Text>Here</Text> // component 2
</View>
</TouchableHighlight>
I am using "react-native": "^0.50.4", and this is how componentrender looks like:
render(){
return(
<View style={{flex: 1}}>
<View>
....
</View>
<FlatlistComponent />
</View>
);
}
The above FlatlistComponent renders a list, except the last item is partially shown/pushed down, this is because the View above the flatlist, how do I go about this ?
If the FlatList disappears when you add a style of flex: 1, you must continue moving up the hierarchy of elements, adding flex, until the FlatList finally appears.
I guess the View component other then the flat list is taking up the whole space of the flex 1. Flatlist being scrollable it is supposed to go down.
Try assigning separate flex values to the child components.
render(){
return(
<View style={{flex: 1}}>
<View style={{flex: 1}>
<View>
....
</View>
</View>
<View style={{flex: 3}>
<FlatlistComponent />
</View>
</View>
);
}
I built a view that is populated dynamically using array mapping. After doing this, I realized that the View would be too large to contain all the array items on one screen.
Here is my code.
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
So I tried adding a scroll view as the parent like this:
<ScrollView>
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
</ScrollView>
This does add some scrollability to the view, but it's still cutting off a portion of the last object in the array.
Is there a way to fix this?
Thanks!
ScrollView is intended for showing scrollable content at once. Since you are populating content dynamically, you should be using FlatList. Something similar to the following would work:
...
_keyExtractor = character => character.Name
_renderItem = ({character}) => (
<Text>
{character.Name}
</Text>
)
render() {
return (
<FlatList
data={Characters}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
...
Detailed explanation is available in the docs.
If you are by any reason still forced to stick to Scrollview, the problem is probably related to the styling. I suppose styles.flexColumn should be applied to the ScrollView itself via contentContainerStyle, rather than to its' child View.