Text must be rendered within <Text> Component - react-native

While looking around at other questions, I still seemed to not be able to solve my issue. It still believes that there is text somewhere and I just need to know if I am completely overlooking something. I am new to React Native and React.js as a whole.
``
<View style={styles.body}>
{restaurantData.length ? (
<Text>{restaurantData.length}</Text>
) : null}
{restaurantData ? (
<View>
{restaurantData.map((restaurant) => (
<Cards restaurantData={restaurant} />
))}
</View>
) : null}
<Button onPress={getData} title="Get Data" />
<Divider style={{backgroundColor: 'blue'}} />;
<Button onPress={refreshData} title="Get Next 20 Restaurants" />
</View>
``


there's a ';' at the end of this link. Try removing it to see if that resolves your problem. If think I would check to see if there's extra spaces around your code. Sometimes React native doesn't like trailing spaces or spaces around your tags.
<Divider style={{backgroundColor: 'blue'}} />;

Related

react native - get visible text on screen

i am trying to create a book page layout where i have buttons for next and previous page.
For that i need to know how many words does the page fits, to know which text to show on the next page.
or, what text is visible on the page to know what to put in next page.
any idea how to do that ?
or different ideas ?
tried to search for event in the scroll view , to know when its scrollable , but couldn't
tried to check text component , but it didn't help.
page structure:
<View style={styles.fullWidth}>
<TopBar backEvent={onBackClickLocal} />
{/* <ScrollView> */}
<Text style={styles.bookText}>
{exampleText}
</Text>
{/* </ScrollView> */}
<View style={styles.pageArrowsSection}>
<TouchableOpacity style={styles.previousPageArrowContainer} >
<Ionicons name="arrow-back" size={32} color="green" />
</TouchableOpacity>
<View style={styles.bookPageNumber}>
<Text>
2/50
</Text>
</View>
<TouchableOpacity style={styles.nextPageArrowContainer}>
<Ionicons name="arrow-forward" size={32} color="green" />
</TouchableOpacity>
</View>
</View>
any idea ?
thnx alot

React Native - Background Image should scroll with the Text

