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.
Conditional styling not working in React Native
See original GitHub issueVersion
1.0.8
Code
Styling code
const LinkText = styled.Text`
font-family: Avenir;
opacity: ${ props => props.active ? 1 : 0.3 }
`;
Component Render Code
<LinkText active>Hello</LinkText>
Expected Behavior
Link text should have full opacity (1)
Actual Behavior
Link text has the opacity 0.3, as if it is not active
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:7 (3 by maintainers)
Top Results From Across the Web
React Native styling with conditional - Stack Overflow
Use StyleSheet.create to do style composition like this,. make styles for text, valid text, and invalid text.
Read more >Improved Conditional Styling in React Native - OrangeLoops
Conditional styling in React Native apps often makes for a clustered render. Defining styles as functions can solve this problem and a few...
Read more >Adding Multiple or Conditional Styles to a React Native Element
The React Native style attribute can take an object or an array of objects. · These styles can be conditionally applied by using...
Read more >Platform Specific Code - React Native
If those are not specified, native key will be used and then the default key. import {Platform, StyleSheet} from 'react-native';
Read more >How To Handle Conditional Styling In ReactJS - C# Corner
This article will guide you on how to handle conditional styling in your react js application. In simple terms, how you will change...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You just have a typo there, it needs to be a function:
${props => props.light ? 'white' : 'black'}should work!Ah brilliant! Thanks, typical to miss something simple 😄 😂