Add a border around every styled-component in react-native? - react-native

Often, during the creation stage of react native components, we add border-width to see exactly where the components lays out on screen.
export const ScreenContainer = styled.View`
border-width: 2px;
flex: 1;
padding-horizontal: 36px;
`;
Then, when finished we comment out the border. There can be 10's of components.
export const ScreenContainer = styled.View`
/* border-width: 2px; */
flex: 1;
padding-horizontal: 36px;
`;
Is there a global way to add a border (or other style) to every styled-component with the ability to easily turn it on/off?
This would significantly speed up our development time.

You can do this:
const DebuggableView = styled.View`
border-width: ${({ theme }) => theme.debug ? '2px' : '0'};
`
Then wrap your app once with ThemeProvider and instead of a bare View or styled.View use DebuggableView.

Related

How style child element from parent in react native styled-components

I have container with child
<Container>
{[1, 2, 3].map((el) => {
return (
<Container2 key={el}>
<Text>{el}</Text>
</Container2>
)
})}
</Container>
and when I trying style child with help of selector it doesn't work for me.
const Container = styled(Block)`
flex-direction: column;
& > * {
background: black;
flex: initial;
margin-right: 0;
border-bottom-width: 5px;
border-bottom-color: white;
}
`
As I understood selectors don't work in native, but how we can style child from parent
in this case?
It's not possible
See: how do you style Text children in React Native with styled components?
You can just create a stylesheet and add a class for those children components, then add the style tag to it, like so:
<Container2 key={el} style={styles.yourCreatedClass}>
<Text>{el}</Text>
</Container2>

How can I space evenly in both directions?

I am developing a React Native app using Expo and I am using Styled Components.
At boot, it downloads a list of languages via an API and the flags of those languages are displayed on a selection screen.
I'm using flex-wrap so, right now, I have 6 languages, three rows, 2 flags in each row.
I am trying to figure out how to use flexbox so that the flags are spaced evenly in both directions.
I'm using flex-wrap and get even-spacing on the row.
How do I do the same column-wise, bearing in mind that the quantity of flags is dynamic?
I'd like the screen of languages to have even-spacing around the flags, both vertically and horizontally.
Ill suggest you doing that via Dimensions,
const screenWidth = Dimensions.get("window").width
Suppose you want to render 3 flags in a row and column can be N
so each Flag suppose takes up const eachWidth = (screenWidth-(gutterSpace+marginHorizontal))/3
Now so basically your marginHorizontal can be used as marginVertical so that all things are properly spaced.
const marginHorizontal = 20;
const gutterSpace = 10;
//Flag view
<View style={{width:eachWidth, margin:marginHorizontal}}/>
Hope it works, feel free for doubts
Could adding align-items: center work? Perhaps also setting height: 100vh if you're making a selection screen.
section {
display: flex;
flex-wrap: wrap;
height: 100vh;
align-items: center;
}
div {
box-sizing: border-box;
padding: 8px;
width: 50%;
border: 1px solid black;
text-align: center;
}
<section>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
</section>

How to make react-native-elements Tooltip size dynamic based on its content?

The React Native Elements Tooltip (docs here) requires you to pass in the width and height property for the tooltip, but I want to create a generic tooltip button that can receive any element as its popover prop.
The following example is what I have, but it uses the default size set to the tooltip by the React Native Element library:
import React from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'
const Container = styled.View`
justify-content: center;
align-items: center;
background-color: #aaf;
height: 25px;
width: 25px;
border-radius: 12.5px;
`
const Icon = styled.Text``
export default function TooltipButton({ tooltip }) {
return (
<Tooltip popover={tooltip}>
<Container>
<Icon>?</Icon>
</Container>
</Tooltip>
)
}
When the content is bigger than the default size it looks like this.
I Don't want to have to pass a fixed size as prop to this component, I would like it to have a tooltip size depending on it's content.
After some time trying to figure this out, I managed to do a somewhat autosize tooltip button that receives a content element as a prop (tooltip) and resizes itself based on its content.
The only way I got it to work properly was to set an initial size bigger than the content (500x500) and add more size to it (+30).
import React, { useState } from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'
const Container = styled.View`
justify-content: center;
align-items: center;
background-color: #aaf;
height: 25px;
width: 25px;
border-radius: 12.5px;
`
const Icon = styled.Text``
export default function TooltipButton({ tooltip }) {
const [tooltipSize, setTooltipSize] = useState({ w: 500, h: 500 })
const tooltipClone = React.cloneElement(
tooltip,
{ onLayout: (e) => setTooltipSize({ w: e.nativeEvent.layout.width, h: e.nativeEvent.layout.height }) }
)
return (
<Tooltip
popover={tooltipClone}
width={tooltipSize.w + 30}
height={tooltipSize.h + 30}
>
<Container>
<Icon>?</Icon>
</Container>
</Tooltip>
)
}
End result looks like this.
I guess it's enough to add 20 units to width and height. That's required because the default style applied to the Tooltip component adds a padding of 10, see here.
It seems that using null forces height and width to take as much space as the contents need!
height={null} // using height={null} seems to look good
width={null} // using width={200} seems to look better than null
Source of this hint: ToolTip in react native

Is there any way to use pseudo elements on React Native (with Styled Components)?

Is Styled Components' pseudo elements really compatible with React Native?? Or just ReactJS?
I tried it and it doesn't work:
const StyledTextContent = styled.Text`
display: flex;
font-size: 19px;
color: #565656;
&::after {
content: '!!!';
display: 'flex';
}
`;

React Native: Fit Text's content inside View without specific size

I have an Image and a Text component inside a Container with flex-direction row that fits 100% of my screen. The Text component has no size specified to it, neither does the Container.
When I have a single word that is to big, the Text component cuts the end of it's content with "-"; When I have a bunch of small words, the Text component cuts it's content after a given word; When I have a single small word (my use case) the Text component cuts the end of the word in a random character, even though it has plenty of space to render the text.
Here are my code snippets:
import React from 'react';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Container, Top, Logo, Title } from './styles';
import logo from '../../assets/Nubank_Logo.png';
export default function Header() {
return (
<Container>
<Top>
<Logo source={logo} />
<Title>Bruno</Title>
</Top>
<Icon name="keyboard-arrow-down" size={20} color="#fff" />
</Container>
);
}
import styled from 'styled-components/native';
export const Container = styled.View`
align-items: center;
padding: 40px 0 30px 0;
`;
export const Top = styled.View`
flex-direction: row;
align-items: center;
margin-bottom: 10px;
`;
export const Logo = styled.Image``;
export const Title = styled.Text`
font-size: 18px;
color: #fff;
font-weight: bold;
margin-left: 8px;
`;
And here is an screenshot of the result of this code
After a lot of research I found the cause to my problem.
I have a OnePlus 6 phone with android 9. I was using OnePlus Slate as my phone's default font.
The problem is that React Native Text component cuts the end of the text depending on the font you are using. It's a bug that has been around for a while and they still didn't find a solution for it. Here are some issues on their page on github:
https://github.com/facebook/react-native/issues/15114
https://github.com/facebook/react-native/issues/17026
https://github.com/facebook/react-native/issues/17629
and the comment in which I found the solution:
https://github.com/facebook/react-native/issues/15114#issuecomment-520112872
My solution
Since my phone has the option to change the system font family I just went and changed it to Roboto, as a test. In a real scenario you would need to change your app's default font family to Roboto.