react-native: 0.53.0
react-native-elements: 1.0.0-beta4,
When I use Search Bar component from React Native Elements library, I am unable to capture 'onCancel' property. Code is provided below.
<SearchBar
lightTheme
clearIcon
platform={Platform.OS === "ios" ? "ios" : "android"}
placeholder="Search..."
returnKeyType='search'
cancelButtonTitle="Cancel"
onCancel ={()=>{this.doSomething();}}
onSubmitEditing ={()=>{this.handleSearch();}}
/>
I've wrote simple script with snack and tested. it works.
https://snack.expo.io/r12AYAoiG
Please change platform to ios and test it on iOS emulator.
I hope it give you some hints.
To conclude this, it was a syntax error. =(
when I made the call
onCancel={()=>{this.doSomething();}}
I wrapped it with the '{ }'. It should of been
onCancel={()=>this.viewHeader()}
I did want to point out though however that the calls :
onFocus ={()=>{this.hideHeader();}}
onBlur ={()=>{this.viewHeader();}}
are valid calls and it behaves properly. I think this is due to implementation by React-Native-Elements. The functions, onFocus() and onBlur() are explicitly written in the docs.
onFocus = () => {
this.props.onFocus();
UIManager.configureNextLayoutAnimation &&
LayoutAnimation.easeInEaseOut();
this.setState({ hasFocus: true });
};
onBlur = () => {
this.props.onBlur();
UIManager.configureNextLayoutAnimation &&
LayoutAnimation.easeInEaseOut();
this.setState({ hasFocus: false });
};
onChangeText = text => {
this.props.onChangeText(text);
this.setState({ isEmpty: text === '' });
};
Related
I'm trying to call scrollToEnd() in a screen that uses https://github.com/APSL/react-native-keyboard-aware-scroll-view and I get the error:
"cannot read property 'props' of undefined".
My code looks like this:
let scroll
(at the beginning of the file)
Then, inside the return:
<KeyboardAwareScrollView innerRef={ref => { scroll = ref }}>
my scrollable code
</KeyboardAwareScrollView>
And then there is a button which has
onPress={() => scroll.props.scrolltoEnd()}
Clicking the button gives the error above, which makes me think I'm not using innerRef correctly? Do I need to use useRef instead at some point? Any help is appreciated, thanks!
on KeyboardAwareScrollView use React.useRef
const scrollRef = React.useRef(null);
<KeyboardAwareScrollView
ref={scrollRef}
....
And on your input, listen onContentSizeChange
<Input
onContentSizeChange={(e) => {
if (scrollRef && scrollRef.current) {
scrollRef.current?.scrollToEnd();
}
}}
/>
You must use innerRef instead of ref and it will work.
<KeyboardAwareScrollView
innerRef={(ref) => {
scrollRef.current = ref;
}}
We are facing some very weird issue with opening keyboard on Android device.
It works great on iOS, 90% on Android devices, but on some devices it simply don't work = the keyboard don't show despite the input field has focus.
We tried it with different approaches (with refs, with timeout and without ref either).
All with the same result :/. One of the devices we are trying has API 30, so it even doesn't seem to be an old API problem.
Have anybody facing similar issue? What can cause the issue? Any tips how to debug it?
Here is code:
export const AddNotificationModal: AddNotificationModalT = ({
visible,
category,
onCloseModal,
}) => {
const input = useRef<TextInput>(null);
...
useEffect(() => {
if (visible) {
// 1.
// InteractionManager.runAfterInteractions(() => {
// if (input?.current) {
// input.current.focus();
// }
// });
// 2.
input.current?.focus();
// 3.
// setTimeout(() => input.current?.focus(), 150);
}
}, [visible]);
return (
<Modal
name={AddNotificationModal.name}
visible={visible}>
...
<View>
<TextInput autoFocus={true} ref={input} />
<Button dark onPress={() => onConfirm()}>
{t('shared:buttons.safe')}
</Button>
</View>
</Modal>
);
};
I have a react-native project in which I'm trying to handle the Switch component in a way that I can dynamically set an object with the boolean and its value, but I doesn't respond well:
Initially I use useEffect to process the data:
useEffect(() => {
let lista = {}
Object.entries(planes).forEach(([j, plan]) => {
lista[plan.nombre] = false
})
setSeleccion(lista)
}, []);
Then I loop through my data to load it and create the "card" dynamically with a Switch:
<Switch
offTrackColor="indigo.100"
onTrackColor="indigo.300"
onThumbColor="coolgray.500"
offThumbColor="indigo.50"
size="lg"
onToggle={(val) => toggleSwitch(val, plan.nombre)}
value={seleccion[plan.nombre]}
/>
Then toggle function:
const toggleSwitch = (val, plan) => {
setSeleccion({...seleccion, [plan]: val})
};
Now if I print the new array it shows as expected:
useEffect(() => {
console.log(seleccion)
}, [seleccion]);
But sadly the Switch remains as false visually (just goes back to its false state, so one cant toggle back to off/false).
If I do a toString(seleccion[plan.nombre]) in the render it shows [object Undefined]
Assuming that the Switch that you used is same/from react-native. There shouldn't be a prop called onToggle in Switch like you wrote below.
<Switch
offTrackColor="indigo.100"
onTrackColor="indigo.300"
onThumbColor="coolgray.500"
offThumbColor="indigo.50"
size="lg"
onToggle={(val) => toggleSwitch(val, plan.nombre)}
value={seleccion[plan.nombre]}
/>
instead, you need to use onValueChange
<Switch
offTrackColor="indigo.100"
onTrackColor="indigo.300"
onThumbColor="coolgray.500"
offThumbColor="indigo.50"
size="lg"
onValueChange={(val) => toggleSwitch(val, plan.nombre)}
value={seleccion[plan.nombre]}
/>
You can read more about the props in Switch here
I have a need to dynamically set the OnPressIn prop of a TextInput. I have a ref to the TextInput, but can't figure out how to set this method.
const inputRef = useRef(null);
<TextInput
...
ref={inputRef)
/>
// inputRef is passed as a prop to another component, then I try to set OnPressIn. Neither of these techniques work:
inputRef.setNativeProps({
OnPressIn: () => console.log('ONPRESS TRIGGERED'),
});
inputRef.OnPressIn = () => console.log('ONPRESS TRIGGERED');
How can I set this prop on a TextInput ref?
I believe you're missing "current".
inputRef.current.setNativeProps({
OnPressIn: () => console.log('ONPRESS TRIGGERED'),
});
Also, on what occasion does your onPressIn need to be changed? Isn't using a condition easier?
const handleOnPressIn = () => {
if (condition) {
console.log(`ONPRESS TRIGGERED condition: ${condition}`)
} else {
console.log(`ONPRESS TRIGGERED condition: ${condition}`)
}
}
<TextInput
onPressIn={() => handleOnPressIn()}
/>
If you're aiming for performance optimisation, I believe you should also consider wrapping the setNativeProps call in a useCallback() hook, as from the React Native docs on setNativeProps to edit TextInput value.
I copied/paste the first example of the React Hook Forms from NB 3.0 and getting this error. TypeError: errors is not an Object. (evaluating '"firstName" in errors'). Any idea why?
The example provided here Native Base V3 React-Hook_forms does not use the controller correctly to get onChangeText state and to catch errors for the value, to fix this change the following;
Change the line: const { control, handleSubmit, errors } = useForm(); to const { control, handleSubmit, watch, formState: { errors } } = useForm();
In the Controller change render={({ onChange, onBlur, value }) to render={({ field: { onChange, onBlur, value } })
In the Input component change onChangeText={(val) => onChange(val)} to onChangeText={onChange}
Reference is from the integration example on the React-Hook-Form website here: React Hook Form with React Native