I know I'm just having a syntax issue, but here goes.
I'm building a weather app where the background image source changes based on weather conditions. My quotes and weather desc work, but having trouble setting the background image based on the same conditions.
const weatherCases = {
"clear sky": {
title: "clear sky",
background: "../assets/sunnyBackground.png",
quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}
return (
<ImageBackground source={weatherCases[weatherName].background} style={styles.forecastContainer}>
<View style={styles.forecastTopContainer}>
<View>
<Text style={styles.quoteText} >{weatherCases[weatherName]["quote" + randomQuoteNumber.toString()]}</Text>
</View>
</View>
<View style={styles.forecastBottomContainer}>
<View style={styles.forecastImageContainer}>
<Text>IMAGE</Text>
</View>
<View style={styles.forecastTempContainer}>
<Text>{city}</Text>
<Text>{temp}°</Text>
<Text>{weatherCases[weatherName].title}</Text>
<Text>{hum}% Humidity</Text>
</View>
</View>
</ImageBackground>
You can define a conditional variable which may be inside the json or state object and conditionally pass the source as follows.
<ImageBackground source={this.state.conditional?require('./assets/snack-icon.png'):null}>
Here is a expo link
You need to specifically require() every image resource that you will use. ImageBackground source prop expects the result of this require
const sunnyBg = require("../assets/sunnyBackground.png")
...
"clear sky": {
title: "clear sky",
background: sunnyBg,
quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}
import LadyInGrass from '../../../assets/images/lady_in_grass.jpg';
<ImageBackground
style={styles.imageStyle}
source={imageSource ?? LadyInGrass}>
</ImageBackground>
Related
<View
style={{
flexDirection: "row",
}}
>
<Text
style={{
flex: 1,
}}
>
By continuing, you agree to our{" "}
<Pressable
onPress={...}
>
<Text>
Terms of Service
</Text>
</Pressable>
</Text>
</View>
"Terms of Service" is printed higher than "By continuing, you agree to our". How do I vertically align them?
Or more precisely - how do I get the Pressable Text to vertically align to the bottom?
This is a bug in React Native itself. There are several open reports of this bug on React Native's GitHub, but the chances of it being fixed don't look good:
https://github.com/facebook/react-native/issues/30375 - for the general problem of Views nested in Text being mis-aligned on Android, and a core contributor responded, but appeared to get derailed and stuck in some details specific to mimicking superscript and subscript.
https://github.com/facebook/react-native/issues/31955 - specific to Pressable and someone posted a PR to fix it, but Facebook closed it because no-one from Facebook got around to reviewing it before it became stale and out of date with the main branch.
There's also some discussion in this issue comment, but the issue got closed.
In React Native >= 0.65, if your inline pressable element uses only text styles, you can work around this issue by using <Text> with onPress (and onPressIn and onPressOut to style the pressed state). Crude example:
/**
* Like a simplified Pressable that doesn't look broken inline in `Text` on Android
*/
const TextButton = ({ children, onPress, style, ...rest } => {
const [pressed, setPressed] = useState(false)
const onPressIn = () => setPressed(true)
const onPressOut = () => setPressed(false)
return (
<Text
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
style={typeof style === 'function' ? style({ pressed }) : style}
{...rest}
>
{typeof children === 'function' ? children({ pressed }) : children}
</Text>
)
}
Beware, however, that there are also bugs around selecting interactive elements nested inside text using accessibility tools. If you can simply avoid nesting the interactive element in text, and have it on its own line, that's probably better: link-like interactive nested text isn't well supported in React Native currently.
On older versions of React Native before 0.65, Text didn't support onPressIn or onPressOut:
If you don't need Pressable's pressed state, use Text instead of Pressable (as the asker did: https://stackoverflow.com/a/66590787/568458)
If you do need pressed state, Text doesn't support the required onPressIn/Out handlers. However, TouchableWithoutFeedback does support those, and works by injecting props into its child so the Text will remain Text with no wrapping View. Wrap a Text in TouchableWithoutFeedback and pass the touchable onPress with onPressIn and onPressOut handlers and store the pressed state yourself.
/**
* Like a simplified Pressable that doesn't look broken inline in `Text` on Android
*/
const TextButton = ({ children, onPress, style, ...rest } => {
const [pressed, setPressed] = useState(false)
const onPressIn = () => setPressed(true)
const onPressOut = () => setPressed(false)
// TouchableWithoutFeedback modifies and returns its child; this returns `Text`
// plus press in/out events attached that aren't supported by Text directly.
return (
<TouchableWithoutFeedback
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
>
<Text
style={typeof style === 'function' ? style({ pressed }) : style}
{...rest}
>
{typeof children === 'function' ? children({ pressed }) : children}
</Text>
</TouchableWithoutFeedback>
)
}
Warning: if you're also using React Native Web and React Navigation, don't use the TouchableWithoutFeedback approach on Web, use pure Pressable on web, because React Navigation's navigate functions don't reliably work when passed to Touchable*s on Web due to a quirk of how the event handlers are set up (but they do work in Pressable), and this issue doesn't exist on Web.
Ended up doing this differently, using the onPress property of the <Text> component and finally wrapping all <Text> components in another <Text> component to have a proper line break:
<View>
<Text>
<Text>
By continuing, you agree to our{" "}
</Text>
<Text onPress={() => {...}}>
Terms of Service
</Text>
<Text>
{" "}and our{" "}
</Text>
<Text onPress={() => {...}}>
Privacy Policy
</Text>
</Text>
</View>
The snippet below should work but hard to understand without giving a shot. If you can provide screenshots I can help more in sake of getting a more proper result.
<View>
<Text style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}>
By continuing, you agree to our{" "}
<Pressable
onPress={() => {
navigate("LegalStack", { screen: "Terms" });
}}
>
<Text style={{margin: 'auto'}}>
Terms of Service
</Text>
</Pressable>
</Text>
</View>
I found a very hackidy-hack solution...
<Text selectable={true}>
<Text>if you click</Text>
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => Linking.openURL("https://www.google.com")}
>
<Text
style={{
alignSelf: 'flex-end',
marginBottom: -4,
}}
>
here
</Text>
</TouchableOpacity>
<Text>, it will open google</Text>
</Text>
By default the flexDirection is column. Change it to flexDirection:"row"
I am trying to make a simple single page react native app.
Just to check if my flexbox layouts are working correctly,I decided to give background colors and check if they are aligned.
As seen in the picture the first view occupies the entire space.
Where I am I going wrong ?
My output as shown
Output
Here is my code:
render() {
return (
<View style={styles.container}>
<View style={styles.questionview}>
<Text>Enter a word to get meaning</Text>
<TextInput onChangeText={(text)=> this.setState({word:text})}/>
<Button title={"GET MEANING"} onPress={this.buttonPressed}/>
</View>
<View styles={styles.ansview}>
<Text styles={styles.anstext}>{this.state.answer}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1
},
questionview:{
flex:6,
backgroundColor:'red',
padding:30
},
ansview:{
flex:3,
backgroundColor:'green'
}
});
Took me some time, but found your problem. It's a typo.
It should be just 'style' , not 'styles'.
It should have been as below :
<View style={styles.ansview}>
<Text style={styles.anstext}>{this.state.answer}</Text>
</View>
also styles.anstext is not present in your code.
Here's how this part looks using TouchableWithoutFeedback
And here is the same thing, except with TouchableOpacity
The code for this part:
<TouchableWithoutFeedback>
<View style={styles.buyCoinsItem}>
<View style={styles.cost}>
<Text>{no_of_coins}</Text>
</View>
<Text>{product.priceString}</Text>
<View style={{height:30, flexDirection: 'row', marginTop:10}}>
{displayDiscount &&
<View style={styles.discountContainer}>
<Text style={styles.whiteText}>Save {discount}</Text>
</View>
}
</View>
</View>
</TouchableWithoutFeedback>
What's going on here?
This is an annoying side effect of how the two components are implemented.
Essentially, TouchableOpacity is a native-backed View that supports touch interactions by calling setNativeProps({ opacity }) on that view, whereas TouchableWithoutFeedback is simply wraps a native view and attaches the touch handlers.
In order to make TouchableWithoutFeedback behave like TouchableOpacity, nest an additional View inside it, and define any styles on the child view:
Before:
<TouchableOpacity onPress={...} style={styles.touchable}>
// Touchable content
</TouchableOpacity>
After:
<TouchableWithoutFeedback onPress={...}>
<View style={styles.touchable}>
// Touchable content
</View>
</TouchableWithoutFeedback>
I'm not sure why the API was designed this way - my guess would be to avoid creating an additional native backing view for performance reasons when it's not needed.
However, from refactoring purposes, this makes it slightly more painful to move between different types of Touchables. In my projects, I typically create a custom Touchable component that wraps this logic behind a prop, or use something like react-native-platform-touchable, which gives you Android Material-style effects on Android.
Nvm, I figured it out. I basically switched the TouchableOpacity with the outer View. So, like this:
<View style={styles.buyCoinsItem}>
<TouchableOpacity>
<View style={styles.cost}>
<Text>{no_of_coins}</Text>
</View>
<Text>{product.priceString}</Text>
<View style={{height:30, flexDirection: 'row', marginTop:10}}>
{displayDiscount &&
<View style={styles.discountContainer}>
<Text style={styles.whiteText}>Save {discount}</Text>
</View>
}
</View>
</TouchableOpacity>
</View>
Just started learning react-native,
I have created one separate file flexdemo.js and created component as below:
import React, { Component } from 'react';
import { View } from 'react-native';
export default class FlexibleViews extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: "powderblue" }}> </View>
<View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>
<View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>
</View>
);
}
}
and App.js file is as below:
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View, Image
} from 'react-native';
// import Bananas from './src/banana';
// import LotsOfStyles from './src/styledemo'
import FlexibleViews from './src/flexdemo';
export default class App extends Component {
render() {
return (
// <Bananas name = "Tapan"/>
<View>
<FlexibleViews />
</View>
);
}
}
That gives me this error:
Now if I try to run the code by adding flexdemo.js code into App.js then everything works fine.
Changed The App.js like this:
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
}
Remove comments inside component.
I want to give a more general answer here, because there can be several reasons for the issue returning the same error message. The three I have seen the most:
1. Comments might be the cause. But instead of removing comments make
them work:
In the return()-part, variables need to be wrapped in {} like
{this.state.foo} so wrapping the comments works fine...
return(
<Text> This works {/* it really does */}</Text>
);
...as long as they are not the first or last element in the return statement:
return(
{/* This fails */}
<Text> because the comment is in the beginning or end </Text>
{/* This also fails */}
);
2. Conditional rendering might be the cause. If myCheck is undefined or
an empty string this can fail:
const myCheck = ""; /* or const myCheck = undefined */
return(
{myCheck && <MyComponent />}
);
but adding double negation !! works:
const myCheck = ""; /* or const myCheck = undefined */
return(
{!!myCheck && <MyComponent />}
);
3. Whitespaces (or actually any strings) within a component can cause
this, if not in a <Text>-Component:
Text in a View for example:
/* This fails */
return(
<View>it really does</View>
);
But also the tiny space between two components:
/* <View>*Space*<Text> fails: */
return(
<View> <Text>it really does</Text> </View>
);
But works if in a newline:
return(
<View>
{/* This works */}
<Text>surprisingly it does</Text>
</View>
);
Unfortunately these pitfalls do not always lead to errors. Sometimes they work. I guess this depends on which of all those many tools/libraries/components you use and their versions in your app.
I was able to reproduce the issue with the code you provided. The solution is twofold:
In your flexdemo.js file you should remove the whitespaces from within the <View> tags. They are considered as text, and text is only allowed inside a <Text> component. I'd recommend making your <View> tags self closing until they have some content, to stay away from this issue in the future, like so:
import React, { Component } from 'react';
import { View } from 'react-native';
export default class FlexibleViews extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: 'powderblue' }} />
<View style={{ flex: 2, backgroundColor: 'skyblue' }} />
<View style={{ flex: 3, backgroundColor: 'steelblue' }} />
</View>
);
}
}
This will render your components but still be faulty, as you wont see anything on the screen.
To get your flexible shades of blue to appear you'll either have to add flex to the <View> component in your App.js file or(depending on what your next steps are, I guess) remove it and render your <FlexibleViews> as the root component, since it is basically a <View> component with some children anyway.
If you have if else statement in your render() function use !! like this:
{!! (this.state.your_state) &&
<View>
<Text>Your Text</Text>
</View>
}
instead of:
{(this.state.your_state) &&
<View>
<Text>Your Text</Text>
</View>
}
I downgrade react native version, then I got a different error, basically what it was I had a simple string within a view, something like this:
<View>
MyComponent
</View>
I had to wrap the string with a text component like this:
<View>
<Text>MyComponent</Text>
</View>
hope that helps
<View style={{ flex: 1 }}>
<Text style={{ flex: 1, backgroundColor: "powderblue" }}> </Text>
<Text style={{ flex: 2, backgroundColor: "skyblue" }}> </Text>
<Text style={{ flex: 3, backgroundColor: "steelblue" }}> </Text>
</View>
Make use Component hierarchy should be maintain, for example all components like Text, ListView, TextInput etc should be wrapped inside the parent component that is View.
lets see the below example :
< View >
< Text >
CORRECT
< / Text >
< / View >
Make sure all the Component tag should be closed properly.
Make sure unnecessary semicolons should be removed from the react native layout components & functions.
https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html
This error is usually from one of below mistakes
Remove unnecessary comments and remove comments from return function.
check for proper variable name.
check for unintended semicolon or any wrong syntax
Delete the comment in the return block "// "
I encountered the same problem when I accidentally add a ';' in the return block, the iOS is work well, but the Android has this bug information
In my case I had small () brackets around one of my view which was causing error.
({renderProgress()})
Removing small brackets worked for me.
{renderProgress()}
In my case I had a condition in my render function that resulted in evaluating 0.
It seems that 0 && 'some jsx' breaks in newer versions of react native.
Error Example:
render(){
return <View>
{this.state.someArray.length && <View>...</View>}
</View>
}
Although this should be valid javascript and works in react since 0 is falsey, It crashes in react native, not sure why but it works with a little refactoring as:
Working Example:
render(){
return <View>
{this.state.someArray && this.state.someArray.length> 0 &&
<View>...</View>}
</View>
}
Remove semi-colon when rendering a method in
<View style={styles.container}>
{this.renderInitialView()} //semi-color should not be here
</View>
I have encountered the same issue just now and solved it by removing the comments that I have made while editing the project in android studio and over there the comment's shorotcut just adds /* and */ but actually for react native the commented code should be enclosed with starting and end of curly braces, for example following would be an invalid comment:
/*<Text style={styles.pTop}>
{
this.state.response.map((index, value) => {
return index.title;
})
}
</Text>*/
And the following will be a valid one:
{/*<Text style={styles.pTop}>
{
this.state.response.map((index, value) => {
return index.title;
})
}
</Text>*/}
you see there is just one minor difference of enclosing the comment in curly braces.
This error also occurs if you have comments in your render() return() function. Remove all comments in your return function when rendering JSX
In my case I had written <TextInput> in the <Text> tag.
Below is wrong. It will give error for child.
<text>
<TextInput style={styles.textinput}
textcolor
placeholder = 'user id'
placeholderTextColor = 'gray'
/>
</Text>
solution.
<Text> hello </Text>
<TextInput style={styles.textinput}
textcolor
placeholder = 'user id'
placeholderTextColor = 'gray'
/>
you have to write separate tag.
So any tag you have written in another tag this error can come.
When I wrap content like this example below, it scrolls Perfectly..
return(
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
);
However, whenever I wrap it in another View, It will not scroll.
return(
<View>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</SCrollView>
</View>
);
Is there some sort of fix to this. I am trying to put a nav bar header above all of the content, couldn't really figure it out though.
It's a typo:
Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>.
You also need to add a style to the View container, here's an example of what it should look like:
return(
<View style={{flex: 1}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
);
Try next code:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
</ScrollView>
If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.
This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):
return (
<ScrollView>
<Pressable>
<Text>This is scrollable</Text>
<Pressable>
<Pressable>
<Text>As is this</Text>
<Pressable>
</ScrollView>
);
Try adding style={{flex:1}} to <View> and <ScrollView> components. You also have a typo on your code: </SCrollView> in line 9. An example code will look like this:
<View style={{backgroundColor:'white', flex:1}}>
<NavigationBar title="Title" />
<ScrollView style={{flex:1, backgroundColor:'white'}}>
<View style={{flex:1,justifyContent:'center'}}>
<RegisterForm />
</View>
</ScrollView>
</View>
Another solution is to add a height property to the parent View container. This sometimes works well when calculating the height against the screen height.
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{height: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I have tried all of these solutions and none were working. Then I just fully restarted the app and the metro server and everything worked fine.
As #Evan Siroky has answered above it's working well I'm just adding on thing for a auto height in case you don't want to reserve the space
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{ Height: "auto", maxHeight: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I had a similar issues, it got solved by removing height/width if set to '100%'.
Just adding here if someone faces the same issues. :D
Set nestedScrollEnabled as true for Hybrid Android + react app as it might be issue with gesture/click for scrolling issue.
Just if anyone is as desperate as I was:
My view was inside a StackNavigator. In the StackNavigator you can assign a default cardStyle. This card style needs height: "100%".
For me this was the case but I had overwritten it within the cardStyle of the Stack.Screen definition.
See this working example:
// This is the stack navigator
<ModalStack.Navigator screenOptions={() => ({
cardStyle: {height: "100%"}
});}}>
<ModalStack.Screen name={ScreenItemDetail} options={{
// cardStyle: {} be sure to not override card style again!
}} component={ItemDetailScreen} />
// ...
</ModalStack.Navigator>
removing contentContainerStyle prop from the ScrollView has fixed the issue for me
Just add ScrollView as parent View if it's still not working for you...just restart your app or server and your ScrollView will work fine. Because sometimes our app freezes for no reason.
I think the best way of doing this is to put all requires inside an array and map this array.
const images = [
require('../your/path/here'),
require('../other/image/here'),
...
];
return ( {images.map((image) => <Image ... source={image} />)
note that if you want it as a background image with other elements above the image, you may use BackgroundImage and either render elements for each image or position absolute the image map and zIndex it behind all things