I am using the InputText component from react-native-paper. How do I add input masking without having to use another library? In the image below, I want to add an input mask for the mobile number, but I don't know how to do it without using another library, and if I use another library, then I won't have the material design input style. Please help.
Screenshot
You can use react-native-mask-input or any other mark library with react-native-paper. You can use render prop of Text Input to pass react-native-mask-input component such that
<TextInput
label="Phone number"
render={props =>
<TextInputMask
{...props}
mask="+[00] [000] [000] [000]"
/>
}
/>
Refer render of TextInput
HTH
Related
I'm using the React Native Base Button.
The fontSize prop doesn't seem to work at all, it doesn't do anything. Am I doing something wrong, or misunderstanding the prop?
I did install the library using --legacy-peer-deps, because it doesn't offically support React 18 yet, but it seems to be working fine outside of this.
It appears you can pass props to the underlying Text in the Button with the _text prop:
<Button _text={{fontSize: "2xl"}}>
Press Me
</Button>
You are trying to increase Button's font size that is why it is not working. Think about that you try to increase TouchableOpacity's font size.
Here is a possible Solution
<Button>
<Text style={{fontSize:16}} >Button Title</Text>
</Button>
I have an Image of the body I am using a <Image> Component for that, and I have to mark wound on the body Image, but the thing is I have used <TouchableOpacity> for gain touch on the Image. Please Help me out on this. Thanks in advance.
I'd suggest you use react-native-svg to render a path instead .. which will allow you to handle onPress event for the path
<Svg {/**props */}>
<Path
d="..." /** Path */
onPress={() => alert('Pressed!')}
/>
</Svg>
It'll also give you sharper looking image...
The onPress handler of TouchableOpacity receive a PressEvent as parameter. This object contains information about the press location.
https://reactnative.dev/docs/pressevent
Need to show the long text, which is retrieved from server.
I'm using web storm and react native 0.57
<Text>{this.state.responseText}</Text>
Should be able to view long text under the text tag. Why long text is not shown under Text component?
Yes, I was also facing same problem. Use WebView instead of text component.
<WebView
originWhitelist={['*']}
source={{html: this.state.responseText}}}
/>
I think you should use numberOfLine = {} property of text component.
you can edit style of your text component and make fontsize larger
<Text style={{fontSize: 40}}>{this.state.responseText}</Text>
I'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's hidden because of design reasons. Is there a way to document.getElementById("myText").focus(); in react native that I can call after onBlur()?
Cheers.
You need to assign the TextInput field to a ref like this:
<TextInput ref={ref => (this.ref = ref)} />
Then you can programmatically focus it by running focus() on it, like so:
this.ref.focus();
Here's a little Snack where I run the focus/blur function when pressing a button:
https://snack.expo.io/#marcelkalveram/auto-focus-input-field-using-ref
It should be easy to replicate this for your navigation scenario.
In case you're using react-navigation, this is the part of the docs you'll be interested in: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
I am using Tcomb Form Native for forms and putting auto tag for placeholder in the options. However I would like to change the style for the text displayed. Is it possible to change that ?
var options = {
auto: 'placeholders',
};
<TextInput/> takes a prop of placeholderTextColor additionally the placeholder text should inherit whatever styles you put on the TextInput see the following example here: https://rnplay.org/apps/Yyfuag