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>
Related
I have a a child component with a data-table. But the font-size of DOM inside the child component gets small. I'm trying to see if there a way to to increase the font-size of my data-table header and th. If there is also away to make to make the child component to keep the same font-size as the parent or grand-parent component.
I tried header {font-size:15px} and th {font-size:12x} inside the child component and didn't work.
Inside your Child component define your custom style in style scope has showing below:
<style scoped>
.v-data-table header {
font-size: 14px;
}
.v-data-table th {
font-size: 12px;
}
.v-data-table td {
font-size: 12px;
}
</style>
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 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';
}
`;
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.
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.