I'm not experienced js developer so may be I'm asking about something obvious.
Imagine I create component (let's name it MyInput) which consists from TextInput and a label.
Where label - string (which renders into Text) or any other React component.
Component's style prop is used for TextInput customization. So I add possibility to set labelStyle prop which will be used by label.
When I use MyInput I want to do such thing: if label is text (no matter raw string or already a Text) - apply to it color and fontSize.
But if I pass instead of string some other component, let's say Image - then do not apply unsupported parameters.
Right now react-native warn me every time when I try to apply fontSize or other style props to non-text components.
I know, warnings can be switched off, but for me hiding the problem != solution.
Ideally I would like to have some method or class or whatever which will look at style props and on supported props by component and somehow filter them before apply.
Am I missing something? Or this warnings are okay?
Related
I'm given a custom designed number pad in a React Native app and I need to implement text input functionality, just like the OS number pad/keyboard. The text input is a regular React Native TextInput with showSoftInputOnFocus={false} to prevent the real OS keyboard from appearing.
How can I create a key press event that will be handled correctly with the currently focused text input field, without recreating whole text input/handling logic from scratch?
I'm looking for something like (made up code):
function pressEvent(){
Keyboard.dispatchPressEvent(1); //such a method does not exist, made it up to demonstrate my needs
}
<Pressable onPress={pressEvent}><Text> 1 </Text></Pressable>
The closest I've found was Keyboard.emit for which almost no documentation exists.
I've ended up creating a controlled component where I've manipulated the business logic on parent and passed it to the text field.
Because my needs were simple (numeric entry, no caret position. much like a calculator) I was able to pull it off.
I'm trying to create a TextInput component that is both editable and has clickable urls. According to the react native docs, the dataDetectorTypes prop is only supported when editable={false}.
Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}.
Has anyone found a way around this limitation? It seems like it should be possible. The behavior I want is...
Tapping on the url should open it in a browser
Tapping anywhere else should start editing at that position
It's ok if the link is no longer clickable when the TextInput currently has focus
The only thing I can think of to get around this is to store the editable value in state and then upon clicking some Edit button will change the state from editable to true.
onBlur would switch this state back to false
I haven't tried this before though so just a suggestion on attempting workarounds or finding some middle ground between the two.
My suggestion is to place the input field with the url centered inside a bigger div.
Make the input field not much bigger the text inside it and when you click it trigger some function that redirects to the page on your state.
And when you click on the outer div you trigger a function to focus on the input field and edit its value.
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
How to set returnKeyType to all TextInput fields inside one application?
I'm currently using tcomb-form-native and have to define returnKeyType again for every field, I just want to define it once and should work in every component.
any ideas?
You have a couple good options
Create a custom text input component, and here you can create a stylised TextInput field for use across your entire application. You can then set returnKeyType=whatever in its props, and use this component for all your text input instead.
Use react-native-global-props, which seems to have been created for this exact purpose. Here is the link to the repository for more information / instruction
Why should I use this:
const styles = StyleSheet.create({
...
});
instead of this:
const styles = {
...
};
Properties that StyleSheet provides don't seem very needful to me.
Performance of rendering, better invalid prop values detection and better code quality.
When passing regular style objects into the StyleSheet.create(), the module will freeze the objects and assign each one an ID.
IDs enable optimizations through the bridge and memory in general
Some type or prop value validity checks of Stylesheet objects could warn you or help you fix some invalid style issue better than when using the normal object approach.
By moving styles away from the render function, you're making the code
easier to understand. Naming the styles is a good way to add meaning
to the low level components in the render function.
From what I've seen, both work (normal object, StyleSheet object) when setting the style of a component, even when you pass an array of objects.
Disadvantages when using the StyleSheet object:
1) you cannot make a comparison like this styles.myNiceComponent.backgroundColor === 'blue'
More details about this disadvantage here:
Why can't we check a style attribute of a react-native app?
2) Recomputing styles based on some criteria (like screen rotation) needs some additional infrastructure code to determine which styles to use. If you use simple objects they could be recomputed on the fly every time.
Sources: https://reactnative.dev/docs/stylesheet