react-select in flex container - javascript

How can I make react-select to respect flex layout? Nothing of the below worked.
const Container = styled('div')`
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: baseline;
`;
const selectStyles = {
input: base => ({
minWidth: 200,
flex: 1,
<Container>
<Select
style={{ flex: 1 }}
styles={selectStyles}

To make your react-select component flex you need to apply flex:1 props on the container like this:
const styles = {
container: base => ({
...base,
flex: 1
})
};
<Select styles={styles} />

Related

Centering ant design carousel on screen

I resized an ant design carousel and would like to move the image to appear on the center of my screen.
This is how the image currently appears
This is what I have tried:
const contentStyle = {
height: '160px',
width: '25%',
color: '#fff',
lineHeight: '60%',
textAlign: 'center',
background: '#364d79',
justifyContent: 'center',
alignItems: 'center',
};
const imageStyle = {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'center',
}
return(
<>
<Carousel autoplay>
{
[onlineUsers].length === 0 ?
<p>There are currently no active users</p>
: onlineUsers.map(user => {
return (
<div className="img-container">
<h3 style={contentStyle}><img style={imageStyle} src={user.profile_pic} /></h3>
</div>
)
})
}
</Carousel>
You can use flex on the image container. It seems at runtime, on the container, display:inline-block is assigned. So we have to use display: flex !important for it to work.
It's also important to put a width & height:auto to image.
CSS
.container {
display: flex !important;
justify-content: center;
background-color: hotpink;
align-content: center;
}
.container > img {
width: 80px;
height: auto;
}
.carousal {
background-color: brown;
padding-bottom: 50px;
}
JS
<Carousel className="carousal">
<div className="container">
<img src={user} alt="xx" />
</div>
<div className="container">
<img src={programmer} alt="xx" />
</div>
</Carousel>
I have made a sandbox with two images, different sizes, center aligned.
Add this CSS and it should work fine
img{
margin: 0 auto;
}

Button works on emulator but not on smartphone on React Native

I have had a problem for several days, I have a list of items (a list of heads) and I want to be able to take action on these items (update/ delete).
I created an item component, with an update and delete button.
The Button component is a component of react native elements, I use it everywhere in my app and I have not had any problems so far.
ThemeItem.tsx
<Container>
<List onPress={() => onSelectTheme(theme.id)}>
<ListItem.Content>
<View
style={{display: 'flex', flexDirection: 'row', marginBottom: 5}}>
<ListItem.Title style={{fontSize: 18, fontWeight: 'bold'}}>
{theme.name}
</ListItem.Title>
{isActive && (
<Icon
name={'check-circle'}
color={'green'}
style={{marginLeft: 5}}
size={20}
/>
)}
</View>
</ListItem.Content>
</List>
<ThemeItemIconsStyle>
<>
{theme.id > 1 && !isActive && (
<Button
onPress={() => onDelete(theme.id)}
icon={{
name: 'trash',
type: 'font-awesome-5',
size: 25,
color: 'white',
}}
/>
)}
<Button
onPress={() => onUpdate(theme)}
icon={{
name: 'pen',
type: 'font-awesome-5',
size: 25,
color: 'white',
}}
/>
</>
</ThemeItemIconsStyle>
</Container>
ThemeItemIconStyle
const ThemeItemIconsStyle = styled.View`
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 15px 20px;
background-color: white;
width: 40%;
height: 100%;
`;
Container
const Container = styled.View`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: white;
`;
On emulator the behavior is the one expected but when I install the apk on my phone it does not happen absolutely.
I absolutely do not understand why my code works on emulator and not on a real phone. I assume that if on emulator there is no problem, the problem does not come from the code.
Thanks in advance for help
But what is the type of button? Button, TouchableOpacity, TouchableOpacityWithoutFeedback...
Also, I'd recommend to change your buttons to RectButton from react-native-gesture-handler, just to use native buttons in your application ;)

Render array as a matrix (n items per row)

I have a view and inside it a map function:
<View style={{width: 500, height: 500}}>
{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map((x,i) => {
return(
<View style={{width: 50, height: 50, backgroundColor: 'red'}}></View>
)
})}
</View>
How can I map this into a pattern? Like 5 on a row?
You can achieve this using flexbox and flexWrap, see the below given example
<View style={{display: "flex"; flexDirection: "row", flexWrap: "wrap", flex: 1;}}>
</View>
You can read this documentation to achieve this
https://reactnative.dev/docs/flexbox
You may split your source array into chunks (rows) of desired length and use nested .map() loops to render rows and cells within them:
const chunkArr = (arr, size) =>
arr.reduceRight((r,i,_,s) => (r.push(s.splice(0,size)),r),[])
Following is a complete live-demo of that concept:
const { useState } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const cellData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
const Matrix = ({cells}) => {
const rows = cells.reduceRight((r,i,_,s) => (r.push(s.splice(0,5)),r),[])
return (
<div className="wrapper">
{
rows.map((row,i) => (
<div key={i} className="row">
{
row.map((cell,j) => (
<div key={j} className="cell">
{cell}
</div>
))
}
</div>
))
}
</div>
)
}
render (
<Matrix cells={cellData} />,
rootNode
)
.wrapper {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
width: 20px;
height: 20px;
margin: 5px;
background-color: red;
color: #fff;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

How to test the state of a functional component in React with Jest (No Enzyme)

Hi everybody how can I test the state of a functional component from the useState hook?
This my component:
const Container = styled.div
display: flex;
flex: 1;
flex-direction: row;
align-items: ${props => props.hasSubtitle ? 'flex-start' : 'center'};
opacity: ${props => props.disabled ? 0.5 : 1.0};
${props => props.style}
const Button = styled.button
padding: 0;
border: none;
background: none;
cursor: pointer;
outline: none;
const TextContainer = styled.div
display: flex;
flex: 1;
flex-direction: column;
margin-left: 12px;
const CheckBox = props => {
const [selected, setSelected] = useState(false);
useEffect(() => {
setSelected(props.selected);
}, [props.selected]);
return (
<Container data-testid={'checkbox'} style={props.style} hasSubtitle={props.subtitle}>
<Button
data-testid={'checkBtn'}
onClick={() => {
if(!props.disabled){
setSelected(!selected);
if(props.onChange) props.onChange(!selected);
}
}}
>
{selected ? <CheckBoxOn/> : <CheckBoxOff/>}
</Button>
<TextContainer>
<Text style={{fontSize: 16}}>
{props.title}
</Text>
{props.subtitle && <Text style={{fontSize: 12}}>{props.subtitle}</Text>}
</TextContainer>
</Container>
);
};
export default CheckBox;
How can I check the value of the state when I render the component with the selected props value to false and when I render it with selected prop to true?
And how I can test if the click event on the button trigger setSelected()? By the way we are not able to use Enzyme
Checking state in your tests lately has been considered a bad practice. What people generally recommend is to check the consequences of a state change: in your case, you could check the presence of CheckBoxOn.

trying to render a button for a portal in react and get this error: × TypeError: Object(...) is not a function on the modalwrapper style

I created a portal to display a message. come compile time i get an error on the ModalWrapper and cannot figure it out. all technologies are installed and up to date. ive imported and exported differently just can seem to figure out.
import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
import Portal from './Portal';
import absolute from './elevation';
import Card from './Card';
import { Transition, animated } from 'react-spring/renderprops';
export default class Modal extends Component {
render() {
const { children, toggle, on } = this.props;
return (
<Portal>
<Transition
native
config={{
tension: 100,
friction: 15
}}
items={on}
from={{ opacity: 0, bgOpacity: 0, y: -50 }}
enter={{ opacity: 1, bgOpacity: 0.6, y: 0 }}
leave={{ opacity: 0, bgOpacity: 0, y: 50 }}
>
{on => on && ((styles) => (
<ModalWrapper>
<ModalCard styles={{
transform:
styles.y.interpolate(y => `translate3d(0, ${y}, 0)`),
...styles }}>
<CloseButton onClick={toggle}>
<p>H</p>
</CloseButton>
<div>{children}</div>
</ModalCard>
<Background style={{ opacity: styles.bgOpacity.interpolate(bgOpacity => bgOpacity) }} onClick={toggle}
/>
</ModalWrapper>
))}
</Transition>
</Portal>
);
}
}
const ModalWrapper = styled.div`
${absolute({})};
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
`;
const ModalWrapper = styled.div`
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
`;

Categories