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.

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

border top/left/bottom/right width not working #29

Closed
jlongster opened this issue Feb 2, 2015 · 49 comments
Closed

border top/left/bottom/right width not working #29

jlongster opened this issue Feb 2, 2015 · 49 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@jlongster
Copy link

I have this in my render method:

    return View(
      { style: { flex: 1 } },
      TouchableWithoutFeedback(
        { onPress: this.handlePress },
        View({
          style: {
            flex: 0,
            backgroundColor: 'gray',
            height: 50,
            alignItems: 'center',
            justifyContent: 'center',
            borderWidth: 1,
            borderColor: 'white'
          },
        }, Text({ style: { color: 'white' }}, "^"))
      ),
      TouchableWithoutFeedback(
        { onPress: this.handlePress },
        View({
          style: {
            flex: 0,
            backgroundColor: 'gray',
            height: 50,
            alignItems: 'center',
            justifyContent: 'center'
          },
        }, Text({ style: { color: 'white' }}, "v"))
      )
    )

It renders this:

screen shot 2015-02-02 at 9 43 33 am

But if I change the borderWidth in the first component to borderBottomWidth or any of the other top/left/bottom/right methods, there is no border. There should be a white border on one side of the component:

screen shot 2015-02-02 at 9 43 40 am

@vjeux
Copy link
Contributor

vjeux commented Feb 2, 2015

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.

@vjeux
Copy link
Contributor

vjeux commented Apr 1, 2015

Should be working now

@vjeux vjeux closed this as completed Apr 1, 2015
@janmonschke
Copy link
Contributor

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

@janmonschke
Copy link
Contributor

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

@axelg12
Copy link

axelg12 commented Jul 28, 2015

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

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

harrykiselev pushed a commit to harrykiselev/react-native that referenced this issue Aug 5, 2015
@mxkxf
Copy link

mxkxf commented Sep 17, 2015

+1 for <Text /> support

@JeanLebrument
Copy link

👍 I need this for <TextInput />

@ilansas
Copy link

ilansas commented Oct 27, 2015

+1 for <TextInput />

@elisei-timofte
Copy link

+1 for <Text />

@AlexGustafsson
Copy link

Any news on support for <Text />?

@chinloongtan
Copy link

+1 for <TextInput /> as well

@vjeux
Copy link
Contributor

vjeux commented Nov 3, 2015

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

@leeight
Copy link
Contributor

leeight commented Nov 17, 2015

+1

@rclai
Copy link
Contributor

rclai commented Dec 10, 2015

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

@akshaysmurthy
Copy link

Definitely need it for <TextInput />

@jorilallo
Copy link

+1 on <TextInput />

@kelvinlauKL
Copy link

+1 <TextInput />

@Overload119
Copy link

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

@claytongulick
Copy link

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...

@keeganmccallum
Copy link

+1 for TextInput

@rclai
Copy link
Contributor

rclai commented Feb 12, 2016

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.

@vjeux
Copy link
Contributor

vjeux commented Feb 12, 2016

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

@rclai
Copy link
Contributor

rclai commented Feb 12, 2016

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

@ghost
Copy link

ghost commented Feb 17, 2016

👍 for TextInput :)

@magrinj
Copy link
Contributor

magrinj commented Mar 2, 2016

@zhaotai
Copy link

zhaotai commented Apr 29, 2016

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

@DenisIzmaylov
Copy link

DenisIzmaylov commented Jun 15, 2016

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,
  },

dustturtle added a commit to dustturtle/react-native that referenced this issue Jul 6, 2016
…crash on simulator, on device I got nothing but app freezed)!