I have the background transparent image (the light blue in the screenshot). The problem is when I type something in the textbox a vertical scroll comes up and the form moves a little bit up. Is it possible that the background moves with the scroll as well?
#1 - in the screenshot is the form that moves
#2 - is the background image
Here is the code
<Container style={styles.container}>
<ImageBackground source={loginbackground} style={{width: '100%',height:'100%' }}>
<Content>
<View style={{marginTop:margint,paddingLeft:30,paddingRight:30}}>
<View style={{marginTop:10}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={emailicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Email" value={this.state.username} onChangeText={ (text) => this.setState({ username: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
<View style={{marginTop:15}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={passwordicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Password" secureTextEntry={true} value={this.state.Password} onChangeText={ (text) => this.setState({ Password: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
{this.state.Loading==true?
<ActivityIndicator
animating={true}
style={styles.indicator} />
:
<View>
<View style={{flexDirection:'row',justifyContent:'center',marginTop:15}}>
<View style={{width:'13%',justifyContent:'center'}}>
<TouchableOpacity onPress={() => this._toggleRememberme()}>
<Image source={this.state.isrememberme?checkboxcheck:checkboxuncheck} style={{width:28,height:28}}/>
</TouchableOpacity>
</View>
<View style={{width:'41%',justifyContent:'center'}}>
<Text onPress={() => this._toggleRememberme()} style={{fontSize:17,color:'rgb(56,56,56)'}} >Remember me</Text>
</View>
<View style={{width:'46%',justifyContent:'center'}}>
<Text onPress={() => this.props.navigation.navigate("forgotpass")} style={{textAlign:'right', fontSize:17,color:'rgb(56,56,56)'}} >Forgot password?</Text>
</View>
</View>
<Text onPress={() => this.props.navigation.navigate("signup")} style={{textAlign:'center', textDecorationLine:'underline', fontSize:17,color:'rgb(56,56,56)',marginTop:15}} >Create an Account</Text>
<Button onPress={() => this.signin()} block style={{backgroundColor:'rgb(107,29,43)', marginTop:15,height:50, borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Text style={{color:'#fff',fontSize:19}}>Login</Text>
</Button>
</View>
}
</View>
</Content>
</ImageBackground>
</Container>

Just to clairify, you would like for the form to appear fixed above the image background, and for the form and image background to move together as you scroll. So, currently your background is fixed, but the form is above and scrolls independently of the background?
I just want to make sure I have your question correct :)
I think when you use ImageBackground it will always behave in this way, hence the "background". If you want the form to move with the image you could try to position the form with "absolute" position on top of a regular Image component. You might want to try using react-native-elements or react-native-paper as they have Card and Surface components which can help to achieve this behaviour.
I realize this isn't a very definitive answer but I hope it helps in some way. Also you might want to just check any style props of the components which you have used as well as reviewing the documentation on ImageBackground. https://reactnative.dev/docs/imagebackground
My apologies that I couldn't give you a better answer.

react native - I cannot scrolling down with two flatlist

I can scroll only in case when I change SafeAreaView to ScrollView but I get this error
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
{subCategoryIsLoading ? (
<ActivityIndicator
size='large'
color={primColor}
style={{marginTop: 150}}
/>
) : (
<SafeAreaView>
<View style={styles.containerSubCategory}>
<FlatList
showsVerticalScrollIndicator={false}
data={filterCatTrue()}
keyExtractor={item => item._id}
renderItem={({item}) => {
return (
<View style={styles.containerImages}>
<TouchableHighlight onPress={() => console.log(item._id)}>
<Image
source={{
uri: `${urlImages}subCategories/${item.image}`,
}}
style={styles.imageSubCategory}
/>
</TouchableHighlight>
</View>
)
}}
/>
<FlatList
horizontal={false}
numColumns={2}
showsVerticalScrollIndicator={false}
columnWrapperStyle={{
justifyContent: 'space-between',
}}
data={filterCatFalse()}
keyExtractor={item => item._id}
contentInset={{bottom: 60}}
renderItem={({item}) => {
return (
<View style={styles.containerImagesWide}>
<TouchableHighlight>
<Image
source={{
uri: `${urlImages}subCategories/${item.image}`,
}}
style={styles.imageSubCategoryWide}
/>
</TouchableHighlight>
</View>
)
}}
/>
</View>
</SafeAreaView>
)}

Virtualized lists, that means 'SectionList' and 'FlatList' for example, are performance-optimized meaning they improve memory consumption when using them to render large lists of content. The way this optimization works is that it only renders the content that is currently visible in the window, usually meaning the container/screen of your device. It also replaces all the other list items same sized blank space and renders them based on your scrolling position.
Now If you put either of these two lists inside a ScrollView they fail to calculate the size of the current window and will instead try to render everything, possibly causing performance problems, and it will of course also give you the warning mentioned before.
Check this post, it perfectly explains your problem.

In react-native, is it anyway I can pull data from my JSON into my component?

Here is a thing, I'am struggling about using RN .
I would like to use flatlist to generate my content.
the flatlist contents can be pressed so It makes to go another page open.
I need animation freedom so the content can be pop up anywhere such as from the bottom, left, right.
I would like to use one layout which I was already built.
such a concept are, using renderingItem into view, than generating data in my component. here is concept I tried to do
<View style={styles.flatList}>
<FlatList
data={newsFeedData}
horizontal={false}
showsVerticalScrollIndicator={false}
renderItem={({item, index})=>{ return
<View>
<TouchableOpacity
activeOpacity={1}
onPress={this.newsFeedCards.bind(this)}>
<View style={styles.mgView}>
<ListItem item={item} image={item} index={index}/>
</View>
</TouchableOpacity>
</View>
}}/>
</Animated.View>
<View data={newsFeedData}
style={styles.pageDetail}
renderItem={(item, idex)=>{
return <PageDetail
item={item} image={item} image={item}></PageDetail>
}}>
</View>
Please help me anyone know the trick of this concept. I really appreciate your help!

Images not appearing when loading offline without packager

As the title suggests, <Image src={require('...')} /> does not appear when attempting to view while offline and disconnected from react native packager.

It turns out that either because of the <TouchableOpacity> or the lack thereof <View> wrapping the <Image/>, it causes the image to not appear.
So the first example doesn't work:
<TouchableOpacity>
<Image src={require('...')} />
</TouchableOpacity>
whereas this does:
<TouchableOpacity>
<View>
<Image src={require('...')} />
</View>
</TouchableOpacity>