question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Providing marginTop to Input via ThemeProvider applies to SearchBar elements and cannot be overridden.

See original GitHub issue

Before filling out an issue, be sure to check the version of react-native-elements you are using and the docs for that version over here.

Explain what you did Defining the following in my React Native Elements theme works properly, except that this affects SearchBar elements and cannot be overridden when the SearchBar uses platform="Android"

  Input: {
    containerStyle: {
      marginTop: 16,
    },
  },

I’ve tried all methods of styling my SearchBar, but it always receives marginTop: 16

Expected behaviour Theme Inputs with containerStyle: { marginTop: 16 } and then override that on a SearchBar.

Describe the bug SearchBar inputContainer’s marginTop cannot be overridden when that value is provided via the ThemeProvider

To Reproduce We highly recommend that you re-create the bug on Snack. If not, list the steps that a reviewer can take to reproduce the behaviour:


To reproduce:

  1. Add the following to your theme:
  Input: {
    containerStyle: {
      marginTop: 16,
    },
  },
  1. Attempt to modify the marginTop on a SearchBar with platform="Android"

Possible Solution Unknown

Screenshots If applicable, add screenshots to help explain your problem.

Your Environment (please complete the following information):

software version
react-native-elements 1.0.0
react-native 0.57.1 (Via Expo)
npm or yarn Yarn@1.13.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
arpitBhallacommented, Jan 21, 2022

@Slapbox Now the searchbar don’t use themed input, so I am hoping it’s no longer any issue in v4

1reaction
nlok5923commented, Mar 10, 2021

@flyingcircle sir can i work on this issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Margin-top not working with <label> - Stack Overflow
Since your label is displaying as an inline element, the top margin won't have any effect. Margin properties specify the width of the...
Read more >
margin-top - CSS: Cascading Style Sheets - MDN Web Docs
The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, ......
Read more >
native base customizer
NativeBase is made from effective building blocks referred to as components. Adding custom native code. You just need to give local path or...
Read more >
Global Styling with Material-UI Theme Overrides and Props
When using the component directly and applying styles via theme overrides and props, the component type from Material-UI remains intact:.
Read more >
How to use styled components with Material UI in a React app
Indeed, these styled components take CSS rule blocks as input. ... Then, we have to provide the theme defined above to the app,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found