My app has an old version of JSONKit which is still using MRC. I think JSONKit is not needed if system version is available. Kicking out of JSONKit will make react native stronger.
Crash stack:
* thread facebook#11: tid = 0xbd672f, 0x000000010a10edeb imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=22 key/value pairs) + 16971 at JSONKit.m:2807, name = 'com.facebook.React.JavaScript', stop reason = EXC_BAD_ACCESS (code=EXC_I386_GPFLT)
    frame #0: 0x000000010a10edeb imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=22 key/value pairs) + 16971 at JSONKit.m:2807
    frame facebook#1: 0x000000010a10ef67 imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=2 key/value pairs) + 17351 at JSONKit.m:2811
    frame facebook#2: 0x000000010a10ef67 imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=25 key/value pairs) + 17351 at JSONKit.m:2811
    frame facebook#3: 0x000000010a10e768 imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=@"3 elements") + 15304 at JSONKit.m:2778
  * frame facebook#4: 0x000000010a10a26a imobii-waiqin`-[JKSerializer serializeObject:options:encodeOption:block:delegate:selector:error:](self=0x00007f9b831fbc80, _cmd="serializeObject:options:encodeOption:block:delegate:selector:error:", object=@"3 elements", optionFlags=0, encodeOption=10, block=0x0000000000000000, delegate=0x0000000000000000, selector=<no value available>, error=domain: class name = NSInvocation - code: 0) + 2250 at JSONKit.m:2876
    frame facebook#5: 0x000000010a109992 imobii-waiqin`+[JKSerializer serializeObject:options:encodeOption:block:delegate:selector:error:](self=JKSerializer, _cmd="serializeObject:options:encodeOption:block:delegate:selector:error:", object=@"3 elements", optionFlags=0, encodeOption=10, block=0x0000000000000000, delegate=0x0000000000000000, selector=<no value available>, error=domain: class name = NSInvocation - code: 0) + 178 at JSONKit.m:2831
    frame facebook#6: 0x000000010a10f700 imobii-waiqin`-[NSArray(self=@"3 elements", _cmd="JSONStringWithOptions:error:", serializeOptions=0, error=domain: class name = NSInvocation - code: 0) JSONStringWithOptions:error:] + 112 at JSONKit.m:2985
    frame facebook#7: 0x000000010ac13c02 imobii-waiqin`_RCTJSONStringifyNoRetry(jsonObject=@"3 elements", error=domain: class name = NSInvocation - code: 0) + 338 at RCTUtils.m:49
    frame facebook#8: 0x000000010ac13990 imobii-waiqin`RCTJSONStringify(jsonObject=@"3 elements", error=0x0000000000000000) + 128 at RCTUtils.m:77
    frame facebook#9: 0x000000010ab5fdfa imobii-waiqin`__27-[RCTContextExecutor setUp]_block_invoke_2(.block_descriptor=<unavailable>, moduleName=@"UIManager") + 218 at RCTContextExecutor.m:363
    frame facebook#10: 0x00000001134495cc CoreFoundation`__invoking___ + 140
    frame facebook#11: 0x000000011344941e CoreFoundation`-[NSInvocation invoke] + 286
    frame facebook#12: 0x000000010db13db3 JavaScriptCore`JSC::ObjCCallbackFunctionImpl::call(JSContext*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**) + 451
    frame facebook#13: 0x000000010db13926 JavaScriptCore`JSC::objCCallbackFunctionCallAsFunction(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**) + 262
    frame facebook#14: 0x000000010db14bad JavaScriptCore`long long JSC::APICallbackFunction::call<JSC::ObjCCallbackFunction>(JSC::ExecState*) + 573
    frame facebook#15: 0x000000010dade340 JavaScriptCore`JSC::LLInt::setUpCall(JSC::ExecState*, JSC::Instruction*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*) + 528
    frame facebook#16: 0x000000010dae535d JavaScriptCore`llint_entry + 22900
    frame facebook#17: 0x000000010dadf7d9 JavaScriptCore`vmEntryToJavaScript + 326
    frame facebook#18: 0x000000010d9b1959 JavaScriptCore`JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*) + 169
    frame facebook#19: 0x000000010d9985ad JavaScriptCore`JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) + 493
    frame facebook#20: 0x000000010d76cb7e JavaScriptCore`JSC::call(JSC::ExecState*, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) + 62
    frame facebook#21: 0x000000010d929a55 JavaScriptCore`JSC::callGetter(JSC::ExecState*, JSC::JSValue, JSC::JSValue) + 149
    frame facebook#22: 0x000000010dad49fb JavaScriptCore`llint_slow_path_get_by_id + 2203
    frame facebook#23: 0x000000010dae22f0 JavaScriptCore`llint_entry + 10503
    frame facebook#24: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#25: 0x000000010dae52fd JavaScriptCore`llint_entry + 22804
    frame facebook#26: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#27: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#28: 0x000000010dae52fd JavaScriptCore`llint_entry + 22804
    frame facebook#29: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#30: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#31: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#32: 0x000000010dae552a JavaScriptCore`llint_entry + 23361
    frame facebook#33: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#34: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame facebook#35: 0x000000010dadf7d9 JavaScriptCore`vmEntryToJavaScript + 326
    frame facebook#36: 0x000000010d9b1959 JavaScriptCore`JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*) + 169
    frame facebook#37: 0x000000010d998264 JavaScriptCore`JSC::Interpreter::execute(JSC::ProgramExecutable*, JSC::ExecState*, JSC::JSObject*) + 10404
    frame facebook#38: 0x000000010d7a8786 JavaScriptCore`JSC::evaluate(JSC::ExecState*, JSC::SourceCode const&, JSC::JSValue, WTF::NakedPtr<JSC::Exception>&) + 470
    frame facebook#39: 0x000000010d9f6fb8 JavaScriptCore`JSEvaluateScript + 424
    frame facebook#40: 0x000000010ab6379e imobii-waiqin`__68-[RCTContextExecutor executeApplicationScript:sourceURL:onComplete:]_block_invoke.264(.block_descriptor=<unavailable>) + 414 at RCTContextExecutor.m:589
    frame facebook#41: 0x000000010ab63262 imobii-waiqin`__68-[RCTContextExecutor executeApplicationScript:sourceURL:onComplete:]_block_invoke(.block_descriptor=<unavailable>) + 498 at RCTContextExecutor.m:589
    frame facebook#42: 0x000000010ab63df8 imobii-waiqin`-[RCTContextExecutor executeBlockOnJavaScriptQueue:](self=0x00007f9b832f6040, _cmd="executeBlockOnJavaScriptQueue:", block=0x00007f9b80c92970) + 248 at RCTContextExecutor.m:627
    frame facebook#43: 0x000000010eb1d7a7 Foundation`__NSThreadPerformPerform + 283
    frame facebook#44: 0x0000000113486301 CoreFoundation`__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
    frame facebook#45: 0x000000011347c22c CoreFoundation`__CFRunLoopDoSources0 + 556
    frame facebook#46: 0x000000011347b6e3 CoreFoundation`__CFRunLoopRun + 867
    frame facebook#47: 0x000000011347b0f8 CoreFoundation`CFRunLoopRunSpecific + 488
    frame facebook#48: 0x000000010ab5e41b imobii-waiqin`+[RCTContextExecutor runRunLoopThread](self=RCTContextExecutor, _cmd="runRunLoopThread") + 363 at RCTContextExecutor.m:284
    frame facebook#49: 0x000000010ebc012b Foundation`__NSThread__start__ + 1198
    frame facebook#50: 0x00000001140869b1 libsystem_pthread.dylib`_pthread_body + 131
    frame facebook#51: 0x000000011408692e libsystem_pthread.dylib`_pthread_start + 168
    frame facebook#52: 0x0000000114084385 libsystem_pthread.dylib`thread_start + 13
