t try this code
<View style={styles.container}>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<Text> just test </Text>
</view>
but then i run through expo its give a error
Cannot add a child that doesn't have a YogaNode to a parent without a
measure function!
i dont know why how can i fix this error ?
note:i try in android phone using exop link like exp://dd.**:80
I have made the status bar with some CO2 visualization content.
This is the source code: https://github.com/JyotibenSapariya/CO2-Visualization-
you can check it.
Its based on javascript so I hope you can use it.
thanks...
Related
Hi so I am having the issue where after navigating to a different screen. My items.map does not seem to be executing...
The console.log() within the array.map is working it will execute after on mount of the screen it just is not returning the component inside of it until the screen is updated either by saving in visual studio or touching the screen because I have a pan responder implemented...
The below snippet of code draws a line for me a on players finger drag and the goal is to have them match them with different tabs that will appear but that is beside the point...
return (
<View style={{ flex: 1 }} {...panResponder.panHandlers}>
<Text>Hello World</Text>
<Svg>
{items.map((item) => {
console.log("IS THIS WORKING??");
return (
<MatchingDisplay
key={item.id}
listItems={item}
randItems={item}
numOptions={numOptions}
/>
);
})}
<Line
x1={startX}
y1={startY}
x2={endX}
y2={endY}
strokeWidth="5"
stroke="black"
/>
</Svg>
</View>
);
Is there a way to manually update the screen when the navigation first takes place or am I missing something in my code that I just can't seem to see.
I have already done something like this on two other screens and do not understand why now it is not working...
I should also add the device I am testing on is an Android device.
Any and all help is appreciated
hello I am new to react native I have given a task to create an image slider as shown in the picture
I have not found any library matching this design so I want to create a custom carousel how can I create this. Any sort of help will be appreciated.
Can you provide more details as to what is the requirements of this?
Seems like you are trying to create introductory slides in the app.
This plugin is really flexible and customisable. You might want to check this one out.
https://www.npmjs.com/package/react-native-app-intro-slider
Also if you desire to make a custom slider, you can use ScrollView and use the following configuration to the scrollView
<ScrollView
style={{ flex: 1 }}
pagingEnabled={true}
horizontal={true}
scrollEventThrottle={16} >
<View>
<Text>Screen 1</Text>
</View>
<View>
<Text>Screen 2</Text>
</View>
</ScrollView>
Tag me if you have any more questions regarding this.
Give this article a read to understand it better.
https://medium.com/backticks-tildes/create-a-custom-app-intro-slider-in-react-native-4308fae83ad1
I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android
I'm using react native version 0.39 and the android version is 6.1.
The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I'm not getting any errors of warnings.
It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.
On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn't working. Thus, I suppose that it has something to do with memory issues. But I'm not sure.
I've added largeMemoryHeap to the manifest file.
In android studio I get log file as follows:
Thus, no errors, nothing. But the app doesn't work.
The stuck of code where those photos are rendered is as follows:
<ScrollView removeClippedSubviews={true}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
<View style={styles.container}>
{cards}
</View>
</ScrollView>
And one card is as follows, and I have a stuck of 10:
<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
<View style={styles.innerCard}>
<View style={styles.innerImageContainer}>
<Image contain='contain' style={styles.innerImage} source={this.props.image}/>
</View>
<View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
<Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
</View>
</View>
</TouchableHighlight>);
I found somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.
On IOS it works just fine.
I would be infinitely grateful if someone has an idea?
I've been trying to include code examples in a style guide for a React Native project and have had trouble finding a way to include the tags without React Native trying to render them itself.
I was hoping to simulate something sort of like Stackoverflow does with it's codeblocks like this:
// Example code for implementing custom button:
<CustomButton
color="primary"
title="Submit"
/>
So my code that breaks looks something like this:
<View>
<Text>
// Example code for implementing custom button:
<CustomButton
color="primary"
title="Submit"
/>
</Text>
</View>
Because React Native tries to render the Button and throws errors.
Is there something similar to HTML's <code> tag inside of React Native or some custom way of achieving the same functionality?
One way to make this work is storing the text as a string in some variable and just rendering that inside the container:
let codeBlock = "<CustButton \n\tcolor=\"primary\" \n\ttitle=\"Placeholder\" \n/>"
<View>
<Text>
// Example code for implementing custom button:
{codeBlock}
</Text>
</View>
with jsx-to-string, you can
<View>
<Text>
{jsxToString(
<CustomButton color="primary" title="Submit" />
)}
</Text>
</View>
This way you can reuse your jsx object easily instead of convert to string manually.
I've got this error on Android. Just in case, I use react-native-maps. Do you know what is it from?
I also got this error when I was conditionally rendering a element based on the truthiness of a non-boolean value:
<View>
{stringVariable && <Text>{stringVariable}</Text>}
</View>
This code gives me the error. However, if I double negate string variable like so:
<View>
{!!stringVariable && <Text>{stringVariable}</Text>}
</View>
it works.
Kind of a dumb error on my part, but it took me a while to figure out.
The problem for me with this error was that somehow I managed to end up with a <View> inside of <Text>. That was not very obvious because I had a Button component that was accepting some children wrapped in a <Text> and I was using some custom component for an Icon when instantiating Button. After a while somebody wrapped the Icon in a <View> to give it some padding and that caused the issue in the end.
It took some time to figure it out but in the end I solved it.
It may differ from case to case but I hope my problem inspires you in your debugging session.
Cheers!
The <Text> node should not have any other child node in it. It might be that <View> is nested inside it or just any other component. So you can check for any child in the <Text> node and change your code. Also, this issue occurs only on Android.
Text rendered without a <Text> tag
Problem
<View> some text </View>
solution
<View>
<Text> some text </Text>
</View>
this works with me
I probably have the dumbest answer to this question, because its a problem with the basics, but I looked this one up because I accidently wrote a outside the initial return statement.
so this:
return ( <View> <Text> example text </Text> ) </View>
should have been this:
return ( <View> <Text> exapmle text </Text> </View> )
Always wrap plain text inside "< Text> </ Text>" if you are using "< View>".
example:
//Wrong way:
< View> Hello</ View>
//Right way:
< View>< Text> Hello </ Text></ View>
For me it was a simple space outside of a Text tag. Really hard to find.
So I had
<View>
<View>
<Text>Some text</Text>
</View> <- Space here
</View>
To narrow it done I had to just comment out chunks until I figured it out.
If you are using codestyle below svg along with node the upper node will not consider the Component.
<View> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1"/></svg> <Text>Privacy settings</Text> </View>
Solution: Give new line in between svg tag Text tag.
This will fix the issue.