I'm using the last version of MapBox React Native on my project, and everything is working great except I'm getting a warning,
ShapeSource#images is deprecated, please use Images#images
how can I fix that?
thanks for your help
Edit: my implementation after riastard answer, I hope it helps someone.
<>
<MapboxGL.Images
images={{someIcon: someIcon, someIcon2: someIcon2, someIcon3: someIcon3}}
/>
<MapboxGL.ShapeSource
id="symbolLocationSource"
hitbox={{ width: 20, height: 20 }}
onPress={this.onSourceLayerPress}
shape={featureCollection}
>
<MapboxGL.SymbolLayer
id="symbolLocationSymbols"
minZoomLevel={1}
style={{
iconImage: '{icon}',
iconSize: 0.25,
iconAllowOverlap: true
}}
/>
</MapboxGL.ShapeSource>
</>
Based on the descriptive error you're seeing, it sounds like you can avoid this warning by using the Images object to indicate what client side bitmap/drawable to use as the icon for your symbol layer rather than the older API. Doing this now will probably save you some frustration in the future when ShapeSource#images is fully deprecated.
Related
BorderBottomStyle is not working in the React native and as well as styled-components. BorderStyle is working fine. But BorderBottomStyle-dashed is not working and getting Component Exception.
<LocationText>BORDERBOTTOMSTYLE</LocationText>
LocationText = styled.Text`
margin-left:2%;
font-family:metropolisRegular;
font-size:20px;
padding-left:2px;
border-bottom-color:rgba(0,0,0,0.3);
border-bottom-width:2px;
border-bottom-style:dashed;
`;
https://i.stack.imgur.com/GzzUU.png
Any Better idea to style only the border Bottom with dashed in React native??
In react-native, you can't style many components directly as this is not necessary. Often times the better approach is to put the component inside a container and then style the container.
If you're a beginner, then how you attach the styles to the "View" is something you can google and not important, but this is an example of just showing the one style attached inline.
<View style={{ border-bottom-style: "dashed"}}>
<LocationText>BORDERBOTTOMSTYLE</LocationText>
</View>
I have to set a width of a View in term of the current font size. So I am wondering if React Native have an analogue of the Web's 1em?
I have found a solution with PixelRatio:
import { PixelRatio } from 'react-native';
// ...
<View style={{ width: 100 * PixelRatio.getFontScale() }} />
But it is too complicated and obscure, in my opinion.
Is there a more simple and clean way to solve the problem?
Thank you.
After a long search, I eventually found an answer in the React Native API Reference:
width sets the width of this component.
It works similarly to width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
So the getFontScale() is the only possible solution.
I am currently using an example from here: https://facebook.github.io/react-native/docs/modal.html
While I can edit the animationType={"slide"} it seems to be transitioning very slow.
Is there a way to edit the transition speed of the slide?
For anyone out there, its actually Xcode's issue
do cmnd + T and it will return to normal.
Simulator slow-motion animations are now on?
With library react-native-modal you can specify the duration of the In and out Animation
<Modal
hasBackdrop={true}
backdropOpacity={0.6}
backdropColor="#000000"
hideModalContentWhileAnimating={true}
useNativeDriverForBackdrop={true}
useNativeDriver={true}
animationInTiming={1}
animationOutTiming={1}
backdropTransitionInTiming={1}
backdropTransitionOutTiming={1}
isVisible={isVisible}
onBackdropPress={() => {
closingFunc();
}} />
I am getting an error saying "textAlignVertical" is not a valid style property when attempting to use the 'textAlignVertical' style on a Text element. I've checked the documentation and it says I should be able to use this style property: https://facebook.github.io/react-native/docs/text.html
has anyone else had this issue?
The textAlignVertical style is an Android-only property. If you are developing on iOS, try using the flexbox alignment property alignItems: center instead.
It also appears that the textAlignVertical property was moved from TextInput properties to the Text element styles only three days ago, and is going to be released in React Native 0.19.
I am not sure how the React Native documentation is generated, but based on my reading of this commit diff, the documentation appears to be ahead of the latest released version.
Sometimes you might find that alignItems won't work well -- I saw that an icon that I was using disappeared entirely. I instead just added an alignSelf: 'center' to the styling on the text itself (rather than the parent like you need to do with alignItems) and it seemed to fix it.
For textAlignVertical to work properly, add lineHeight prop instead of height for ios
height: phoneWidth * 0.09, // for android
lineHeight: phoneWidth * 0.09, // for ios
The line height solution worked for me. I am writing this post to explicitly show how to set the line height by platform:
yourComponent: {
width: 44, height: 44,
...Platform.select({
ios: {
lineHeight: 44
},
android: {}
}),
textAlign: 'center', textAlignVertical: 'center',
}
It's important that your and height and line height are the same and that you do it by platform.
It's important to note that I also have this component nested in a view with alignItems set to center.
I just wanted to explicitly write this code out as I had to piece it together from a few posts and this should make it easier if someone is looking for a quick copy/paste solution.
I did not put any undefined variables in the view but it appear some Unknow tags,so I wonder what is Unknown there?
<View>
<View style={styles.row}>
<Text>{rowData.user.name}ยท {rowData.createdDate}</Text>
<Text>{rowData.title}</Text>
</View>
<View style={styles.separator} />
</View>
in chrome I seen between the View and Text there is a Unknown.
I wonder if this is due to text nodes in your code, specifically white space like tabs and newlines. Please see this issue from the react dev tools:
https://github.com/facebook/react-devtools/issues/44
There are several such issues on the devtools tracker, sometimes related to a lack of displayName on components but I don't see how that applies here.
Suggest opening an issue on the React Native Github tracker as I doubt this is expected. Someone on the RN team might be able to give us a better explanation.
Did you define Text and View?
At the top of your file you should have something like this,
ES6
var {
View,
Text,
} = React;
ES5
var View = React.View;
var Text = React.Text;