@nicolasduranl
Copy link

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

@arthurkushman
Copy link

arthurkushman commented Aug 23, 2016

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

@lukescott
Copy link

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

@grundmanise
Copy link

+1 for Textinput

@rushg
Copy link

rushg commented Mar 9, 2017

+1 for Text

@alexhhn
Copy link

alexhhn commented Mar 15, 2017

+1 for Text and TextInput

@Naoto-Ida
Copy link

+1 for what? TextInput 😙

@miggitymac
Copy link

+1 for TextInput

@tested01
Copy link

tested01 commented Mar 24, 2017

+1 TextInput

@aaroncrawford
Copy link

+1 for TextInput

@Rebsos
Copy link

Rebsos commented May 2, 2017

+1 Text

@narayananramu
Copy link

+1 for TextInput

@rileytg
Copy link

rileytg commented May 9, 2017

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

@IOriens
Copy link

IOriens commented May 31, 2017

+1 for Text

@hfigueira
Copy link

+1 for TextInput (Pleeeeeease!)

@herarya
Copy link

herarya commented Jun 6, 2017

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

@Chatharaju
Copy link

+1 for TextInput

@GetSource1234
Copy link

+1 for TextInput and View (RN 0.44)

@lako90
Copy link

lako90 commented Jun 14, 2017

@markusguenther
Copy link

+1 for Text

@hramos
Copy link
Contributor

hramos commented Jul 21, 2017

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.

@facebook facebook locked and limited conversation to collaborators Jul 21, 2017
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests