Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TextInput][iPad] Numeric keyboard type not working #17793

Closed
puradox opened this issue Jan 30, 2018 · 7 comments
Closed

[TextInput][iPad] Numeric keyboard type not working #17793

puradox opened this issue Jan 30, 2018 · 7 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@puradox
Copy link

puradox commented Jan 30, 2018

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 9.3.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.52.2 => 0.52.2

Target Platform: iOS (8.0)

Steps to Reproduce

  1. react-native init NumbersPlease
  2. Open XCode project and change "General -> Devices" from "iPhone" to "iPad"
  3. Modify App.js to render a TextInput with keyboardType='numeric':
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <TextInput
          key='hi'
          autoFocus={true}
          keyboardType='numeric'
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
  1. react-native run-ios --simulator "iPad Pro (12.9-inch) (2nd generation)"

Expected Behavior

A keyboard input automatically gaining focus with a numeric keyboard layout.

Actual Behavior

A keyboard input automatically gaining focus with a default keyboard layout.

simulator screen shot - ipad pro 12 9-inch 2nd generation - 2018-01-30 at 11 30 26

Reproducible Demo

puradox/NumbersPlease
@jayeszee
Copy link

I think thats the numeric keyboard for ipads. On the phone it shows only numbers but I with an iPad its difficult to have an UI with just numbers. Can someone confirm this?

@gedeagas
Copy link
Contributor

Yep, as @jayeszee mentioned this is the default behavior on iPad because apparently, it's "Hard" to have a UI with just numbers on iPad.

@react-native-bot
Copy link
Collaborator

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to Contribute • What to Expect from Maintainers

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 24, 2018
@salmanwaheed
Copy link

salmanwaheed commented Feb 24, 2018 via email

@aMarCruz
Copy link

aMarCruz commented Mar 4, 2018 •
edited
Loading

@gedeagas , this bug is present in Android for RN 0.53.3

EDIT:
Solved by setting autoCapitalize="none"
See #12988 (comment)
NOT WORKING, kwyboard is resetting to default

@nimabk82
Copy link

nimabk82 commented Jul 5, 2018

I'm using react native 0.55.2 and I still have this problem in IPad

@saggiyogesh
Copy link

I'm using 0.56.0. Same problem.
Think it's an iOS related.
https://stackoverflow.com/questions/27409483/number-keyboard-in-ipad

@facebook facebook locked as resolved and limited conversation to collaborators Feb 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@saggiyogesh @puradox @aMarCruz @gedeagas @jayeszee @salmanwaheed @nimabk82 @react-native-bot