Giter VIP home page Giter VIP logo

Comments (49)

JeanLebrument avatar JeanLebrument commented on March 29, 2024 29

πŸ‘ I need this for <TextInput />

from react-native.

arthurkushman avatar arthurkushman commented on March 29, 2024 10

There is no pain guys - all will work with <View> wrapping any <Text>, <TextInput>, <Touchable...>

from react-native.

nullicorn avatar nullicorn commented on March 29, 2024 7

πŸ‘ for TextInput :)

from react-native.

lukescott avatar lukescott commented on March 29, 2024 4

<View> wrapping is painful. It makes styling a pain. Especially with error states. 1 field = 4 independent styles.

from react-native.

janmonschke avatar janmonschke commented on March 29, 2024 2

It's not yet working for me (on 0.4.0)

from react-native.

janmonschke avatar janmonschke commented on March 29, 2024 2

Argh, nevermind, Apparently it is not activated for <Text /> nodes and I'm now wrapping a <View /> around them.

from react-native.

rushg avatar rushg commented on March 29, 2024 2

+1 for Text

from react-native.

vjeux avatar vjeux commented on March 29, 2024 1

Should be working now

from react-native.

rclai avatar rclai commented on March 29, 2024 1

Guys, make sure that you're voting it up in here: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/ instead of +1'ing.

from react-native.

rclai avatar rclai commented on March 29, 2024 1

A workaround is to wrap your TextInput or Text in a View and apply the borders on the View.

from react-native.

grundmanise avatar grundmanise commented on March 29, 2024 1

+1 for Textinput

from react-native.

vjeux avatar vjeux commented on March 29, 2024

Yup, you noticed! So, the story here is that borders on only one side are not natively supported by iOS, we did some bad hacks in our fb codebase to support it.

We want to rewrite it cleanly in OSS. Make sure it supports borderRadius, and does the same diagonal appearance when there are two adjacent borders with a different color/size.

from react-native.

axelg12 avatar axelg12 commented on March 29, 2024

Can confirm that this works in 0.8.0 for <View />

But is there a reason why it doesn't support <Text />?

from react-native.

mikefrancis avatar mikefrancis commented on March 29, 2024

+1 for <Text /> support

from react-native.

ilansas avatar ilansas commented on March 29, 2024

+1 for <TextInput />

from react-native.

elisei-timofte avatar elisei-timofte commented on March 29, 2024

+1 for <Text />

from react-native.

AlexGustafsson avatar AlexGustafsson commented on March 29, 2024

Any news on support for <Text />?

from react-native.

chinloongtan avatar chinloongtan commented on March 29, 2024

+1 for <TextInput /> as well

from react-native.

vjeux avatar vjeux commented on March 29, 2024

Can you add it to https://productpains.com/product/react-native/ so that we can figure out prioritization?

from react-native.

techmentormaria avatar techmentormaria commented on March 29, 2024

fyi: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

from react-native.

leeight avatar leeight commented on March 29, 2024

+1

from react-native.

rclai avatar rclai commented on March 29, 2024

@ide, you guys don't have labels for these types of issues?

from react-native.

akshaysmurthy avatar akshaysmurthy commented on March 29, 2024

Definitely need it for <TextInput />

from react-native.

jorilallo avatar jorilallo commented on March 29, 2024

+1 on <TextInput />

from react-native.

kelvinlauKL avatar kelvinlauKL commented on March 29, 2024

+1 <TextInput />

from react-native.

Overload119 avatar Overload119 commented on March 29, 2024

+1 <TextInput />, Googling brought me to this issue.

from react-native.

claytongulick avatar claytongulick commented on March 29, 2024

Ugh, spent hours banging my head against the wall trying to figure this out before I found this... +1 gajillion to make this work everywhere the docs say it should, like TextInput...

from react-native.

keeganmccallum avatar keeganmccallum commented on March 29, 2024

+1 for TextInput

from react-native.

vjeux avatar vjeux commented on March 29, 2024

Also, this is not a controversial feature. A pull request would be much more impactful :)

from react-native.

magrinj avatar magrinj commented on March 29, 2024

πŸ‘ TextInput :)
Up also here guys: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

from react-native.

zhaotai avatar zhaotai commented on March 29, 2024

Hi, although I can use <View> to wrap the <TextInput> and <Text> to support borderLeft/Right..., I still need them. I don't want to wrap too many <View>s to hack.

My react-native version is 0.24.1

from react-native.

DenisIzmaylov avatar DenisIzmaylov commented on March 29, 2024

It seems still doesn't working properly, have a look at the first item:

image

  return (
    <View style={[styles.eventInRoom, { borderLeftColor: roomColor }, styles.feedEventContainer]}>
      <View style={styles.feedEventContent}>

Which has the following styles:

  feedEventContainer: {
    margin: 10,
    marginBottom: 5,
    borderRadius: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: .3,
    shadowRadius: 1.3,
    backgroundColor: '#ffe',
  },
  eventInRoom: {
    borderLeftWidth: 3,
    borderTopWidth: 0,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  feedEventContent: {
    padding: 10,
    flexDirection: 'row',
    borderBottomColor: '#ddd',
    borderBottomWidth: .5,
  },

from react-native.

nicolasduranl avatar nicolasduranl commented on March 29, 2024

+1 for <TextInput />, also upvoted in productpain (Y)

from react-native.

alexhhn avatar alexhhn commented on March 29, 2024

+1 for Text and TextInput

from react-native.

Naoto-Ida avatar Naoto-Ida commented on March 29, 2024

+1 for what? TextInput πŸ˜™

from react-native.

miggitymac avatar miggitymac commented on March 29, 2024

+1 for TextInput

from react-native.

tested01 avatar tested01 commented on March 29, 2024

+1 TextInput

from react-native.

aaroncrawford avatar aaroncrawford commented on March 29, 2024

+1 for TextInput

from react-native.

Rebsos avatar Rebsos commented on March 29, 2024

+1 Text

from react-native.

narayananramu avatar narayananramu commented on March 29, 2024

+1 for TextInput

from react-native.

rileytg avatar rileytg commented on March 29, 2024

+1 for TextInput support, sooo many views for layout already :(

from react-native.

IOriens avatar IOriens commented on March 29, 2024

+1 for Text

from react-native.

hfigueira avatar hfigueira commented on March 29, 2024

+1 for TextInput (Pleeeeeease!)

from react-native.

herarya avatar herarya commented on March 29, 2024

+1 for TextInput, i need create text input group :(

from react-native.

Chatharaju avatar Chatharaju commented on March 29, 2024

+1 for TextInput

from react-native.

GetSource1234 avatar GetSource1234 commented on March 29, 2024

+1 for TextInput and View (RN 0.44)

from react-native.

lako90 avatar lako90 commented on March 29, 2024

i opened a request here https://react-native.canny.io/feature-requests/p/add-borderleft-right-top-bottomwidth-to-textinput--on-ios

please vote it =)

from react-native.

markusguenther avatar markusguenther commented on March 29, 2024

+1 for Text

from react-native.

hramos avatar hramos commented on March 29, 2024

There's way too many +1 comments in this thread, considering the issue was closed a long time ago. If you feel strongly about this being added to TextInput, please send a PR or upvote the entry on Canny: https://react-native.canny.io/feature-requests/p/add-borderwidth-left-right-top-bottom-to-textinput-

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

from react-native.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.