SolvedNativeBase Ref not working for Floating input

No description provided.

14 Answers

✔️Accepted Answer

It was a headache but finally found the solution.
cc @shivrajkumar @sankhadeeproy007


  _focusInput(inputField) {
    this[inputField]._root.focus();
  }
  render() {
    return (
      <View>
        <Form>
          <Item floatingLabel>
            <Label>Mobile Number</Label>
            <Input
              keyboardType='numeric'
              returnKeyType='next'
              getRef={(input) => this.mobileInput = input}
              onSubmitEditing={() => this._focusInput('passwordInput')}
            />
          </Item>
          <Item floatingLabel>
            <Label>Create Password</Label>
            <Input
              secureTextEntry={true}
              returnKeyType='next'
              getRef={(input) => this.passwordInput = input}
              onSubmitEditing={() => this._focusInput('emailInput')}
            />
          </Item>
...........

Other Answers:

Try getRef instead of ref.
The usual ref doesn't work for floatingLabel.

Related Issues:

169
NativeBase Needs to tap twice to fire onPress function when keyboard is open
@bm-software Use keyboardShouldPersistTaps={'handled'} and will works fine. react-native ...
58
NativeBase Content hides Input when keyboard visible (i.e. not keyboard-aware-scroll-view)
I made it work with https://github.com/APSL/react-native-keyboard-aware-scroll-view on Expo You need...
53
NativeBase error on nativebase 2.13.12 and expo 36.0.0 (REACT-NATIVE)
npm i --save-exact native-base@2.13.8 Expo should release a version with that version ...
41
NativeBase Unhandled JS Exception: Cannot read property '_root' of null
The problem seems to be in NativeBase/src/basic/Container.js Actionsheet error Actionsheet.js:94:79 ...
32
NativeBase Footer Tabs Question - How to make it work?
Hi FYI I've made on that way and it works fine 👍 Hi guys I'm a noob in RN yet but I found this awes...
26
NativeBase Components breaks when using custom styles created by StyleSheet.create
+1 for this You can solve this issue by flatten the style object like this: NativeBase components ...
24
NativeBase How do you integrate Picker & Radio Elements with redux-form and have them update correctly?
Thank you so much @maotora! For people using NativeBase v2.2.0 and Redux-Form v6.8.0 here is how I s...
20
NativeBase Unexpected token import native-base-shoutem-theme/index.js:1
@Darex1991 @colbywhite @shoutem/theme has been replaced with native-base-shoutem-theme Did you try t...
18
NativeBase Header title never align to center
@stefensuhat NativeBase follows Android and iOS guidelines Thus the title is on the left of the head...
14
NativeBase Picker : undefined is not an object :child.props.value
We found the solution.. the bug is quite incredible really We are using ImmutableJS for our redux st...
12
NativeBase Missing Font Awesome 5 files in Fonts folder
@rahamin1 If you're using 2.9.x and want to revert to 2.8.2 be sure to make it exactly 2.8.2 ...
11
NativeBase TypeError: null is not an object (evaluating 'this.toastInstance._root.showToast')
Wrapping the component in <Root> will do the trick <Root> will be imported from native-base ...
11
NativeBase Icons not displaying properly when installing via nrpm strategy- seeing [X] instead
Reproduction Instructions Testing React Native boilerplate Initialize a new react-native application...
9
NativeBase Android: How to create a Picker that must be selected? (E.g. "Select one...")
Sorry guys for some reason the link doesn't seem to work Here's how I did it So the idea is to add a...
9
NativeBase CheckBoxes not responding in List
Thanks @shivrajkumar I made some tweaking to your code.. the checkboxes work now. ...
8
NativeBase Floating Label with Error
Until this issue is closed you can put the icon on the right with style. I am trying to display the ...
8
NativeBase Toast Issue with React-navigation close app
Did you add Root as per documents? I added root to wrap my stack and the issue went away ...
8
NativeBase Unable to resolve mapPropsToStyleNames
I found a folder that named Utils in the node_modules/native-base/dist/src instead utils (they are d...
7
NativeBase rows aren't rendered until scroll rendomly
This seems to be a RN issue I used to solve this by adding this prop to List components ...
7
NativeBase Deckswiper doesn't show up on android
I just experienced this and I solved it with a minHeight for the containing <View> This is my own wo...
6
NativeBase DeckSwiper cannot be used inside of a Content Component
adding flex:1 to prop contentContainerStyle solves the issue in android Hi! Thanks for trying out Na...
6
NativeBase Nonscrollable Container
Use scrollEnabled={false} I haven't seen a way to make a container non-scrollable in the docs ...
6
NativeBase What am I doing wrong with my ActionSheet?
@msqar Wrap Actionsheet in Root I'm wrapping my main App component in a Native Base as the docs sugg...
6
NativeBase Ref not working for Floating input
It was a headache but finally found the solution cc @shivrajkumar @sankhadeeproy007 ...
6
NativeBase Can't use icon from a different source provided by `theme` attribute
@peterchibunna There is no theme property in Icon I don't know but I still am not able to do this ...
5
NativeBase Is there a way to make a card take the whole screen width?
@hpbl just override the style of component The spaces are due to the default margin given to the car...
5
NativeBase Refresh control not working with nativebase components
when I put it inside content it fires and shows the spinner - however I get this error ...
5
NativeBase Style Tabbar with Icons
try <TabHeading style={{ flexDirection: 'column' }}><Icon name=briefcase/><Text>Tab Text</Text></Tab...
4
NativeBase Nativebase Menu dropdown
@wnasirou @RyanLee1119 there is a popup dropdown menu which can work with native-base I found it in ...
3
NativeBase The "size" props in Thumbnail is not working in v2.0.8
@sankhadeeproy007 size attribute is still in the docs: https://docs.nativebase.io/COMPONENTS.html#Li...
750
react native keychain SDK Build Tools revision (23.0.1) is too low for project :react-native-keychain.
Ok I found a solution to this For people facing the same problem in the future Hey there ...
748
material components android Manifest merger failed : Attribute application@appComponentFactory
I had similar problem We're transitioning from github issues to a public buganizer component Rather ...
746
expo Error: fsevents unavailable (this watcher can only be used on Darwin)
Possible solution: I had installed watchman via npm install -g watchman but apparently this installs...
459
flutter Multiple commands produce '/build/ios/Debug-iphonesimulator/Runner.app/Frameworks/Flutter.framework
I was able to fix it by opening the Runner workspace project in Xcode 10 Then navigate to File ...
449
flutter App Store iOS submission fails: The bundle Runner.app/Frameworks/App.framework does not support the minimum OS Version specified in the Info.plist
After doing a flutter clean changing MinimumOSVersion (inside /ios/Flutter/AppframeworkInfo.plist) t...
418
flutter 'com.android.support:appcompat-v7' has different version for the compile (26.1.0) and runtime (27.0.1) classpath
is like this i receive an error when i run flutter run My gradle.build file is: flutter doctor: ...
409
flutter Why does my text not wrap?
You have to wrap Column in a flexible Without flexible the column's width is not constrained to the ...
383
flutter Unexpected top padding in ListView put inside scaffold with no appBar
Yeah this is intentional If you put a widget before the ListView you should wrap the ListView with a...
315
flutter Missing xcode dependency: Python module "six"
try python2.x -m pip install six by @humblerookie's suggest or brew reinstall python@2 pip install s...
306
expo exp build:android fails
This works exp start Cancel ctrl c then do exp build:android. Running exp build:android errors fails...
285
flutter flutter messaging: set the notification icon
Hey guys I fought with this for the better part of a day For some strange reason there are no tutori...
281
flutter Issue with cloud_firestore - Cannot fit requested classes in a single dex file.
As a workaround you can try enabling mutlidex for Android App by following Enable multidex for apps ...
265
flutter D8: Program type already present: io.flutter.BuildConfig
@smrucv I received the same error but after flutter clean and flutter packages get everything works ...
250
238
flutter Introduction of characters package causes crash on flutter run for preexisting Flutter applications
In my case I resolved the issue with flutter clean After e0ed12c I get this error when building: @ju...
222
nativescript cli TNS doctor doesn't recognize Xcode (High Sierra)
HI @philipfeldmann Can yhou please run xcodebuild -version and paste the output? May be Xcode is ins...