I use GiftedChat from react-native-gifted-chat and I use the InputToolbar component to style the input. My problem is that I can't change the "enter" button on the keyboard with that. Should I use TextInput and make a separated button for Send instead of InputToolbar?
I found the answer but I will not delete this question because it took me a while to find one.
You can add textInputProps in the InputToolbar component:
<InputToolbar
textInputProps={{returnKeyType: 'send'}}
/>
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>
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
We are using SimpleFormIterator inside ArrayInput like follows (as example)
<ArrayInput source="backlinks">
<SimpleFormIterator>
<DateInput source="date" />
<TextInput source="url" />
</SimpleFormIterator>
</ArrayInput>
But when clicking "ADD" to add new fields it is still focused in "ADD" button. Is there any way we can focus on first added field after clicking "ADD"?
You could try adding an autoFocus prop on the DateInput, however, it means the first item will be focused automatically too in an Edit form which is probably not what you want.
I think this should be the job of the SimpleFormIterator. Can you please open a feature request issue on react-admin repository ?
In the mean time, you can make your own form iterator which would handle the focus.
How can I remove default toolbar and add a custom toolbar as per my requirements and not get the default Save button with Floppy Disk in SimpleForm?
I am able to style the buttons and remove the icons on the toolbar but not able to proceed further as I am new to react-admin.
As mentioned in the documentation : React-Admin Toolbar, you can always override the default layout of the toolbar with toolbar={<CustomToolbarComponent />} props in the SimpleForm component.
As for disabling the toolbar altogether, you can use toolbar={false} in SimpleForm and that would remove it.
You can also let toolbar be false, and maybe add the CustomToolbarComponent inside the SimpleForm component.
Something like :
<SimpleForm toolbar={false}>
<FormComponent1 />
<FormComponent2 />
<CustomToolbarComponent />
</SimpleForm>
As someone who was new to react-admin a few weeks ago too, please read the documentation thouroughly and their code and play with it, you'll come across the solution.
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