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.

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

Why No TextInput Primitive? #65

Closed
arahansen opened this Issue May 27, 2017 · 11 comments

Comments

Projects
None yet
8 participants
@arahansen
Copy link

arahansen commented May 27, 2017

I've seen some light discussion on why TextInput may or may not make sense as a primitive. Mostly in this issue.

I too believe that text inputs are a core feature of building complex, rich, interactive UIs. I would like to start a more in-depth discussion on what it would take to add such interactive elements to the core API. Or, to see more insight as to the hesitation against such a move.

@arahansen arahansen changed the title Why No TextInput primitive? Why No TextInput Primitive? May 27, 2017

@obartra

This comment has been minimized.

Copy link

obartra commented Jun 23, 2017

I'm interested on this as well, @lelandrichardson do you have any further insight on the topic? Happy to contribute if needed

@necolas

This comment has been minimized.

Copy link

necolas commented Jun 23, 2017

FWIW, you can prototype that / try it out in your environment by setting up your own injection (e.g., web injection). For Sketch, you could create a faux TextInput from Views/Text elements.

@ekryski

This comment has been minimized.

Copy link

ekryski commented Jul 10, 2017

I agree I think TextInput or even just Input (a base input component) should be a primitive. I started prototyping a version today but would love to hear from you guys as to what it should support.

My first stab was modeling it more after the react-native-web interface but I'm not 100% sold on that.

@necolas

This comment has been minimized.

Copy link

necolas commented Jul 10, 2017

My first stab was modeling it more after the react-native-web interface but I'm not 100% sold on that

It's the same as React Native

@ekryski

This comment has been minimized.

Copy link

ekryski commented Jul 10, 2017

@necolas yes you are right but what I found is that the browser supports more HTML5 input types (ie. dates, numbers, etc.) and a bunch of the RN interface doesn't make a whole lot of sense for web (ie. keyboard options, potentially capitalization, etc.).

A lot of the current components in here are quite similar across all platforms. What is the pattern that you guys are thinking for handling stuff where there is more variance?

  • Do as you did with react-native-web and mark certain props as platform specific and abstract/polyfill as best a possible? or...
  • Do you have a base component that implements all common functionality and then the platform specifics are left to the developer to determine?
@necolas

This comment has been minimized.

Copy link

necolas commented Jul 10, 2017

TextInput is not a replacement for all HTML inputs, so there's no problem there

@ekryski

This comment has been minimized.

Copy link

ekryski commented Jul 10, 2017

So after re-reading #54, now I actually take it back. @lelandrichardson gave an example of other interfaces like console or something where TextInput might not make as much sense.

Given what @lelandrichardson identified in the RFC:

We want to be careful in choosing these "primitives". We need enough to be able to build bigger more complex things, but need to keep it minimal enough so that it's reasonable to expect a new platform to be able to implement the full set of them. I believe things like TextInput may be really important in terms of some platforms, but not others, and so should maybe not be a primitive. This will have to be defined over time, but I think being conservative at first is ideal.

To be honest, I'm actually not sure if I'm even confident about the primitives listed above. For instance, if we wanted to add a platform like "console" and create something like react-curses, it's not clear if Image or Touchable actually make sense. These components were mainly chosen because after creating a fairly complete Component Library for Airbnb in React Native, I noticed that almost 95% of it could be implemented with just these primitives. The four that seem really clear to me are StyleSheet, View, Text, and Platform, but it's a balance.

My thought is that maybe react-primitives should have an Input component which has a subset API and we don't presume that it is a TextInput, Checkbox, Picker/Select, etc. Instead those would be core components (outside of react-primitives) built on top of the Input primitive.

So in this case an Input component would be more like an API and implement:

  • value - getter and setter
  • onChange
  • onLayout
  • onFocus
  • onBlur
  • blur
  • focus
  • clear
  • disabled
  • accessibility attributes

Thoughts??

@pddivine

This comment has been minimized.

Copy link

pddivine commented Jul 26, 2017

Perhaps Touchable should be generalized to Input since it is also responding to a form of input. TextInput implies input from a keyboard. If we had a general Input primitive it could be bound to different input types, like mouse, touch, keyboard, gyroscope, location, etc.

@sladiri

This comment has been minimized.

Copy link

sladiri commented Aug 14, 2017

Hi, I believe that this would be a good way to adopt the accessibility notion of interactive and non-interactive element. So I agree that both Touchable and Input are interactive elements for example.

@dwicao

This comment has been minimized.

Copy link

dwicao commented Sep 21, 2017

I created better primitives with support TextInput and FlatList
Also, it's not use react-native-web package
So you can use latest react v16+ and react-native v0.48+
Take a look the repo https://github.com/dwicao/react-universal-rendering

@mathieudutour

This comment has been minimized.

Copy link
Collaborator

mathieudutour commented Jan 28, 2018

see #54 for the discussion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment